Setup dev environment

Goals

In order to incorporate Uniform into your web application, you need a development environment. This involves the following:

• Add the web application for the tutorial to your development environment.
• Add your Uniform API key to the web application.
• Run the web application in dev mode.

Development environments

You can complete this tutorial using whatever development environment you prefer. We find that most people work best in one of the following:

• Local workstation - You do everything locally using applications installed on your developer machine.
• StackBlitz - StackBlitz gives you a complete development environment that runs entirely in your browser and requires no setup on your local machine.

Local workstation

tip

Select the tab that corresponds with your preferred front-end framework.

Next.js

1. Clone the following repository:

   Repository	https://github.com/uniformdev/uniform-docs-examples
   Branch	tree/intro-to-canvas/nextjs/no-uniform

2. Open the file .env.
3. Set the environment variables to match the values you collected during project setup.

   UNIFORM_API_KEY=<API KEY>
   UNIFORM_PROJECT_ID=<PROJECT ID>

4. Save the file.
5. Open a terminal in the root of the repository.
6. Run the following commands:

   npm install
   npm run dev

7. Open your browser to the following URL:

   http://localhost:3000

StackBlitz

tip

Select the tab that corresponds with your preferred front-end framework.

Next.js

1. Open StackBlitz to create your development environment.
2. Open the file .env.
3. Set the environment variables to match the values you collected during project setup.

   UNIFORM_API_KEY=<API KEY>
   UNIFORM_PROJECT_ID=<PROJECT ID>

4. Save the file.
5. The web application will appear on the right-hand side. If you want to open the web app in its own tab or window, click Open in New Window.