Posts tagged "tips"

How to serve your React App’s JS and CSS files from a CDN

If you are looking on how to serve your React App that is bootstrapped with create-react-app from a CDN for better performance, I will show you how.

After creating a build, if you check the index.html file inside your build folder you will see that that its referencing all the assets from the static folder:

<script src="/static/js/main.560a2161.chunk.js"></script>

Now let’s add an environment variable which will make our app use our CDN url as the base URL, there are couple of ways to do so.

Either you can create an .env file in your project root and add a PUBLIC_URL property to it, like this:

PUBLIC_URL=https://cdn.something.com 

Or you can set the PUBLIC_URL when building the project, in this manner:

PUBLIC_URL=https://cdn.something.com yarn build

Now when run the build and check the generated index.html inside the build folder, you will see that it has automatically updated to reference the assets from your CDN url:

<script src="https://cdn.something.com/static/js/main.00d4ef19.chunk.js"></script>

You can now host the static folder on your CDN and your assets will be loaded from there.

Hope you found this tip helpful.