I've been playing around with React and Server-Side Rendering (SSR), and found a pretty good howto to set things up in this article: Upgrading a Create React App Project to SSR [without Redux].

Here are a couple of tweaks I needed to perform to get the code from the first half of that article running happily...

First, if you get a...

Using `babel-preset-react-app` requires that you specify `NODE_ENV` or `BABEL_ENV` environment variables

... error on Windows, it's pretty simple to fix. Do exactly what it's asking you to do: Type...

set NODE_ENV=development

... in your cmd window ("cmd" as in DOS; Powershell has another format) and profit.

You could also set NODE_ENV in your environment variables permanently, if you wanted, though remember to change to test or production when applicable.

There's also a complaint in the post's comments where {logo} resolves to the infamous [Object object]. Rather than following the instructions from the author in the comments, I ended up putting that into the folder my express static router accessed.

Here's the existing router code:

router.get("*", function(req, res, next) {
    console.log("static router: " + req.originalUrl);
    express.static(path.resolve(__dirname, '..', 'build'))(req,res,next);
});

No changes there. Just looking at that so you know why we're using the build folder.

Then, in that build folder, things look like this for me now:

C:\PROJECTS\REDUXLESS\BUILD
|   asset-manifest.json
|   favicon.ico
|   index.html
|   manifest.json
|   service-worker.js
|
+---images
|       logo.svg                   <<< Here 'tis!!!
|
\---static
    +---css
    |       main.cdc8ad4f.css      <<< all this "static" stuff is from
    |       main.cdc8ad4f.css.map        the` npm run build` call.
    |
    \---js
            main.d3067283.js
            main.d3067283.js.map

There may have been something else I'm forgetting. Ping me if that's the case...

Labels: noteToSelf, react, ssr