How to deploy a create-react-app

04 November 2016   0 comments   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

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:
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
Local Django development with Nginx 11 October 2010