Building and Deploying a React Frontend with a Node Backend in 20 Minutes
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.
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
- Python 2.7+ or 3+ and pip (verify with
# 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 structure
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.
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.
Next, copy and paste the following app code into
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
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.
hello-react project folder, run the following command to create a new React project named
Writing a Build Script
package.json in our root folder, and include our build steps in our
npm start command.
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
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.
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
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!
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 firstname.lastname@example.org; we’d really love to help!