Override network, backend url through env variables after build

[davidyuk]

closes #1469 (VUE_APP_REMOTE_CONNECTION_BACKEND_URL would be handled separately)

I've did some research and found several approaches.

Store configuration in a separate files (would produce an extra request)

https://www.npmjs.com/package/react-inject-env
https://www.codecentric.de/wissens-hub/blog/react-application-container-environment-aware-kubernetes-deployment

Specify env value in index.html

https://github.com/axelhzf/create-react-app-docker-environment-variables
https://iendeavor.github.io/import-meta-env/ (a complete tools set, looks overcomplicated)

Build on each container run

https://github.com/mikesparr/tutorial-react-docker

Discussions

https://stackoverflow.com/questions/52103155/reading-an-environment-variable-in-react-which-was-set-by-docker
https://stackoverflow.com/questions/49975735/rendering-an-environment-variable-to-the-browser-in-a-react-js-redux-production
facebook/create-react-app#982 (comment)

This way I can override network without rebuilding container, tested with

version: '3'
services:
  frontend:
    image: aepp-base
    build:
      context: .
    ports: ["3080:80"]
    environment:
      - VUE_APP_NETWORK_NAME=balabola network!
      - VUE_APP_NODE_URL=https://example.com
      - VUE_APP_MIDDLEWARE_URL=https://example.com
      - VUE_APP_EXPLORER_URL=https://example.com
      - VUE_APP_COMPILER_URL=https://example.com
      - VUE_APP_BACKEND_URL=https://example.com

export VUE_APP_NETWORK_NAME="balabola network!"
export VUE_APP_NODE_URL=https://example.com
export VUE_APP_MIDDLEWARE_URL=https://example.com
export VUE_APP_EXPLORER_URL=https://example.com
export VUE_APP_COMPILER_URL=https://example.com
export VUE_APP_BACKEND_URL=https://example.com
npm run build

This PR is supported by the Æternity Crypto Foundation

[github-actions]

Deployed to https://pr-1510-aepp-base.stg.aepps.com

[dincho]

Have you written Perl? You really love nested ternary conditions :)

[davidyuk]

This is also because I prefer const to let. I did a webshop in Perl at university, but I didn't remember it, maybe it is unconscious 😃

[dincho]

How do I change the networks/URLs' during development outside docker ?

[davidyuk]

I would add a network manually and switch to it. Base aepp would remember it unless the state is reset. Do you need something more permanent?

We were developing Base aepp on testnet without running a local node/mdw. The last time I tried to set up mdw for e2e tests it didn't work well.
aeternity/ae_mdw#1336

[dincho]

Well, I actually tested and developed (some very small features) locally using local node/network. After all we're looking for extension point to use the wallet in custom networks.

[dincho]

what about using envsubst looks much cleaner approach to me (the article says it's already in the nginx image, didn't checked) https://ledermann.dev/blog/2018/04/27/dockerize-and-configure-javascript-single-page-application/

[davidyuk]

I'm not sure about workflow using it. Currently, I have index.html that works with and without Docker. With envsubst I need a template version of index.html to use in Docker, and without docker I would need something to remove the template part. Alternatively, I can maintain index.html and index.template.html with almost the same content 🤷‍♀️
Or do it in index.html like

<script>
window.overrideNetwork = {
  name: '$VUE_APP_NETWORK_NAME',
  url: '$VUE_APP_NODE_URL',
  middlewareUrl: '$VUE_APP_MIDDLEWARE_URL',
  explorerUrl: '$VUE_APP_EXPLORER_URL',
  compilerUrl: '$VUE_APP_COMPILER_URL',
};
if (window.overrideNetwork.name.startsWith('$')) {
  delete window.overrideNetwork;
}
</script>

?

[dincho]

That's actually not bad idea - to drop the config template if not replaced. Outside docker, well this is why I asked above how do I do it in local dev environment. There was functionality for that which you dropped (which the process environment).

[davidyuk]

Need to handle VUE_APP_REMOTE_CONNECTION_BACKEND_URL as #1512 has troubles

[davidyuk]

I've restored the ability to set network using env variables in vue cli, and added support to set backend url though env variables in docker. Switched to envsubst. It looks simpler at the end.