Set up the project for local development (using Next.js Renderer)

With Sitefinity SaaS setup, Sitefinity CMS is provided as a service and is fully managed by Progress Software. This means that code customizations can be made only through the Next.js Renderer project.  

The project’s code files can be accessed from the Repos section on the Management Portal. You can clone the repository for local development.

To set up a Next.js Renderer project on your local development environment, follow these steps:

1. Log in to your Sitefinity SaaS Management Portal.
2. Navigate to Repos » Files.
3. From the branches dropdown, select the project branch that you want to setup locally.
   For example, select main.
4. To clone the project Git repository on your local machine, click the Clone button, located in the upper right corner of the screen.
   
5. You can clone the repository using the command line or by selecting an IDE you want to clone to. For example, to clone the project in Visual Code, from the IDE dropdown, select Clone in Visual Code. Then specify your Microsoft Entra ID (formerly, Azure AD) credentials, when prompted by the Visual Code.
   

After you have cloned the repository locally, you must configure the Next.js Renderer application to connect to Sitefinity CMS. In Sitefinity SaaS, you can connect your local Renderer application only to a non-production cloud environment, which in this case is Staging.
When you connect your local Renderer application to a Sitefinity CMS application instance hosted in the cloud, you must configure the LocalValidationKey property of the Next.js Renderer application. Your local Next.js Renderer application will send the LocalValidationKey with each request. When the HTTP request reaches the cloud-hosted Next.js Renderer application, it will compare the incoming LocalValidationKey with its own RemoteValidationKey. If they match, then the setup will be successful, and you will be able to develop locally against the cloud-hosted version of application.

To configure the LocalValidationKey property of the Next.js Renderer application, perform the following:

1. In Sitefinity SaaS, navigate to your dedicated Key Vault instance.
   For more information, see Azure Key Vault. 
2. Under Secrets, find the LocalValidationKey and copy the value of the secret.
3. On your local Renderer, edit the .env.development file and add the validation key and edit the URL in the following way:
   

4. Save and close the file.
5. Install the project packages by navigating to the folder where the project is located and running the npm install command.

To run the Next.js Renderer application on the local environment, use the npm run dev command and navigate to https://localhost:5001/Sitefinity.