How to deploy a create-react-app

04 November 2016   1 comment   Web development, Javascript, ReactJS

Powered by Fusion×

First of all, create-react-app is an amazing kit. It's a zero configuration bundle that gives you a react app boilerplate with a dev server, linting and a deployment tool. All are awesome but not perfect.

I could go on giving this project praise but if you're here reading this you might be convinced already.

Anyway, the way you deploy a create-react-app project is actually stunningly simple, but there is one major caveat to look out for. Basically running yarn run build will first delete existing files in the ./build/ directory. Files that it indents to replace. For example your ./build/index.html or your ./build/static/js/main.94a86fe3.js.

So, what I suggest is that you deploy it like this:

#!/bin/bash

# Go into the project where the package.json exists
cd myproject
# Upgrade any libraries
yarn
# Use 
yarn run build
mv build build_final

Note! This tip is only applicable if you deploy "in place" as opposed to building a whole new container/image and swapping an old container/image for a new one.

Now, for your Nginx point to the ./build_final directory instead. For example:

# /etc/nginx/sites-enabled/mysite.conf
server {
    server_name mydomain.example.com;
    root /full/path/to/myproject/build_final;

    location / {
        try_files $uri /index.html;
        add_header   Cache-Control public;
        expires      1d;
    }
}

The whole point of this tip is that it's a good idea to not point Nginx to the ./build directory (but to a copy of it instead) because otherwise, during the seconds that yarn run build runs (1-5 seconds) a bunch of files will be missing and Nginx will send 404 errors to the clients unlucky enought to connect during the deployment.

Follow @peterbe on Twitter

Comments

Anonymous
Thank you so much for this post.
Thank you for posting a comment

Your email will never ever be published


Related posts

Previous:
Optimization of QuerySet.get() with or without select_related 03 November 2016
Next:
Cope with JSONDecodeError in requests.get().json() in Python 2 and 3 16 November 2016
Related by Keyword:
How to create-react-app with Docker 17 November 2017
Podcasttime.io - How Much Time Do Your Podcasts Take To Listen To? 13 February 2017
10 Reasons I Love create-react-app 04 January 2017
Visual speed comparison of AngularJS and ReactJS 20 July 2015
How I stopped worrying about IO blocking Tornado 18 September 2012
Related by Text:
How to create-react-app with Docker 17 November 2017
10 Reasons I Love create-react-app 04 January 2017
"No space left on device" on OSX Docker 03 October 2017
Yet another Docker 'A ha!' moment 05 November 2017
Grymt - because I didn't invent Grunt here 18 April 2014