https://linen.dev logo
#dev-frontend
Title
# dev-frontend
d

Davin Chia (Airbyte)

07/21/2021, 10:08 AM
@Artem Astapenko today the webapp sends api request to host it originates from, how easy/difficult would it be to configure it to send request to a separate host? For cloud, we are thinking of serving the webapp on one api and serving the api on another
a

Artem Astapenko

07/21/2021, 10:10 AM
You just need to change API_URL param.
d

Davin Chia (Airbyte)

07/21/2021, 10:14 AM
a

Artem Astapenko

07/21/2021, 10:15 AM
yep. So if you set it to
<https://some-other-url.com/api/v1>
it will use host from url
d

Davin Chia (Airbyte)

07/21/2021, 10:15 AM
great thanks!
fyi @Pavlo Palamarchuk @Andriy Kopachevskyy
👍 1
if we set this and if we figure out another way to set the env var, we should be able to remove nginx right?
a

Artem Astapenko

07/21/2021, 10:25 AM
Well nginx is used here just to allow replacing config variables without rebuilding the webapp and thats the only 1 reasons why we are using it. For cloud version there is already no need to use it, as we don’t need to change variables on the fly and could specify them on build phase, however in oss version, we won’t webapp to pick env variables from
.env
and that’s where nginx helps us
👍 1
d

Davin Chia (Airbyte)

07/21/2021, 10:26 AM
how would we specify variables during the build phase? is there a node module/bindings we need to use?
a

Artem Astapenko

07/21/2021, 10:29 AM
just set env variable ( or put it in .env file in airbyte-webapp ). Everything starting with
REACT_APP
will be exposed to build phase. e.g.
Copy code
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
d

Davin Chia (Airbyte)

07/21/2021, 10:45 AM
ah I see now. This all happens in index.ts
a

Andriy Kopachevskyy

07/21/2021, 10:46 AM
could this variable be passed to docker container?
on startup
a

Artem Astapenko

07/21/2021, 10:47 AM
a

Andriy Kopachevskyy

07/21/2021, 10:48 AM
from the doc The environment variables are embedded during the build time
a

Artem Astapenko

07/21/2021, 10:49 AM
yep
a

Andriy Kopachevskyy

07/21/2021, 10:49 AM
than @Davin Chia (Airbyte) we can’t use it as it is
a

Artem Astapenko

07/21/2021, 10:49 AM
That’s also not true
We have some variables injected on the build time and some of them injected via nginx ( like in this docs section https://create-react-app.dev/docs/title-and-meta-tags#injecting-data-from-the-server-into-the-page ).
The idea is that some variables are injected in build time, however server could inject some variables too by appending them in script section before our app and that’s how it currently works. If you change variable and rerun
docker-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
a

Andriy Kopachevskyy

07/21/2021, 10:55 AM
That’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
so we need to add script on docker entrypoint to replace variable in tsx file right?
a

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.
Copy code
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.
a

Andriy Kopachevskyy

07/21/2021, 11:07 AM
I red this right after you sent it, please consider I'm not JS developer, for my this "Then, on the server, you can replace 
__SERVER_DATA__
 with a JSON of real data right before sending the response." means I need to replace placeholder in a file
a

Artem Astapenko

07/21/2021, 11:13 AM
First of all it depends on what you are trying to achieve - if you are going to get rid of nginx - then you are correct that env variables are build specific and they won’t be changed on container restart. So some other way of injecting
Copy code
<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.
a

Andriy Kopachevskyy

07/21/2021, 11:14 AM
found code you refering to, nginx config
now it's clear thanks
👍 1
d

Davin Chia (Airbyte)

07/21/2021, 11:16 AM
neither am I a JS dev so this has been helpful 🙂 my takeaway is injecting the api host via the env file should unblock us for now. Does that sound right Andriy? for future work, we can still use the .env file to inject variables. Looking at the Nginx variables, none of them will change from version to version in Cloud except for the AIRBYTE_VERSION, so we can actually hardcode. There are so cloud only UI bits so how we want to handle that I think depends on whether we merge everything into OSS Airbyte, or keep it separated
5 Views