Integration of create-react-app into golang server in 2020
About 2 years ago I wrote an article about making friendship between create-react-app generated application and simple HTTP server written on Golang. Here is a link to it: https://medium.com/@kimrgrey/integration-of-create-react-app-into-golang-server-47074b8dcd7d. As it was mentioned in responses there new release of create-react-app made asset-manifest.json almost useless. It contained all the assets names generated by Webpack, but it was not possible to determine which ones are entry points there and should be used to construct HTML file and which ones are just chunks. As a result approach described in original article become irrelevant and not working.
For a while no fixes for this unfortunate issue were done. But in September of 2019 following PR has landed to create-react-app: https://github.com/facebook/create-react-app/pull/7721. Let’s look if we can use it?
We are going to start at the moment we finished last time. So, reminding you that source code of the working example can be found here on GitHub. Below I’ll step by step. describe what has been changed and why in comparison to latest version.
For the beginning let’s just upgrade our little app and let go modules handle dependencies for us. In order to do that I just changed couple of paths to reflect new location of the repository (it moved from my personal account to the repo which belong to my team org) and launched go mod init github.com/trickstersio/go-create-react-app (commit). We also can simplify a bit workflow by adding `Makefile` (commit).
As a result our project looks and feels much better now but still doesn’t work. If you run it at this point here is what you would see:
Well, not impressive. How can we fixed it? In order to do that we have to update our webpack integration. Specifically, we are not interested anymore in manifest file as source of the mapping between file names and paths. The only one thing we need from there is new entrypoints field.
Here is how it may look like now:
We are creating an instance of this structure when preparing our view data and passing it down to template, so it can be used there. But instead of rendering script / style tag for only one file as it has been done before now we have to add all of our entrypoints to index.html. Let’s add a few helper methods, so it’ll be easier to separate styles from scripts:
The last part of changes on server side is a template rendering update:
Take closer look to lines 8–10 in our new template. This is were we are adding our style tags from manifest file to the template. Same is happening for scripts on lines 39–41. Here is all changes done so far: commit.
Now let’s run our server again and refresh the page. What will we see now?
Much better now, isn’t it? At least it’s not just an error! But still we have a problem. It looks like our server responds with HTML instead of scripts and styles. It happens because not only manifest file has been changed, but also location of generated assets: now they live in build/static folder. Let’s fix our routing to reflect that: commit. Does it work now?
Hey! That’s something we have seen in the end of the original post, right? A problem with PUBLIC_URL. Because now we are serving folder with static assets on path /static another URL should be provided to let webpack know where files can be found after deployment: commit. Rebuild assets and restart the server. Then refresh the page to see this:
Hooray! It works again now! Hope, it’ll help you if you were looking for the same thing I originally described in my article in 2018 but found out it doesn’t work anymore in 2020. Cheers!