Set up your local development environment

Timing 10 minutes

This is part three of the getting started walkthrough series. Before you can complete the steps here, you must have created a project and environment, and created a site and page.

This topic describes how to set up your local development environment by cloning the GitHub or Azure DevOps repo to your local machine, installing its packages, and connecting your local host to the preview endpoint, allowing you to visualize your work.

This walkthrough series applies a front-end-development (FED) first approach, removing any minimum machine-specific requirements that would apply in a Docker-based development approach; though a performant machine is always recommended for a better developer experience.

Content SDK (Next.js)

To set up your local environment using the Content SDK:

  1. Make sure you have the latest Node.js LTS version installed on your machine.

  2. In the Deploy app, open the environment you created earlier. If you're still on the deployment log screen, you can use the breadcrumbs, or navigate from the Projects tab.

    The deployment log in the Deploy app

  3. On the Developer settings tab, make sure the context switcher is set to Preview.

    The preview and live context switcher in the Developer settings in Deploy

  4. Copy the command for cloning the environment repository to your local machine and run it in a terminal. When it's cloned, open the repository in a code editor.

  5. Back in the Deploy app, copy the environment variables from the on-screen code block.

  6. In the /examples/kit-nextjs-skate-park folder, create a new .env.local file and paste in the variables you just copied.

    Note

    We're using the Skate Park sample in the starter repository for this walkthrough as it contains a few components out-of-the-box. For a real project, you'll most likely start from an empty project like examples/basic-nextjs (for Next.js projects) or examples/basic-spa (for Angular projects).

  7. In your terminal, change directory (CD) to the examples/kit-nextjs-skate-park folder.

  8. To install the required packages, run npm install .

  9. To run the application head locally and connect it to the preview endpoint, run npm run dev.

  10. In your browser, go to http://localhost:3000/. You should see the text you entered when you added a component to your page, for example, Hello World - inbuilt component.

You now have your local development instance linked to your SitecoreAI Environment. Next, you're going to build your first component.

Do you have some feedback for us?

If you have suggestions for improving this article,