How does one compile a `development` build of the frontend?

[lzy7071]

I have gotten nelify-cli to work on the circle config and removed netlify-cli as a dependency in package.json. But I am having trouble compiling a development build of the frontend. I trield:

1. setting NODE_ENV to development
2. npm install and npm run build
3. The final build still uses https://api.datanator.info rather than https://testapi.datanator.info that I was hoping for.

The exact workflow can be seen here https://github.com/KarrLab/datanator_frontend/blob/cad9d5d39b001e59d3c48d0b94154866f5084eeb/.circleci/config.yml#L273

[jonrkarr]

(a) export NODE_ENV=development only changes environment variables for the current step. This has to be repeated in each step

(b) As an alternative to export ..., environment variables can also be managed via the YAML configuration, e.g.

- run:
    name: Install package
    environment:
      NODE_ENV: development

(c) Its fine to remove netlify-cli as a dev dependency. Keeping it would be fine too. Dev dependencies can include packages needed for compilation and testing. Dev dependencies don't become part of the compiled code that users download.

(d) We should try to keep the Airbrake command:

curl -X POST -H "Content-Type: application/json" ...

This lets Airbrake now that a new version has been released so Airbrake can keep track of the version that users are using.

[lzy7071]

(a) export NODE_ENV=development only changes environment variables for the current step. This has to be repeated in each step

(b) As an alternative to export ..., environment variables can also be managed via the YAML configuration, e.g.

- run:
    name: Install package
    environment:
      NODE_ENV: development

(c) Its fine to remove netlify-cli as a dev dependency. Keeping it would be fine too. Dev dependencies can include packages needed for compilation and testing. Dev dependencies don't become part of the compiled code that users download.

(d) We should try to keep the Airbrake command:

curl -X POST -H "Content-Type: application/json" ...

This lets Airbrake now that a new version has been released so Airbrake can keep track of the version that users are using.

Thanks! Good to know about the env settings in circle config. I will give this a try. I will add Airbrake back in once the debugging of builds is finished.

[jonrkarr]

Here's the note in the CircleCI docs about environment variables

Note: Since every run step is a new shell, environment variables are not shared across steps.

[lzy7071]

There still seems to be some issue with compiling a development / test build.

In this circle test run, I printed out NODE_ENV along various steps and the development NODE_ENV did persist throughout. But the final preview link is still using https://api.datanator.info.

I tried the same config but setting NODE_ENV to test in this circle test but still the final build was using https://api.datanator.info

[lzy7071]

There still seems to be some issue with compiling a development / test build.

In this circle test run, I printed out NODE_ENV along various steps and the development NODE_ENV did persist throughout. But the final preview link is still using https://api.datanator.info.

I tried the same config but setting NODE_ENV to test in this circle test but still the final build was using https://api.datanator.info

To follow up, I think the issue of NODE_ENV being hard coded has to do with https://github.com/facebook/create-react-app/issues/790, specifically https://github.com/facebook/create-react-app/issues/790#issuecomment-281984190

[lzy7071]

Resolved in e43d1db7aa2f1b5bfc40da8fb7f1cea32d782050. See https://create-react-app.dev/docs/deployment/#customizing-environment-variables-for-arbitrary-build-environments for more information.

[jonrkarr]

Great. Thanks for figuring out that we need to use a different environment variable.

[lzy7071]

No problem. I think with the incorporation of projection functionality for FTX, there seems to be a significant performance improvement for displaying intermediate page: example