create-app-react-express

The fastest and easiest way to get started with a react & express project.

Installation

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

Usage

# 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

Project Structure

├── 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

Note

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.

Support

If you have any suggestions or found any bugs, please email me at: [email protected]

License

MIT