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...