How to share constants between client and server in Express, React, Webpack, SSR app

Question

How do I share common constants between the client and the server when doing a universal, server side rendered Javascript web app?

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

Answer 1

With Webpack's DefinePlugin

new webpack.DefinePlugin({
    PRODUCTION: JSON.stringify(true),
    VERSION: JSON.stringify("5fa3b9"),
})

Note that this plugin will inject these values into the page literally. Meaning if you do something like this:

new webpack.DefinePlugin({ FOO: "BAR" });

Then Webpack will literally insert:

var FOO = BAR;

Which will error, because the bar string BAR looks like a variable that doesn't exist. That's why the example shows most things wrapped in JSON.stringify, which returns quoted values, so inserting

new webpack.DefinePlugin({ FOO: JSON.stringify("BAR") });

Will correctly insert:

var FOO = "BAR";

Yes, this is terrible design. Webpack's API is a minefield.

How to share constants between client and server in Express, React, Webpack, SSR app

Sign up