Razzle react not loading proper bundle when deployed

Question

Razzle react not loading proper bundle when deployed

2k Views Asked by Taylor Johnson At 21 October 2024 at 01:30

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"

Original Q&A

There are 1 best solutions below

**anz** · Accepted Answer

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.

Razzle react not loading proper bundle when deployed

There are 1 best solutions below

Related Questions in JAVASCRIPT

Related Questions in REACTJS

Related Questions in SERVER-SIDE-RENDERING

Related Questions in REACT-SSR

Related Questions in RAZZLE

Trending Questions

Popular # Hahtags

Popular Questions