khrisl33t / runtime-env-cra Goto Github PK

View Code? Open in Web Editor NEW

48.0 4.0 22.0 1.1 MB

Runtime environment handler for create-react-apps

License: MIT License

JavaScript 99.76% Shell 0.24%

react runtime-environment javascript create-react-app

runtime-env-cra's People

Contributors

Stargazers

Watchers

runtime-env-cra's Issues

Using CMD[...] breaks NGINX default entrypoint

When using a CMD from the example for usage in Docker environments, the NGINX default entrypoint (/.docker-entrypoint.sh) skips running configuration scripts inside /docker-entrypoint.d

NGINX ships with three of these scripts by default (please see here: https://github.com/nginxinc/docker-nginx/tree/04226fe92cc11bed68dae464eb60fd5399daf3b1/mainline/alpine)

I was able to get arround this issue by moving the execution of runtime-env-cra into my own custom script which I put into the /docker-entrypoint.d, like so:

RUN npm i -g [email protected]
RUN echo -e '\n\
#!/bin/sh\n\
runtime-env-cra\n' >> /docker-entrypoint.d/runtime-env-cra.sh
RUN chmod 775 /docker-entrypoint.d/runtime-env-cra.sh

WORKDIR /usr/share/nginx/html

EXPOSE 80

# remove the CMD and use the one from the base NGINX image

When the container is started, the entrypoint executes scripts from the /docker-entrypoint.d (including my runtime-env-cra script) and then starts the NGINX process.

Extra spaces break variable search

First of all thank you very much for the library and the hard work you have done with it.

I was having trouble looking for variables in the .env because they had spaces in them by mistake.

Would it be possible to remove the extra spaces in the key specifically?

runtime-env-cra/lib/generateConfig.js

Line 37 in 99b01ff

const key = line.slice(0, equalSignIndex);

like key = key.trim()

If that's the case, I'd be happy to help.

Support comments in .env file

Hey @kHRISl33t thanks for the project! I was wondering if it would be possible to support comments in the .env file though? Hoping it's easy enough to filter out lines that start with # so it would allow us to document our environment variables in the code.

Thanks!

Suggestion: Add ability to merge .env file values with process.env values

Hi runtime-env-cra team,
Thank you for the tool it helps with a build-once-deploy-everywhere approach.

I would like to suggest merging .env file values with process.env.
The flow:

load the .env file
the override values from process.env

This will help to have default configs and dynamically override only few of them.

Thanks

Uncaught SyntaxError: Unexpected token '<'

Hi buddy! First, congratulations on this project.

I'm a newbie in React, frontend, etc, and I'm facing an issue that I'm not able to understand why it's happening.

Console errors

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
  ...
    <!-- Runtime environment variables -->
    <script src="%PUBLIC_URL%/runtime-env.js"></script>
  ...
  </head>

PUBLIC_URL: /portal

using runtime-env-cra in React Hello World Application not working

Step: 1 -> I created .env file in root and pasted NODE_ENV=production REACT_APP_API_URL = Jamal Ashraf Awan
Step:2 -> using env variable in p tag

--- {window.RUNTIME_CONFIG.REACT_APP_API_URL}

Step:3 -> i created file in public named runtime-env.js and add
window.RUNTIME_CONFIG = {"NODE_ENV":"development","API_URL":"https://my-awesome-api.com"};
Step:4 -> modifiy start in package.json with :
"start": "cross-env NODE_ENV=development runtime-env-cra --config-name=./public/runtime-env.js && react-scripts start",

Now if i do npm start i got an error in command promt:

[email protected] start
cross-env NODE_ENV=development runtime-env-cra --config-name=./public/runtime-env.js && react-scripts start

'cross-env' is not recognized as an internal or external command,

if i do npm start with cross-env then error is as below:

[email protected] start
NODE_ENV=development runtime-env-cra --config-name=./public/runtime-env.js && react-scripts start

'NODE_ENV' is not recognized as an internal or external command,

Please help me , I am student and i want to use this library for the problem to make it possible to access a config file or environment variable during runtime on the server.

Usage on S3 or other static file server?

I was hoping to use this tool to generate a runtime config for my SPA in a static file server environment, like S3.

I might have misunderstood, but AFAICS, there's nothing standing in the way of running this command before uploading the assets to eg. an S3 bucket

Take this pseudo code, happening on a CI/CD environment (ie. AWS CodePipeline, Travis etc.):

Build phase

Get the full source code from Github
npm run install
npm run build
add the .env.template file as part of the "artifact" (e.g. a dist directory) and deploy/upload artifact to wherever

Deploy phase

npm i -g runtime-env-cra
Download the artifact (e.g. a dist directory) from wherever
cd dist/
Rename .env.template to .env
All keys mentioned in the .env.template file must exist as environment variables in the deployment system
runtime-env-cra (thus creating/overwriting the runtime-env.js file)
Deploy to S3 (basically copying the contents of the dist directory to S3)

IMO, this workflow could be beneficial if I want to build once, deploy anywhere. My CI/CD environment could for instance build ("build phase") every commit on my main branch. Later I could manually deploy any given build to any given environment using the "deploy phase"

The downside/cons, the way I see it, is that we are modifying the artifact (contents of the dist directory) prior to deploying it. But as long as the script only creates the runtime-env.js file by reading environment variables from the system, I see no harm in it.

What are your thoughts on this? See any potential pitfalls or challenges?

It causes an issue during the build time of production.

During the creation of build for production environment, package do not allow us to read the variables from the .env files as there is a condition inside the code to get it from pocess.env if env is not development. can you guid if you still handle this case or I can raise PR for this?

Thanks

"Property does not exist on type Window in TypeScript"

I was following the steps which are mentioned in the section usage with typescript but it was not working there and throwing error "Property does not exist on type Window in TypeScript" but i found solution to this problem for future users if by chance they would face the same situation..

SOLUTION for problem "Property does not exist on type Window in TypeScript"

STEP:1 In your src directory, create a types directory that contains the following index.d.ts file: src/types/index.d.ts

export {};

declare global {
interface Window {
RUNTIME_CONFIG: {
NODE_ENV: string;
REACT_APP_API_URL: string;
};
}
}

STEP: 2 add the path to your types directory to your tsconfig.json file.

tsconfig.json

{
"compilerOptions": {
// ... rest
"typeRoots": ["./node_modules/@types", "./src/types"]
}
}
STEP: 3 Now use it, whereever you want to do it.

{window.RUNTIME_CONFIG.NODE_ENV}

Runtime environment variables which may have secrets is exposed in developer consoler

Hello Team,

This Package perfectly works and so easy to integrate the runtime variable configuration, but I noticed that all the variables are exposed in developer consoler like below screenshot. Is there a better way to handle that part because it will be security threat to show some sensitive info in developer tools.
`
window.RUNTIME_CONFIG

{REACT_APP_SUPPORT_API: 'https://test.com', REACT_APP_EVENTS_API_ENDPOINT: '/api/Events', REACT_APP_EVENT_INSIGHTS_ENDPOINT: '/api/EventInsights', REACT_APP_EVENT_LOGS_ENDPOINT: '/api/Events/EventLogs', REACT_APP_RUM_EVENTS_ENDPOINT: '/api/Events/GetRUMEvents', …}
`

Does not generate the file runtime-env.js

Hello team,

I follow the example but it generate me an issue:

after investigating I did this test:

"scripts": {
"start": "SET NODE_ENV=development runtime-env-cra --config-name=./default/runtime-env.js"

to just generate the .js file but never generate it.

Also i play around with the example and if you delete from the ts example in the public folder the file runtime-env.js I reply the error that gives me.... so in conclusion it is not generating the .js file :(

Add documentation for usage in testing

Hi! thanks again for the amazing library.

I was using it and I finded some problems to use in jest with react-testing-library.

To asegurate the app works well i'ts necesary add a property to a window object.

Object.defineProperty(window, "__RUNTIME_CONFIG__", {
    writable: true,
    value: {
      REACT_APP_URL_API: process.env.REACT_APP_URL_API,
      // all the variables that you need in your app
    },
  });

And to works well in any test I abstracted this to a function and added in before all in every test suite

//test-utils.js

export const initEnvironmentVariables = () => {
    Object.defineProperty(window, "__RUNTIME_CONFIG__", {
        writable: true,
        value: {
          REACT_APP_URL_API: process.env.REACT_APP_URL_API,
          // all the variables that you need in your app
        },
     });
}

//example.test.js
import { initEnvironmentVariables  } from "./test-utils";

describe("example", () => {
    beforeAll(()+>{
        initEnvironmentVariables();
    });
    
    //all your tests
})

Usage in Production

Really love the idea of this package - it has the potential of saving my team from multiple rebuilds for each environment.

But I'm not quite clear on how it's supposed to be used in production, and I didn't quite understand how the docker examples are relevant to the problem either.

So, it's clear we need the .env file to create the runtime-env.js file in development, and it's clear from the examples you just run runtime-env-cra --config-name=./build/runtime-env.js && react-scripts start to do so. That makes sense. What I don't get is how these environment variables work after you run react-scripts build. None of the examples showed how to actually serve the app after it's built with different/varying runtime environment variables.

As I understand it, CRA will create a build directory of all of the static files to serve for the site. In production, you serve this directory and everything works by serving /index.html. So some questions arise:

Are we supposed to run runtime-env-cra in each environment (to pull values from process.env) to re-generate the runtime-env.js file?
Are our environments now required to be node environments, have access to the developmental .env file when deployed, and do more than just static file serving?
Can we re-run runtime-env-cra while the app is already being served?
Is it possible to define other environments statically such as .env.production and generate a different runtime-env.js file accordingly when deployed to that environment?

I feel like the answer is just "yes, you need to run runtime-env-cra in every environment and you have to use a node environment", but I just wanted to confirm that this makes purely static file serving not possible.

Not setting NODE_ENV to development deactivates --env-file flag

Hey, thank you for this simple but very useful project. Any specific reason why not setting the NODE_ENV to development deactivates the --env-file flag?

Thank you for you time
Regards Simon

Unable to build a docker image if environment are not present

In my example i have this Dockerfile:

# -- BUILD --
FROM node:12.13.0-alpine as build
WORKDIR /usr/src/app
COPY package* ./
COPY . .
RUN npm install
RUN npm run build
# -- RELEASE --
FROM nginx:stable-alpine as release
COPY --from=build /usr/src/app/build /usr/share/nginx/html
# copy .env.example as .env to the release build
COPY --from=build /usr/src/app/.env.example /usr/share/nginx/html/.env
COPY --from=build /usr/src/app/nginx/default.conf /etc/nginx/conf.d/default.conf
RUN apk add --update nodejs
RUN apk add --update npm
RUN npm install -g [email protected]

WORKDIR /usr/share/nginx/html

EXPOSE 80

CMD ["/bin/sh", "-c", "runtime-env-cra && nginx -g \"daemon off;\""]

Now, when im trying to build:
docker build -t my-app:test -f Dockerfile .

i got:
Error creating /usr/src/app/build/runtime-env.js: Error: Error getting 'API_URL' from process.env