- Clone the repository
- Do an NPM install
npm i
- Done!
- All the source codes for the app should reside in the
src
directory. - There's two separate folders for client and server source codes.
- The
dist
folder will have your final production code. - The
bin
directory will have all your server codes which is transpiled to ES5 - There's two files in the
public
folder.template.html
is used as a template for generating HTML pages for your React modules. Theindex.html
can be used by you to create a welcome-page for your entire app. Thisindex.html
would be the page displayed to the user when he first accesses the website.
- Your React source codes should reside on the
src/client
folder. - Now in this folder, you can create as many sub-react apps you want. For example, if you want to create separate React apps for Login and Register, you can do that. Just create a subfolder in the
client
directory and you're done. It's better to modularize the React apps since it'll reduce the JS bundle size drastically on production. - If you created two modules Login and Register, the source codes for both modules will reside in
src/client/login
andsrc/client/register
. - So, to access the login module, the url would be like this:
http://localhost:1234/login
and for register it'd behttp://localhost:!234/register
. - This project has a built-in entry-point generator which helps the
webpack
to work. It works on convention more than configuration. So, it'll assume andindex.js
file will be your entry file to your module and will create thewebpack
bundle configuration. - If you didn't create any sub-react apps, this entry-point generator will search for
index.js
in thesrc/client
folder. This is required. And the user can access your module viahttp://localhost:1234/main
'. - Also, this project is equipped with a HTML generator for all the React apps you create. These HTML pages will have only the reference to the respective module bundle. This will reduce the dependency of scripts referred.
- The source codes for the server side should reside in the
src/server
folder. - The backend runs on
express
server. - This
express
server instance is configured to runWebpackDevServer
on development environment. server.js
is the main entry point for your express server.- The server is equipped with Hot-Module-Replacement by default.
- You can further modularize further by creating subfolders/files in this
src/server
directory.
- This project strictly follows Airbnb’s styling guide.
- Babel is configured to this project with the
latest
preset. So, you can write your source JS inES6
or even inES7
(it's recommended)