How to Deploy a React App with API Request Proxying
I recently completed my final project for the Flatiron School’s Full Stack Web Development program. This project consisted of a React front-end paired with a Ruby on Rails API backend. As the project came to an end the question became, how to deploy this thing?
Deploying the Rails API
The Rails side of the application is fairly straight forward. I’ve always just deployed to Heroku’s free tier, which works well for these types of side projects. Heroku has good instructions here.
The quick synopsis is to:
- Create your Rails app.
- Check it into git.
- Setup PostgreSQL as your DB.
Then you can simply run…
1 2 3 4 $ heroku create $ git push heroku master $ heroku run rake db:migrate $ heroku open
Making sure to regularly run
git push heroku master as you develop your app will help to prevent any Rails/Heroku related deployment issues along the way.
So what about React?
The React portion of my app was created with create-react-app. If you’re using React,
create-react-app is a great way to get up an running quickly. It provides some tools and scaffolding to get you started. Also, if you haven’t read the REAME.md there is some great information contained inside!
When developing a React app with
npm start command runs the local development server and changes to files are watched and updated in the browser providing an interactive development experience. However, for deployment a different set of steps are required. With
Deploying with Netlify
The deployment section of the
README has information on how to deploy to specific hosting services. I’m going to focus on a specific provider, Netlify, who I’ve used in the past for my personal website. Netlify has some great features and is easy to use, so I turned to it for this project too.
To deploy your app Netlify will pull your code from GitHub (or other hosted Git provider). If your React app’s code is already on GitHub you can just select the repo for your app. Netlify will setup all of the required settings for your, which in this case is to use the
master branch, run
npm run build to build the app, and use the
/build directory to publish the app. The instructions from
create-react-app can be found here. Subsequent pushes of your code to GitHub will trigger a build on Netlify and deploy the updated version of the app. The mechanism provides a quick and easy way to keep your site up to date.
The final step to deploy with Netlify is to add a
_redirects file to the
public folder of your application. The
_redirects file will handle two situations. The first is supporting
pushState, which you’ll need to use React Router or to support url changes while having a single-page React application. The second is to proxy requests for your API calls.
For the first situation add a line containing
/* /index.html 200 to your
public/_redirects file. This is just telling Netlify to send all requests for your React app to
/index.html instead of the actual requested route. For example a request to
your-app.com/articles will be redirected to
/index.html. Because React apps are single-page applications with only one HTML file, if this was not enabled requests to other routes would try to access files that don’t exist on your server.
The second use of the
_redirects file is to avoid CORS issues when calls are made from your React app to your API. Netlify allows you to proxy requests through their hosting service. To use proxying with Netlify, simply add another line to your
/public/_redirects file. The example Netlify provides is
/api/* https://api.example.com/:splat 200, which tells their servers to redirect any requests made to
/api/* to your API server. In my case this line looked like
/api/* https://timer-rails.herokuapp.com/api/:splat 200. I placed this first in the file to make sure that the previously discussed
/* redirect did not override calling out to the API. The documentation from Netlify can be found here..
Here is the final
/public/_redirects file for my site:
1 2 /api/* https://timer-rails.herokuapp.com/api/:splat 200 /* /index.html 200
When you create your
_redirects file, Netlify has a handy site to test your redirects. Just copy in your
_redirects file, click “Test rules”, and the site will notify you of any problems.