On my windows 10 machine, I'm using Git Bash, and I have a successful npm start of Webpack bundling several CSS and JavaScript files for a custom web project. But I am struggling in getting Modernizr to work at all with Webpack 4.8.3. Does anyone have any success stories on this specific implementation? Looking for any guidance. I have tried 3 different npm packages to get modernizr integrated and then working, but no luck on the latter.
Many thanks for any example steps and / or instructions.
I'm a little late to the party, but I figured I would post my solution going off of klewis' response, using webpack 4.23.1. Bear with me, as this is my first stack overflow answer 🎉.
After constructing my Modernizr build file and adding to my /src directory, instead of using the HTML Webpack Plugin, I set another entry point for webpack like so...
entry: {
bundle: './app/src/scripts/main.js',
modernizr: './app/src/scripts/lib/modernizr_custom.js'
},
Then changed the output filename to filename: '[name].js', which then the built file is with my bundle.js as modernizr.js.
That file can now be hooked into my templates: <script src="/scripts/bundle.js"></script>
Hope this solution is able to help someone else!
It appears that HTML Webpack Plugin can provide assistance with getting Modernizr wired up (naturally with a plugin, but that wasn't working for me). It took me some time to figure out an alternative approach, but here is what I did and will probably do moving forward for development builds...
Installed Webpack 4.8.3, along with the HTML Webpack Plugin, all via npm.
Constructed my Modernizr js Build file
Downloaded the file into my Webpack /src directory
Went into my weback.config.js file and told my HTML Webpack Plugin to add my Modernizr.js file like so...
new HTMLWebpackPlugin({
template: 'src/index.html',
links: [
'modernizr.js'
]
}),
Then added the necessary hook to my index.html template like so...
<head>
<script src="<%= htmlWebpackPlugin.options.links[0] %>"></script>
</head>
Finally, ran npm start
and now Modernizr is working for my web project and injecting classes into my <head> element. 2 easy steps once you have all the right dependencies and configurations set in place.
Hopefully this is a help for others.
Related
So this is a project in Laravel with Vue+Vuetify frontend. I'm using Vue CLI. I have set Vue CLI's output directory to Laravel's public folder using vue.config.js, like this:
module.exports = {
configureWebpack: {
devtool: 'source-map'
},
devServer: {
proxy: 'http://localhost:8080/api/v1/',
},
outputDir: '../public',
indexPath: '../resources/views/index.blade.php',
}
This works. However mdi icons on the web page do not show. I understand that I need to add link tag <link href="https://cdn.jsdelivr.net/.../materialdesignicons.min.css" rel="stylesheet"> to the index file, but I don't know where do I add it. The index.blade.php is overwritten by the Build process every time.
Alternate path is to include that css file in the build process by installing npm package and adding a few lines to my main.js, but I'd rather avoid that since my output is already getting bigger.
Figured out soon after posting question. I'll post it here for my own record and for anyone else landing here.
The solution was simpler than I anticipated. Vue CLI uses contents of /public folder to generate build output. So the solution was to simply go to public/index.html and place the meta tag in there.
Note: In my case I created a Laravel project and then used Vue CLI to create a Vue project inside Laravel project folder, so my folder structure looked like this:
Laravel_Project
--app
--bootstrap
--...
--public
--Vue_CLI_Project
----src
----public
Note that there are two public folders: First one is in Laravel project's root directory, whereas the second one is inside Vue project's directory. We are talking about the second one here.
I have been looking into Vue and have got it working with what I need.
Typescript
SSR
My sample project can be found at https://github.com/Alik2015/VueDemo. To run
npm install
npm run ssr:serve //development
npm run ssr:build //production build
npm run ssr:start
View source of page and see css has not been minified.
When building this project I observe the following:
1) My css is in the head section of the page and not extracted (read somewhere this is default behaviour but not 100% sure)
2) My comments still still exists in the css for example /*comment*/
3) My html losing all spacing
I did try and set css:{extract:true} and various other options in vue.config.js but them just left it blank as none worked.
Appreciate if someone could point me in the right direction.
I am not a front-end developer so might have missed something simple.
I am wanting to build a website that will utilize a WYSIWYG such as ProseMirror. Their documentation is a bit clear that it is not such an easy process to build everything yet, as they have focused on other parts of development first. However, they do provide a project that you can clone and run.
I am not sure how to actually run this example however.
I have created a new folder inside my active MAMP directory, and have done npm install to get all of the items in the package.json. Then I have run npm run build so that the project is now built into the dist folder specified by default in the package.json.
However, how do I actually make it run in the browser? If I go to the browser, it is simply showing my a list of files and documents, rather than the actual application.
I have also tried running npm start but that doesn't have any linked commands in the package.json. I do see that this is using rollup.js. I have not used that before, perhaps that has some commands?
I created this guide for a friend. Hope this helps you and anyone looking for the same answer. It's not perfect but gets you up and running.
ProseMirror is a well-behaved rich semantic content
editor based on contentEditable, with support for
collaborative editing and custom document schemas.
The problem is that the documentation on how to set
it up from nothing to a hello world using the demo
examples is non existent. All documentation assumes
you have it set up and working.
This guide is to help you get to "hello world" stage
• First setup rollup. Follow the instructions for that here.
You should now have the project on your computer
from this and when you open the html file in your browser see the "hello world" style screen.
• cd into learn-rollup project folder and npm install prosemirror module packages:
prosemirror-state.
prosemirror-view.
prosemirror-model
prosemirror-schema-basic
prosemirror-schema-list
prosemirror-example-setup
• In the learn-rollup index.html file add the following html
html code to add to learn-rollup index.html
The link to the css file
The tag in body that has id=editor
learn-rollup folder structure
• Create a copy of src/scripts/main.js and rename it
mainbackup.js.
• Now replace everything in main.js with code from prosemirror.net first example.
• Run \node_module.bin\rollup -c
• Reload .html to see prosemirror working.
There is no 'Hello World' example that shows how to use the prosemirror libraries in themselves - the basic example linked to in the question still needs to be 'used', as shown in the closest thing that exists to a 'Hello World' example: https://prosemirror.net/examples/basic/ - which from the docs looks like it can be represented in a simpler way:
import {schema} from "prosemirror-schema-basic"
import {EditorState} from "prosemirror-state"
import {EditorView} from "prosemirror-view"
let state = EditorState.create({schema})
let view = new EditorView(document.body, {state})
Instead you can look at wrapper libraries that provide copy/paste editors and that can be incorporated into your project.
Using ProseMirror core libraries requires that you read the docs - there is both an overview section: http://prosemirror.net/docs/guide/#intro, and a reference section: http://prosemirror.net/docs/ref/#top.intro
If you go to the basic example, you will see some code that uses the example project that you linked to.
That project needs to be better documented, IMHO. I don't think that it's supposed to be an example of running prose mirror, but more of an example of wiring all of the different parts up together.
All of the parts of ProseMirror are on NPM and can be installed that way, even the example project. Install the imports from NPM and then copy that code into either an index.js or HTML file and you should have a basic editor on screen. Study the basic example repo to better understand how the parts fit together.
To get a minimal editor up and running with rollup first install rollup:
npm i -g rollup
Install the rollup resolve plugin:
npm i #rollup/plugin-node-resolve
Then add the following to the rollup.config.js file:
import resolve from '#rollup/plugin-node-resolve'
export default {
input: 'main.js',
output: {
file: 'build.js',
format: 'iife'
},
plugins: [resolve()]
}
Install prosemirror basic libraries:
npm i prosemirror-schema-basic prosemirror-state prosemirror-view
Create the main.js file with the following content:
import {schema} from 'prosemirror-schema-basic'
import {EditorState} from 'prosemirror-state'
import {EditorView} from 'prosemirror-view'
let state = EditorState.create({schema})
window.view = new EditorView(document.querySelector('#editor'), {state})
Build your editor (to build.js):
rollup -c
Finally include build.js and optionally the styles in the prosemirror-view package into your HTML file and enjoy:
<html>
<body>
<div id="editor"></div>
<script src="build.js"></script>
</body>
</html>
I went through #Rob 's method and almost succeed. Just one thing, after completed all steps, I ran into an error(see below).
The code is from the official first example.
Don't know why that happened, I have to manually put a <div id="content"></div> after <div id="editor"></div> to get started.
But shouldn't <div id="content"></div> gets added automatically? #Rob or The official first example didn't mention you have to add this div, no clue what went wrong.
I'm using sails(http://sailsjs.com) to develop a little platform. Everything goes smoothly following the documentation. But being new to this javascript frameworks world and npm etc etc, i've been having a trouble including other node_modules and use them in the .ejs views...
I understand not all modules are to be included in the views but how can I manage to include some?
Trying to use https://www.npmjs.com/package/vue-slider-component
Thank you in advance and sorry if this error is just plain out stupid.
Your confusion is understandable. The issue is that, until relatively recently, things installed in node_modules were solely for use in the back end code; that is, your Sails.js controller actions, models, etc. After all, the node_modules folder has the word "Node" right in it, and it was created for use with NPM (the Node Package Manager) to help organize Node (i.e. server-side JavaScript) files!
While many front-end plugins were (and still are) published on Bower, newer frameworks like Angular 2 and Vue often publish their plugins to NPM because it reduces the number of moving parts for your app. The problem is, if you try to require('vue-slider-component') in your server-rendered .ejs view, the server (i.e. Sails.js) will try and load and run that code before it renders the view, where what you really want is for that plugin to run in the browser.
The long-term solution is to use something like Browserify or Webpack to compile all of your front-end JavaScript files into a "bundle". So for example if you have a file like assets/js/my-vue-app.js that includes the line:
import vueSlider from 'vue-slider-component/src/vue2-slider.vue'
then Browserify will see that line, load up that vue2-slider.vue file, add it to the top of the my-vue-app.js file, perform some other magic, combine it with your other front-end .js files and output a file like browserified.js which you would then include via <script src="/path/to/browserified.js"> in your HTML.
Since new Sails apps use Grunt to organize and inject those <script> tags into your views for you, it can be kinda confusing as to how you would get something like Browserify or Webpack to work with Sails. For Sails 1.0, there's a seed project for using Webpack instead of Grunt. For Sails v0.12.x, you'll have to Google around to find some examples of using Broswerify or Webpack with Sails.
A short-term solution, and probably not as maintainable in the long run, is to save the contents of the minified vue-js-slider component into your assets folder (e.g. as assets/js/vue-slider-component.js), add it to your HTML with <script src="/js/vue-slider-component.js"> and access it in your code as window['vue-slider-component'].
When using Aurelia, I see the following for CSS.
import 'bootstrap/css/bootstrap.css!';
My questions is, can you configure it to support less files? Or do we need to run the preprocessor separately, converting our less files into css files first?
Thanks in advance.
I think your question is very broad, the answer depends on the solution you choose.
The get started page of Aerelia shows you how to integrate Bootstrap using jspm. Some source 1, 2 suggest to fork the Bootstrap repository on github and use this customized fork instead of the original with jspm. In the package.json fiile of your project replace Bootstrap with your own fork in the jspm dependencies, or run:
jspm install github:{username}/bootstrap#master
For the long term i expect that the above will cause you troubles with keeping your fork up to date. Also you will have to compile Bootstrap (local) and push your changes to github for every change.
Alternatively you can indeed download Bootstrap and add to Less compile task to the gulp build tasks of your project. As already suggested by #matthew-james-davis in the comments you can use Using SASS with Aurelia's Skeleton Navigation project to find out how to do this.
I suggest to use bower to locally install Bootstrap:
bower install bootstrap
The above will install bootstrap in the bower_components/bootstrap folder. Don't modify these files directly. Create a less/project.less:
#import "bootstrap";
// your custom code here
Notice that compiling Bootstrap requires the autoprefix css processor too. See also: http://bassjobsen.weblogs.fm/compile-bootstrap-less-v2-autoprefix-plugin/
So you gulp build task should look like that shown below:
var LessPluginCleanCSS = require('less-plugin-clean-css'),
LessPluginAutoPrefix = require('less-plugin-autoprefix'),
cleancss = new LessPluginCleanCSS({ advanced: true }),
autoprefix= new LessPluginAutoPrefix({ browsers: ["Android 2.3,Android >= 4,Chrome >= 20,Firefox >= 24,Explorer >= 8,iOS >= 6,Opera >= 12,Safari >= 6"] });
gulp.task('build-less', function() {
gulp.src('less/project.less')
.pipe(sourcemaps.init())
.pipe(less({
plugins: [autoprefix, cleancss],
paths: [ path.join(__dirname, 'bower_components/bootstrap/less/') ]
}))
.pipe(sourcemaps.write(paths.sourceMapRelativePath))
.pipe(gulp.dest('css/'))
});
The above task should compile css/project.css you can reference this file in the index.html of your project:
<link rel="stylesheet" type="text/css" href="css/project.css">
You also will have to load Bootstrap Javascripts plugin. These plugin depends on jQuery. Link bootstrap.min.js from your bower_component folder.