Razzle react not loading proper bundle when deployed

Question

I generated a Razzle React app using yarn create-razzle-app my-app. I've deployed it to a nodeJS Elastic Beanstalk environment after building.

After hitting the elastic beanstalk url, I see no CSS applied to the site. Running the same server locally seems to work fine, so i'm wondering if there is more that needs to be done to configure the Razzle app for SSR on elastic beanstalk?

When inspecting the bundle.[HASH].js and bundle.[HASH].css, they both look like the following:

<!doctype html>
    <html lang="">
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta charset="utf-8" />
        <title>Welcome to Razzle</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="/static/css/bundle.9638be3a.css">
        <script src="/static/js/bundle.f03ddc0c.js" defer></script>
    </head>
    <body>
        <div id="root"></div>
    </body>
</html>

This obviously causes errors, since it's not valid CSS or JS as indicated by the console output bundle.f03ddc0c.js:1 Uncaught SyntaxError: Unexpected token '<'

index

<!doctype html>
    <html lang="">
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta charset="utf-8" />
        <title>Welcome to Razzle</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="/static/css/bundle.9638be3a.css">
        <script src="/static/js/bundle.f03ddc0c.js" defer></script>
    </head>
    <body>
        <div id="root"><div class="Home"><div class="Home-header"><h2>Welcome to Razzle</h2></div></div></div>
    </body>
</html>

environment variables when building and on the Elastic Beanstalk configuration are:

NODE_ENV=production
PORT=8081

package.json

{
  "name": "my-razzle-app",
  "version": "0.1.0",
  "license": "MIT",
  "scripts": {
    "start": "razzle start",
    "build": "razzle build",
    "test": "razzle test --env=jsdom",
    "start:prod": "NODE_ENV=production PORT=8081 node build/server.js"
  },
  "dependencies": {
    "express": "^4.17.1",
    "razzle": "^3.0.0",
    "react": "^16.11.0",
    "react-dom": "^16.11.0",
    "react-router-dom": "^5.1.2"
  }
}

.ebextensions/nodecommand.config

option_settings:
  aws:elasticbeanstalk:container:nodejs:
    NodeCommand: "npm run start:prod"

@anz updated and note that i updated the node command so EB runs the start:prod script — Taylor Johnson, Oct 30 '19 at 23:10

anz · Accepted Answer · 2019-11-07T17:21:23.327

I don't have a ready-made solution that would work on Elastic Beanstalk, but I'm posting a solution for an almost identical problem that I encountered when deploying on Google App Engine.

I had to add a build script on deployment (which made my manual build process unnecessary). Previously while deploying the production build I encountered the same issue where the css/js/images just would not load.

In package.json, I added:

...
"scripts": {
    "gcp-build": "razzle build",
    "start": "razzle start",
    "build": "razzle build",
    "test": "razzle test --env=jsdom",
    "start:prod": "NODE_ENV=production PORT=8081 node build/server.js"
  },
...

"gcp-build": "razzle build" would build the production build prior to running the start on AppEngine. This way I was able to get the application as I expected with the assets. You could try if there is a way to automate the build for your platform. I am still investigating how to deploy my manual production build. I suspect it has something to do with the port number (in my case). Setting PORT to expected value didn't work for me.

If it works then you could go around what's happening under the hood, and find you fix that way.

UPDATED ANSWER:

Try this on server.js. Basically point to the right path.

// for remote deployment set to build folder, otherwise use the public folder
const publicFolder = process.env.NODE_ENV==='production' ? path.join(__dirname, '../build/public') : 'public';

const server = express()                                              // prepare server
                .disable('x-powered-by')
                .use(express.static(publicFolder));

The css/js bundle loads fine after doing this.

This would definitely work, but I don't want to build the application on the production server. I'd prefer to build it in CI and then deploy the application — Taylor Johnson, Oct 31 '19 at 02:57
Slower deployment time. If the build process were to blow up for any reason, the server its deploying to would fail. I prefer to have the dependency/test/build/deploy pipeline on in CI — Taylor Johnson, Oct 31 '19 at 03:49
Yeah makes total sense to me. I wonder if there are some webpack or some other configurations stuffs that we're missing. I was trying to deploy the bare-skin razzle app. Please do post around here if you come across anything that helps, that's be great. Good luck. — anz, Oct 31 '19 at 04:04

Razzle react not loading proper bundle when deployed

1 Answers1