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.

You 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. You can do this by using the enablement code in the Developer settings tab in the Deploy app.

Before you begin

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

To set up your local environment:

  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 XM Cloud Deploy app

  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 XM Cloud Deploy

  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. Back in the Deploy app, copy the environment variables from the on-screen code block.

  5. In your project, in the /src/sxastarter folder, create a new .env.local file and paste in the variables you just copied.

  6. In your terminal, change directory (CD) to the src/sxastarter folder.

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

  8. To run the application head locally and connect it to the XM Cloud preview endpoint, run npm run start:connected.

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

You now have your local development instance linked to your XM Cloud 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,