--- title: "Set up your local development environment" slug: "set-up-your-local-development-environment" abstract: "Get started with SitecoreAI by setting up your local developer environment, cloning the GitHub or Azure DevOps repo, and starting the application." time: "10 minutes" --- # Set up your local development environment 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](https://doc.sitecore.com/sai/en/developers/sitecoreai/getting-started-with-sitecoreai/deploy-a-project-and-environment.html "Deploy a project and environment"), and [created a site and page](https://doc.sitecore.com/sai/en/developers/sitecoreai/getting-started-with-sitecoreai/create-a-site-and-a-page.html "Create a site and a 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](https://doc.sitecore.com/sai/en/developers/sitecoreai/using-docker-for-full-stack-development.html "Using Docker for full-stack development"); 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](https://doc.sitecore.com/api/markdown-image/sai/en/developers/sitecoreai/images/XMC_deploy_log_environment.png) 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](https://doc.sitecore.com/api/markdown-image/sai/en/developers/sitecoreai/images/XMC_deploy_dev_settings_preview.png) 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](https://doc.sitecore.com/sai/en/developers/sitecoreai/getting-started-with-sitecoreai/create-a-site-and-a-page.html "Create a site and a page"), for example, *Hello World - inbuilt component*. ## ASP.NET Core SDK To set up your local environment using the ASP.NET Core SDK: 1. 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](https://doc.sitecore.com/api/markdown-image/sai/en/developers/sitecoreai/images/XMC_deploy_log_environment.png) 2. 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](https://doc.sitecore.com/api/markdown-image/sai/en/developers/sitecoreai/images/XMC_deploy_dev_settings_preview.png) 3. 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. 4. Duplicate the `./headapps/aspnet-core-starter/appsettings.json` file and rename it to `./headapps/aspnet-core-starter/appsettings.Development.json`. 5. Back in the Deploy app, copy the environment variables from the on-screen code block, and paste them into the newly created `appsettings.Development.json` file. 6. If you're using Visual Studio Code, press F5 to build and run the solution. If you're using a command line interface, navigate to the `/headapps/aspnet-core-starter folder` and execute `dotnet restore && dotnet run`. 7. In your browser, go to `http://localhost:5001/`. You should see a blank page, which you'll use to test components you'll be adding in the next step. You now have your local development instance linked to your [SitecoreAI](https://doc.sitecore.com/sai/en/users/sitecoreai/sitecoreai.html) Environment. Next, you're going to [build your first component](https://doc.sitecore.com/sai/en/developers/sitecoreai/getting-started-with-sitecoreai/build-your-first-component.html "Build your first component").