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.

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:
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
Is Nginx obsolete now that we have Amazon CloudFront? 28 July 2012
How much faster is Nginx+gunicorn than Apache+mod_wsgi? 22 March 2012
How I profile my Nginx + proxy pass server 16 February 2011
DoneCal homepage now able to do 10,000 requests/second 13 February 2011
ssl_session_cache in Nginx and the ab benchmark 31 December 2010
DoneCal gets a grade A (92) 27 November 2010