1

We currently have a shared backend and frontend for two projects. Project B is essentially just a subset of Project A. It has all the same features except for a few that we restrict.

Using the dotenv module in node I am able to restrict loading of certain routes so the backend is all handled with environment variables. However, the frontend has a different primary color scheme (Blue instead of purple) and the logo is also different.

How would I go about loading these two differences depending on the environment/deployment? I tried putting all the common css in one file and from there importing them in. I guess the main difference in the frontend is that projA is a different theme then projB. Some of the components I can hide/show with a conditional in reacts render function.

main.scss:

@import _projA.scss
@import _projB.scss

Then in my webpack config I pass an environment variable through the npm build script and exclude either _projA or projB.scss. This still loads both and i'm guessing its because the main scss file imports both.

EDIT: https://medium.com/@trekinbami/using-environment-variables-in-react-6b0a99d83cf5

user6728767
  • 1,123
  • 3
  • 15
  • 31
  • 1
    Would it be possible to add another entry point in webpack and have it compile the css into like a _custom.scss that the main one would import instead? The enviroment variable would then decide which of the _proj.sccs to include? – user6728767 Mar 26 '19 at 17:26

1 Answers1

1

Custom Environment Variables

Note: this feature is available with react-scripts@0.2.3 and higher.

These environment variables will be defined for you on process.env file and depending on your environment (npm start, npm run build, npm test) they will be rendered as needed.

One import only is required and React will handle the rest for you, create your env. files and use it like this:

@import REACT_APP_STYLE

Example of a Custom Environment Variable in .env.development.local file for npm start:

REACT_APP_STYLES = _projA.scss

More information about custom environment variables.

Angel Roma
  • 407
  • 4
  • 9
  • Wow that's pretty cool! However, I'm not quite sure how this will work for me. Right now in my package.json, I have a build script that does `node_modules/.bin/webpack; mv public ./backend` Then when I hit the route, my backend serves up the public folder which contains my frontend site. – user6728767 Mar 26 '19 at 17:42
  • I found this which is a pretty good read. https://medium.com/@trekinbami/using-environment-variables-in-react-6b0a99d83cf5 – user6728767 Mar 26 '19 at 17:44
  • I've implemented this solution a while ago beside the `env-cmd` package so I can generate a different build or a hot-reloading development environment depending on the needs, for example: `npm run build:env1 and npm run build:env2 npm run start:project1, npm run project3.` – Angel Roma Mar 26 '19 at 17:54
  • Is it possible to import the environment variable in a scss file though? Such as `@import process.env.TEST_CSS;` in main.scss – user6728767 Mar 26 '19 at 18:00
  • Pretty nice question, and it's posible according to https://facebook.github.io/create-react-app/docs/adding-a-sass-stylesheet – Angel Roma Mar 26 '19 at 18:12
  • Are you using webpack in your builds by any chance? – user6728767 Mar 26 '19 at 18:20
  • `build:dev": "env-cmd .env.dev react-scripts build && Dashboard.bat` & `build:prod": "env-cmd .env.prod react-scripts build && Dashboard.bat` I haven't modified the Webpack. – Angel Roma Mar 26 '19 at 18:21