Search code examples
vue.jsgraphqlnuxt.jsapollostrapi

How do I configure my Nuxt frontend application to know the baseUrl of the backend which uses Strapi?


I have been following these two tutorials:

After reading through Strapi's documentation and scouring the web I cannot figure out how to set a baseUrl of my application on the frontend so that whatever environment I am in will return the right URL to query the backend, for example:

  • Production: https://awesomesauce.com
  • Staging: https://staging.awesomesauce.com
  • QA: https://qa.awesomesauce.com
  • Dev: http://localhost:1337

If I was in staging then this baseUrl would be set to https://staging.awesomesauce.com, and so on.

For example in these tutorials you'll see when they reference images they do so like this <img src="http://localhost:1337/img.jpg />, however in a production environment how would this ever work?

Strapi's documentation has some information about using the server.json:

As an example using this configuration with Nginx your server would respond to https://example.com:8443 instead of http://localhost:1337

I see that there is a config/environments/ directory with development, production, and staging, I am lost with how I can access something from these like strapi.currentEnvironment.baseUrl from my frontend application in an <img /> tag or elsewhere. My application is structured like this:

Application
├── frontend
├── backend

I make the queries from the frontend to the backend using Apollo.

Is there some sort of magic proxy thing going on where references to localhost:1337 are redirected to their respective environment URL?


Solution

  • Just use ENV variables in your Nuxt app and keep the values in different .env files in sync with your Strapi server settings....