Building and Deploying a React Frontend with a Node Backend in 20 Minutes
Welcome!
This is a quick guide on how to create and deploy a full React frontend with a Node backend (using the Express web server).
We’ll not only get the project running locally, but we’ll deploy it using Structure, a serverless platform that makes it trivial to run apps in the cloud in a production-ready way. Deploying is often a daunting task, but fortunately, we won’t need to configure or manage any servers.
Finally, if you run into any issues while creating your project, the full project code is available on GitHub; feel free to reference or clone it.
Creating a Structure Account
If you’re interested, head over to https://structure.sh to create an account. While this isn’t necessary to run your project locally, it is required to deploy it and see it live. Don’t worry – it only takes a second and comes with a free trial.
Environment Setup
This guide assumes you have a few core packages installed on your computer. If you don’t already have them, click the links below to install them.
- Node and NPM (verify with
node --versionandnpm --version) - Python 2.7+ or 3+ and pip (verify with
python --versionandpip --version)
Next, we’ll need Facebook’s open-source create-react-app package, as well as the Structure CLI.
# Install create-react-app globally
sudo npm install -g create-react-app# Install the Structure CLI with the `pip` package manager globally
sudo pip install structurestructure login
Alternatively, you may install create-react-app in a specific project folder, instead of globally, with npm install create-react-app. You can do the same with structure with a virtual environment, but this isn’t recommended.
If you have any issues installing the Structure CLI, visit our Documentation or send us a message.
Creating an Express Backend
Let’s create a project folder for our new application, hello-react, and create a server.js file, which will handle and route web requests. We’ll see that this Express app will serve the React frontend.
mkdir hello-react
cd hello-reacttouch server.js
Next, copy and paste the following app code into server.js.
You’ll notice that server.js references a client folder, which we’ll create next. The client folder is where our React frontend will live, and the compiled frontend will live in client/build.
Creating the React Frontend
Now that we have our Express server written, we’ll use create-react-app to create a React project from a template. This is quick way of getting a React app started, as it provides a nice abstraction over Webpack, Babel, and some other React requirements.
In our hello-react project folder, run the following command to create a new React project named client.
create-react-app clientWriting a Build Script
Because React apps must be “built” (ex. to compile JSX to Javascript, minify code, etc.), we’ll create a package.json in our root folder, and include our build steps in our npm start command.
Create a package.json file in the root project folder, and copy and paste the following code:
Let’s look at this file more closely. When we deploy this application to Structure, Structure will recursively find all packge.json files and install all Node dependencies. For our backend, the only dependency is express.
Next, Structure will call the npm start command, which will run the build-client script (which compiles the React frontend).
Note that we do not need to manually run npm install anywhere; Structure will do this automatically!
We also have a start-local command. We can call this by running npm run start-local, which will build the frontend, then start the Express server locally on port 8080, instead of the production port, 80. However, you will have to run npm install in this folder and the client folder first, to run the project locally.
Finally, both start and start-local will run node server which will start our Express server backend!
Deploying to Production 🚀
This is the hard part, so pay close attention! While inside the hello-react folder, run the command:
structure deploy hello-react
That’s it! Structure will upload your project, deploy it, create SSL certificates, set up load-balancers, and more, all automatically! Best of all, you’ll see it running in a minute at https://hello-react-YOURUSERNAME.structure.sh.
Note: The first deploy may take a minute or two, but subsequent deploys will be much faster. Check the logs to monitor the build process.
You now have a fully-functioning Express and React app deployed and live on Structure. You can run structure list and structure logs hello-react to check the status of your deployment. You’ll also see the project on your Dashboard.
Now, feel free to make a change, like editing the App.js file in hello-react/client/src/App.js, and run structure deploy hello-react to update your app!
Next Steps
Once you’ve got this project up and running, take a look at our Node.js documentation.
You can also login to add a custom domain, create a database, view logs, and more!
Questions or comments?
Reach out to us! If you have any questions, or need help getting this guide working, send us a message at help@structure.sh; we’d really love to help!
