This is a boilerplate template which holds a basic React app generated thorugh
create-react-app and a basic Express API server.
The problem is that I personally find it very hard to set up a simple React App with an Express Server all in one repository. This implementation hopes to bridge the gap so other people may use both React and Express in their projects.
Through this implementation, not only are you able to quickly develop React and Express projects but this is quickly deployable to a service like Heroku. You may try it out if you wish to do so.
In addition, should you want to wish to deploy this to a service which provides hosting for front-end sites (such as GitHub Pages and Netlify) while hosting the backend separately, you may do so by using the environment variable
REACT_APP_PROJECT_SERVER to reference the Express API Server in the React Project. Please refer to
.env.example for the API URL format.
Once this repository has been downloaded into your computer, run
npm install to install all required dependencies. Depending on your internet connection, this may take a while (its more than 100mb).
All React code should be edited in the
client directory beneath
src while the Express code should be edited in
server for simplicity. To prevent any breaking code, please do not change the filename of
src/index.js as this is linked through
In the project directory, you can run:
This initiates the Express server through
server.js while opening a port at Port 5000 or whatever is specified through the
PORT environment variable.
Note: If the browser shows an error message saying that it can't find anything in the
build directory, please run
npm run build in order to build the React project.
This initiates a development server (initializing both the React Dev Server and the Express server) which reloads when a file has been saved.
Launches the test runner in the interactive watch mode.
See the section about running tests for more information.
Builds the app for production to the
It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.
Your app is ready to be deployed!
See the section about deployment for more information.
Note: this is a one-way operation. Once you
eject, you can’t go back!
If you aren’t satisfied with the build tool and configuration choices, you can
eject at any time. This command will remove the single build dependency from your project.
Instead, it will copy all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except
eject will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
You don’t have to ever use
eject. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
You can learn more in the Create React App documentation.
To learn React, check out the React documentation.
This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting
This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size
This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app
This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration
This section has moved here: https://facebook.github.io/create-react-app/docs/deployment
This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify