CODEWITHSUNDEEP
javascriptgatsbynetlifynetlify-cms
Undistraction
Undistraction

Reputation: 43401

Setting Up A Staging Workflow With Netlify CMS

I have a Gatsby site on Gitlab deployed to Netlify and using Netlify-CMS. Netlify makes it possible to push the site to different branches and have each deployed to a separate url. For example my current site has a production branch deployed to example.netlify.com and a staging branch deployed to staging--example.netlify.com.

However the commits created when updating content with Netlify CMS are a different matter. It appears that (out of the box at least), Netlify CMS will always push changes to a the production branch defined in its config, no matter which branch is checked out or where the site is located:

From docs.

Note: no matter where you access Netlify CMS — whether running locally, in a staging environment, or in your published site — it will always fetch and commit files in your hosted repository (for example, on GitHub), on the branch you configured in your Netlify CMS config.yml file. This means that content fetched in the admin UI will match the content in the repository, which may be different from your locally running site. It also means that content saved using the admin UI will save directly to the hosted repository, even if you're running the UI locally or in staging.

From the project config (config.yml) used by Netlify CMS:

backend:
  name: git-gateway
  branch: production

So at the moment I can make changes to the fabric of the site and make them available only at staging, however there is no mechanism to make content changes and make them available only locally or only on staging.

One option I can see is to deploy a different config.yml file to each deploy (and use a separate one locally), so when using the CMS locally I'd set the branch to dev, and on staging and production I'd set the branch to staging and production respectively. Assuming the location of the content edited by Netlify-CMS is isolated, this should make it easy to promote content changes from staging to production.

Is this the best approach?

Upvotes: 4

Views: 1990

Answers (1)

Undistraction
Undistraction

Reputation: 43401

It appears that at present if you aren't using Github, which supports the Editorial Workflow, you are on your own.

It is perfectly easy to set up Netlify to deploy multiple branches of the same project, so you can easily have three separate environments easily enough. In the following discussion I will use Gatsby, but I think this problem applies to whatever static site builder you are using.

  • dev When running locally on localhost
  • staging A staging branch added to Netlify as an additional branch deploy.
  • production A production branch added to Netlify as the production branch.

If we weren't using Netlify CMS, this would be all we would need. We could develop locally and push to staging when we wanted to make changes available, then promote by merging staging into production and pushing to the production brancg when these changes are ready.

However, out of the box all these environments will be using the same config.yml, meaning all three will load from and make changes to the same branch - whichever branch you have defined as the value for branch.

What is needed is a way to isolate content changes to each environment, so that changes made in development are made to a dev branch, changes made on staging are made to a staging branch and changes made on production are made to a production branch.

This can be achieved by deploying an environment-specific config.yml to each remote environment, and defaulting to a dev branch in development. Probably the easiest way to do this is to use a pre-build step to populate the branch field your config.yml with the name of the current branch.

This is a pretty unsatisfactory solution in my opinion and is so common a usecase it should be covered by Netlify CMS out of the box. I've opened an issue here.

Upvotes: 6

Related Questions