npm install
npm start
open browser at http://localhost:3000
SET "NODE_ENV=production" && npm start
NODE_ENV=production npm start
open browser at http://localhost:4200
This project provides a setup for further projects with React JS. Webpack is the build system and there is a production and a developer mode. You will find the descriptions below.
Start - The start script decides whether we are in production mode or in developer mode.
The production mode is usually set by the variable NODE_ENV. With if-enf we can check this variable and either start the tasks for production or developer mode.
"start": "if-env NODE_ENV=production && npm run start:prod || npm run start:dev"
Start:dev - This script runs our developer server (webpack-dev-server). Its configuration can be found in the dev-server.js.
"start:dev": "node dev-server.js",
Start:prod - This script runs the productive build and the production server.The configuration of this server is found in the server.js;
"start:prod": "npm run build-prod && node server.js",
Build-prod - With this script we clean our dist folder and start webpack with the specific config file for the production mode.
"build-prod": "npm run clean:dist && webpack --config webpack.config.prod.js --progress",
Clean:dist - clears the dist folder if needed (useful in production mode)
"clean:dist": "rimraf dist/*",
In most cases you are good to go with
npm start.
The configuration for our developer server can be found in the dev-server.js-file.
Here we are creating a new instance of the WebpackDevServer. We are running webpack with the configurations inside this server. The configurations of the developer mode are found in the webpack.config.dev.js.
new WebpackDevServer(webpack(config), { ... }- publicPath: The build folder during the development does only exist in memory. So you cannot see it in your file system. PublicPath defines a structure in this memory and defines where to find the files. More...
- hot: enable hot reloading More...
- historyApiFallback: needed for the react router to use the
browserhistory. More... - ContentBase: define the root folder in which we can find the
index.html. More...
Here we can define the port of the server and the error handling:
.listen(3000, 'localhost', function (err, result) {
if (err) {
return console.log(err);
}
console.log('Listening on port 3000');
});The configuration of the production server can be found in the file server.js.
Here you can simply setup the server for the production mode. It is configured with node's express.
The productive server is running under localhost:8080
There are two webpack configuration files:
webpack.config.dev.js(developer configuration)webpack.config.prod.js(production configuration)
In the production version there are some plugins for minification and compression.
In this setup there is a Embedded Javascript File, short .ejs. You do not need to insert your script files or the style sheets. Webpack is doing the job with this configuration. All you need is a <body>-tag in which you create a <div> in which we will load our app. If you need stylesheets call a require in your JS-Files and webpack knows to insert it into your application. Great :) Same thing with our images, javascript files and even the favicon.ico will be loaded with webpack into your application.
<body>
<div id="root"></div>
</body>In the src-folder are only .jsx-files. Those files will be compiled by webpack into browser readable javascript files. As you can see in the webpack configuration it is babel which does this job.
There is a scss and css loader included into the webpack configuration. So you can write your styles in the format you like and webpack helps you if you require your stylesheets in the javascript.
import styles from './Navigation.scss';