@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

You just need to change API_URL param.

this one https://github.com/airbytehq/airbyte/blob/master/.env#L46?

yep. So if you set it to

<https://some-other-url.com/api/v1>

it will use host from url

great thanks!

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

how would we specify variables during the build phase? is there a node module/bindings we need to use?

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.

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

ah I see now. This all happens in index.ts

could this variable be passed to docker container?

Here is the doc that could help you - https://create-react-app.dev/docs/adding-custom-environment-variables/

from the doc The environment variables are embedded during the build time

yep

than @Davin Chia (Airbyte) we can’t use it as it is

That’s also not true

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

"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.

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

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

<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.

found code you refering to, nginx config

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