Deploying reactjs based application to AWS

Question

I have deployed a ReactJS based application to AWS S3 bucket. Additionally, I had to use CloudFront due to react-router issues, please see S3 Static Website Hosting Route All Paths to Index.html. Now, with CloudFront I have to re-create the distribution when I change endpoints (e.g. API host, callback URL etc), is this the way it works?

Chris Lam · Accepted Answer · 2017-06-29T03:00:51.157

1

No you don't have to re-create Cloudfront distribution.

A common practice is to append a hash to the static asset, eg:

<script src="myapp.bundle.js?v=12345678"></script>

The hash is usually the MD5/SHA1 hash of the file. Some may use the timestamp of the time you build the code. So after you update the file content and issue a new deploy, a new hash should be used. Consider the following flow as the client:

A client requests for myapp.bundle.js?v=1
Cache does not exist yet, Cloudfront proxies the request to S3 directly and caches the content.
Cloudfront serves cached content to myapp.bundle.js?v=1 for any subsequent requests.
Now you updated your code and deployed to S3 (with a new hash in your index.html).
Clients now request myapp.bundle.js?v=2 instead
repeat 2-3 and so on

The hash appending is usually done by build tool such as gulp and webpack with plugins.

edited Jun 29 '17 at 03:00

answered Jun 26 '17 at 07:08

Chris Lam

3,526
13
10

This actually makes sense, I would like to try. I used create-react-app, do you know what changes I need to make to have the bundle version? – nomadus Jun 26 '17 at 08:11
I believe it is doing so for you already https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/config/webpack.config.prod.js#L74 – Chris Lam Jun 26 '17 at 08:25
I checked, it is adding a hash code into the js files, but I don't see that the hash value is changing. – nomadus Jun 26 '17 at 08:37
Consider asking this with another question. Original question is more on Cloudfront. – Chris Lam Jun 26 '17 at 08:47
CRA already appends a hash. The hash value changes if source code changes. – Dan Abramov Jun 26 '17 at 12:12

score 0 · Answer 2 · answered Jun 26 '17 at 09:10

To make this solution complete, create-react-app uses HtmlWebpackPlugin to inject script tag into the index.html file. To append a hash, change the node_modules\react-scripts\config\webpack.config.prod.js as below (added hash:true line)

new HtmlWebpackPlugin({
      inject: true,
      template: paths.appHtml,
      minify: {
        removeComments: true,
        collapseWhitespace: true,
        removeRedundantAttributes: true,
        useShortDoctype: true,
        removeEmptyAttributes: true,
        removeStyleLinkTypeAttributes: true,
        keepClosingSlash: true,
        minifyJS: true,
        minifyCSS: true,
        minifyURLs: true,
      },
      hash:true
    }),

To see the details, please see the documentation https://github.com/jantimon/html-webpack-plugin#configuration

No, you don't need to add anything like this to Create React App. It already adds the hash. — Dan Abramov, Jun 26 '17 at 12:05

score 0 · Answer 3 · answered Jun 26 '17 at 10:35

0

The best way would be the one which is written here https://medium.com/@omgwtfmarc/if-youre-not-already-doing-this-creating-an-invalidation-for-cloudfront-will-dramatically-speed-7080357c9e8d

Just add invalidation for /index.html

answered Jun 26 '17 at 10:35

nomadus

859
1
12
28

Deploying reactjs based application to AWS

3 Answers3