The fastest and easiest way to get started with a react & express project.
Use the package manager npm to install
create-app-react-express globally, so you can use it anywhere without having to download it again. Use the following command:
npm install create-app-react-express -g
# Main function to install all the neccessary files create-app-react-express [path_to_folder] # Folder exists it should be empty # Commands after creating an react & express application cd [path_to_folder] # Change the directory to the project folder npm run build # This will compile reacts code and watch for changes npm run start # This will start the express server on port 3000 npm run dev # This will start the express server on port 3000 with nodemon # Optional scripts (if something gets stuck) npm run killNodeWin # This will kill all node processes for windows npm run killNodeLinux # This will kill all node processes in Linux and Mac Os
├── package.json ├── package-lock.json ├── webpack.config.js # Webpack config file used for bundling up react code ├── robots.txt # Contains instructions for SEO bots ├── .gitignore # List of all ignored files and folders ├── .env # Environment varibales which are ignored (private) │ ├── public # This directory is visible by the web │ ├── index.html # Main entry HTML file (includes jQuery) │ ├── css │ │ └── styles.css # Main css stylesheet │ ├── js │ │ ├── index.js # Main js file (not react) │ │ └── bundle.js # React bundled up code │ └── imgs │ └── icon.png # image/x-icon for the website │ ├── server # This directory contains the server code │ │ # (it is not visible by the web) │ └── app.js # Node entry file and the server js │ └── api # This directory contains your api files │ └── ... │ ├── src # This directory contains the react code │ │ # (it is not visible by the web) │ └── App.jsx # Main entry file for bundling up react code │ └── components # This directory contains all react components │ └── ... │ ├── node_modules # Installed node modules │ └── ... │ └── README.md
If you would like to change the react entry file or bundle.js output location navigate to the webpack.config.js file. More information can be found here.
If you have any suggestions or found any bugs, please email me at: email@example.com