- Clone the repository
- Do an NPM install
npm i - Done!
- All the source codes for the app should reside in the
srcdirectory. - There's two separate folders for client and server source codes.
- The
distfolder will have your final production code. - The
bindirectory will have all your server codes which is transpiled to ES5 - There's two files in the
publicfolder.template.htmlis used as a template for generating HTML pages for your React modules. Theindex.htmlcan be used by you to create a welcome-page for your entire app. Thisindex.htmlwould be the page displayed to the user when he first accesses the website.
- Your React source codes should reside on the
src/clientfolder. - 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
clientdirectory 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/loginandsrc/client/register. - So, to access the login module, the url would be like this:
http://localhost:1234/loginand for register it'd behttp://localhost:!234/register. - This project has a built-in entry-point generator which helps the
webpackto work. It works on convention more than configuration. So, it'll assume andindex.jsfile will be your entry file to your module and will create thewebpackbundle configuration. - If you didn't create any sub-react apps, this entry-point generator will search for
index.jsin thesrc/clientfolder. 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/serverfolder. - The backend runs on
expressserver. - This
expressserver instance is configured to runWebpackDevServeron development environment. server.jsis 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/serverdirectory.
- This project strictly follows Airbnb’s styling guide.
- Babel is configured to this project with the
latestpreset. So, you can write your source JS inES6or even inES7(it's recommended)