Runtime Config on App Router for using different URLs for build and runtime

Answered

Pyrrhuloxia posted this in #help-forum

PyrrhuloxiaOP

2024-01-12T11:48:44.000Z

As the title suggests, I need to use different configuration in build and runtime.

I have Strapi and NextJs in a Docker Compose, NextJs SSG pages (I don't what's equivalent for that in App Router) is heavily dependent on Strapi service.

So in order to get NextJs app built, I can write the service hostname of Strapi like "http://strapi:1337" in NextJs config and it builds the app perfectly. But when I open the app on browser normally it can't find the URL "http://strapi:1337" because it exist in Docker network not on my local computer. So I need to use "http://localhost:1337" to get my browser be able to reacgh Strapi service but as you can guess, "http://localhost:1337" is not available from NextJs container's localhost.

So if I use "http://localhost:1337" I can't get app built, but if I use "http://strapi:1337", I can get app built but this time, that service is unavialable on browser.

To solve this issue I'm thinking to use separate configuration for build and runtime phases.

But I couldn't find a way to define an environment variable or any configuration that differs from build and runtime.

Is anybody experienced something like this can help me ?

Answered by Ray

does this work?
const STRAPI_URL = process.env.NODE_ENV === 'production' ? 'http://strapi:1337' : 'http://localhost:1337'

View full answer

32 Replies

@Pyrrhuloxia As the title suggests, I need to use different configuration in build and runtime. I have Strapi and NextJs in a Docker Compose, NextJs SSG pages (I don't what's equivalent for that in App Router) is heavily dependent on Strapi service. So in order to get NextJs app built, I can write the service hostname of Strapi like "http://strapi:1337" in NextJs config and it builds the app perfectly. But when I open the app on browser normally it can't find the URL "http://strapi:1337" because it exist in Docker network not on my local computer. So I need to use "http://localhost:1337" to get my browser be able to reacgh Strapi service but as you can guess, "http://localhost:1337" is not available from NextJs container's localhost. So if I use "http://localhost:1337" I can't get app built, but if I use "http://strapi:1337", I can get app built but this time, that service is unavialable on browser. To solve this issue I'm thinking to use separate configuration for build and runtime phases. But I couldn't find a way to define an environment variable or any configuration that differs from build and runtime. Is anybody experienced something like this can help me ?

Ray

2024-01-12T11:52:48.000Z

does this work?
const STRAPI_URL = process.env.NODE_ENV === 'production' ? 'http://strapi:1337' : 'http://localhost:1337'

Answer

PyrrhuloxiaOP

2024-01-12T11:53:23.000Z

hey Ray, i'll try this one

PyrrhuloxiaOP

2024-01-12T12:04:58.000Z

it did work! but i don't understand the logic behind it, next build uses development env?

@Pyrrhuloxia it did work! but i don't understand the logic behind it, next build uses development env?

Ray

2024-01-12T12:05:24.000Z

next build use production

PyrrhuloxiaOP

2024-01-12T12:05:33.000Z

but it doesn't exist on next start

@Pyrrhuloxia but it doesn't exist on next start

Ray

2024-01-12T12:05:48.000Z

it doesn't work?

PyrrhuloxiaOP

2024-01-12T12:05:55.000Z

nope nope it does very well

i mean NODE_ENV doesn't exist on next start right?

Ray

2024-01-12T12:06:40.000Z

I think it does and it should be production with next start

PyrrhuloxiaOP

2024-01-12T12:07:31.000Z

but process.env.NODE_ENV if value is production then use something else if not use something else, i'm trying to see how this is differs even on a built app

@Pyrrhuloxia but process.env.NODE_ENV if value is production then use something else if not use something else, i'm trying to see how this is differs even on a built app

Ray

2024-01-12T12:08:36.000Z

wdym?

PyrrhuloxiaOP

2024-01-12T12:09:39.000Z

i mean node_env env var is exist as production in next build but what changes in next start so it differs and why node_env is not included inside the build bundle

anyway never mind, thank you so much, i was trying to fix this like 3 days

Ray

2024-01-12T12:10:41.000Z

sorry I still don't understand your question ðŸ˜µ

it should be production with next build or next start

PyrrhuloxiaOP

2024-01-12T12:16:10.000Z

got it thanks ðŸ™‚

PyrrhuloxiaOP

2024-01-12T13:38:51.000Z

can i ask a question here? how can i differentiate between client side and server side code in app router?

it was quite straightfoward in pages router