XM Cloud - Override .env In Docker

Summary

We were using Next.js for our headless application and basing our solution off of the headless sxa starter repository that Sitecore has provided here (opens in a new tab).

We had a development workflow that allowed front end developers to spin up their headless application, outside of Docker, pointing to our DEV XM Cloud environment. Sitecore developers utilized the full Sitecore XM Cloud local Docker environment.

This meant that each team needed different values for the following environment variables in their .env in their headless application:

1. SITECORE_API_KEY
2. SITECORE_API_HOST
3. GRAPH_QL_ENDPOINT

We quickly realized that any time a developer committed from either team there would be conflicts on the .env file and we needed a way to manage that without creating unexecary overhead or confusion.

The Solution

The solution was to set the values of the headless app's .env variables to the DEV XM Cloud environment settings by default. And leverage the docker-compose.override.yml so that if you are using Docker, different values for those variables would be set.

Front end developers leveraged the xmcloud-foundation-head-dev/src/sxastarter/.env file with base settings set and Sitecore developers leveraged the xmcloud-foundation-head-dev/.env file along with the docker-compose.override.yml to override any needed variables for their local Docker environment.

Conclusion

This solution worked well for us and allowed many settings to be set this way. It allowed us a smooth development workflow across teams without anyone stepping on top of each other or adding additional complexity.