Installing all dependencies:
npm install
or simply
npm i
Compiling .scss files into .css:
npm run sass
Compiling .jsx files into one bundle.js file:
npm run build
The project is ready for browsing index.html with js debugging under 'webpack://' folder in chrome dev tools
or
npm run dev
you are ready to browse http://127.0.0.1:8080/webpack-dev-server/ with live update
or
npm run deploy
The project is ready for releasing to production with minified version of bundle.js.
All all command line scripts are definded in package.json. I recommend to look at them because it would be easier to understand what are they doing. For example, the script:
"build_all": "npm run build && npm run build_dialogs",
runs another 2 scripts:
npm run clean && npm run build:dir
npm install
This will install libraries defined in package.json into the node_modules folder. For instructions of how to install npm for Win or Mac, see: https://github.com/gorioli/TestWebpack (steps 1-3).
WebPack combines multiple js files into one - bundle.js. It can create source maps to a bundled code which is very useful for debugging. It can also uglify js files.
Provided configuration files are:
- package.json: installs all dependencies by running "npm install" via command line.
- webpack.config.js: configures webpack to generate files into
build
dir for development. It generates js source map as well. - webpack.production.config.js: configures webpack to generate files into
dist
dir for production. No source maps are here.
node_modules/.bin/webpack
or easier way:
npm run build
generates files into build
where we have source maps for js and css.
npm run dev
Instead of running build command after every change in the code manually, we can run a Webpack Dev Server that does it for us. The server will watch changes in the code, recompile just the portion that changed, and refresh the browser sitting at url: http://127.0.0.1:8080/webpack-dev-server/:
Note: if chrome cant browse http://localhost:8080/webpack-dev-server/ Then change localhost to '127.0.0.1'
if npm gives errors, this might help on mac: sudo chown -R $USER /usr/local
gem install scss
-
Download and install Ruby.
-
Specify a path variable for the folder where the Ruby executable file and the gem.bat file are stored. This lets you launch Ruby and Gem Manager from any folder and ensures that Ruby is successfully launched during transpilation.
-
Type one of the following commands at the command line prompt:
gem install scss
or
gem install sass
The tool is installed to the folder where Ruby executable file and the gem.bat file are stored.
/usr/bin/scss --no-cache --update sass/:build/css/
or easier way
npm run sass
This command (defined in package.json as well) takes files from 'sass/' folder and compiles them into 'build/css/' folder. It also creates source maps debugging css styles.
npm run deploy
generates files into build
where we don't want to keep source maps. Don't forget to change index.html in the project folder to reference the right files.
Instead of build/css/main.css
and build/bundle.js
it should be dist/css/main.css
and dist/bundle.js
.
Also copy a file build/css/main.css
into dist/css/main.css
.
If source-maps are not needed on production then remove a reference to them from the end of each file (last commented line):
- ./build/css/main.css
- ./build/bundle.js
-
Install static-server, if not installed:
sudo npm -g install static-server
-
Go to the project folder
-
Run the server:
$ static-server
-
Access the image via:
http://localhost:9080/img/icon_atube.png
sudo npm install -g react-tools
jsx --watch src/ build/