Davin Chia (Airbyte)
Artem Astapenko
07/21/2021, 10:10 AMDavin Chia (Airbyte)
Artem Astapenko
07/21/2021, 10:15 AM<https://some-other-url.com/api/v1>
it will use host from urlDavin Chia (Airbyte)
Artem Astapenko
07/21/2021, 10:25 AM.env
and that’s where nginx helps usDavin Chia (Airbyte)
Artem Astapenko
07/21/2021, 10:29 AMREACT_APP
will be exposed to build phase.
e.g.
apiUrl:
window.API_URL ||
process.env.REACT_APP_API_URL ||
`${window.location.protocol}//${window.location.hostname}:8001/api/v1/`,
API_URL here is one that could be picked on the fly as it is injected y nginx. REACT_APP_API_URL is one that could be set as REACT_APP_API_URL="some_url" npm run build
Davin Chia (Airbyte)
Andriy Kopachevskyy
07/21/2021, 10:46 AMArtem Astapenko
07/21/2021, 10:47 AMAndriy Kopachevskyy
07/21/2021, 10:48 AMArtem Astapenko
07/21/2021, 10:49 AMAndriy Kopachevskyy
07/21/2021, 10:49 AMArtem Astapenko
07/21/2021, 10:49 AMdocker-compose up
it will pick new one without rebuilding.
Though not all env variables are replaceable, and if we want to control all of them - we may need some additional changes in config/index.tsx
Andriy Kopachevskyy
07/21/2021, 10:55 AMThat’s also not true“use it as it is” means do nothing just pass variable to existing webapp docker container, so I respectfully disagree with your statement
Artem Astapenko
07/21/2021, 11:01 AM"use it as it is" means do nothing just pass variable to existing webapp docker container
exactly! You could just change env variable and webapp will pick it. If you open the project and check how it works, you will notice that its exactly how it is working. Please read links I have sent above and what I wrote in this thread and you may understand how it is working.
window.TRACKING_STRATEGY = "$TRACKING_STRATEGY";
window.PAPERCUPS_STORYTIME = "$PAPERCUPS_STORYTIME";
window.FULLSTORY = "$FULLSTORY";
window.AIRBYTE_VERSION = "$AIRBYTE_VERSION";
window.API_URL = "$API_URL";
window.IS_DEMO = "$IS_DEMO";
All of these 6 env variables are not build time specific. Again, you could read this section https://create-react-app.dev/docs/title-and-meta-tags#injecting-data-from-the-server-into-the-page and you do not need to replace anything in tsx files.Andriy Kopachevskyy
07/21/2021, 11:07 AM__SERVER_DATA__
 with a JSON of real data right before sending the response." means I need to replace placeholder in a fileArtem Astapenko
07/21/2021, 11:13 AM<script>
window.TRACKING_STRATEGY = "$TRACKING_STRATEGY";
window.PAPERCUPS_STORYTIME = "$PAPERCUPS_STORYTIME";
window.FULLSTORY = "$FULLSTORY";
window.AIRBYTE_VERSION = "$AIRBYTE_VERSION";
window.API_URL = "$API_URL";
window.IS_DEMO = "$IS_DEMO";
</script>
is required as we do not have server rendering.
To sum it up, we have 2 ways of injecting variables:
• in build time via airbyte-webapp/.env ( or any other env variable ). They will be injected and used as part of bundle
• in run time with the help of nginx. nginx will pick variables from env and include script I sent above. So on restart it will be ale to change env variables without rebuild.
Not sure how else I could describe it to you. If you still have some questions - probably clarifying your needs could help me to describe you possible solutions.Andriy Kopachevskyy
07/21/2021, 11:14 AMDavin Chia (Airbyte)