In this tutorial, you will learn how to configure Cypress to work with your staging and development environments when you are using Netlify and Contentful CMS. If you are building JAMStack websites then Netlify is a great hosting option. It is simple to use and abstracts a lot of the infrastructure configuration away from you. Contentful is a great choice for a headless CMS. When building a web project it is very likely that you will want to work using different environments.
In a traditional CMS workflow, developers work in the development environment, the client tests things out, and then signs work off from the staging environment. Finally, the production environment is run from the master environment. This type of configuration will ensure the project team does not trip over each other's toes. Developers can create and build components in isolation. Content editors can also experiment with writing content in parallel without the site breaking every 10 minutes.
Within Contentful setting up an environment is simple. The process is done entirely within the UI. To make your code work with each environment, you will need to generate different web API keys to point to each environment. An example of how to generate a key in Contentful that points to a staging environment can be seen below:
Out-of-the-box, when you create an environment in Contentful it will be public-facing. Anyone with the URL will be able to view it. If you are creating new features, or, working on a new campaign then this is not ideal. These environments will need to be locked down. The focus of Contentful is on being a great headless CMS. Contentful does not deal with anything that is not CMS specific. Members, authentication, and restricting access to a site will need to be done within Netlify.
As long as you have a Netlify pro subscription, you will have the ability to restrict global access to one of these environments using the `site-wide protection' feature. See the screenshot below to find where you can enable this feature in the Netlify UI (the account in this example is free so the feature is locked):
Adding a site-wide protection password will restrict anyone from accessing the site unless they add a simple password. There are alternative ways of restricting access to a site in Netlify, however, this way is the quickest, simplest and cheapest. With the site locked down, your Cypress tests will now fail.
When the Cypress tests are run, the site will return a '402' and the tests will fail. To prevent this from occurring is simple. You can configure the tests like this:In this tutorial, you will learn how to configure Cypress to work with your staging and development environments when you are using Netlify and Contentful CMS. If you are building JAMStack websites then Netlify is a great hosting option. It is simple to use and abstracts a lot of the infrastructure configuration away from you. Contentful is a great choice for a headless CMS. When building a web project it is very likely that you will want to work using different environments.
In a traditional CMS workflow, developers work in the development environment, the client tests things out, and then signs work off from the staging environment. Finally, the production environment is run from the master environment. This type of configuration will ensure the project team does not trip over each other's toes. Developers can create and build components in isolation. Content editors can also experiment with writing content in parallel without the site breaking every 10 minutes.
Within Contentful setting up an environment is simple. The process is done entirely within the UI. To make your code work with each environment, you will need to generate different web API keys to point to each environment. An example of how to generate a key in Contentful that points to a staging environment can be seen below:
Out-of-the-box, when you create an environment in Contentful it will be public-facing. Anyone with the URL will be able to view it. If you are creating new features, or, working on a new campaign then this is not ideal. These environments will need to be locked down. The focus of Contentful is on being a great headless CMS. Contentful does not deal with anything that is not CMS specific. Members, authentication, and restricting access to a site will need to be done within Netlify.
As long as you have a Netlify pro subscription, you will have the ability to restrict global access to one of these environments using the `site-wide protection' feature. See the screenshot below to find where you can enable this feature in the Netlify UI (the account in this example is free so the feature is locked):
Adding a site-wide protection password will restrict anyone from accessing the site unless they add a simple password. There are alternative ways of restricting access to a site in Netlify, however, this way is the quickest, simplest and cheapest. With the site locked down, your Cypress tests will now fail.
When the Cypress tests are run, the site will return a '402' and the tests will fail. To prevent this from occurring is simple. You can configure the tests like this:
The code above is using the failOnStatusCode flag to prevent the test from failing as soon as it gets that first 402 status code. After configuring Cypress to not instantly fail, the request will first be re-directed to the Netlify log-in page. This is what the second line in the test above is doing. The test is telling the cypress runner to add in a password inside of the password box and then click the submit button. The code assumes you have created a cypress.json and within this file, you have added an environment variable called 'site-wide'. The value of this key should contain the password you set within Netlify. An example of how the cypress.json file should be structured is shown below:
The code in the test to read this value from the config file is using Cypress.env(). IF you have followed the instructions correctly you should now have a locked-down environment that you can still run your Cypress integration tests against. Happy coding 🤘
