Skip to main content

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.

  1. Enter the following commands:

    git clone https://github.com/uniformdev/examples
    cd examples
    cd examples/docs/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=[!!! YOUR API KEY !!!]
    UNIFORM_PROJECT_ID=[!!! YOUR PROJECT ID !!!]

  4. Save the file.

  5. Open a terminal in the root of the repository.

  6. Run the following commands:

    cd examples/docs/intro-to-canvas/nextjs/no-uniform
    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.

  1. Open StackBlitz with Next.js.
  2. Open the file .env.
  3. Set the environment variables to match the values you collected during project setup.
    UNIFORM_API_KEY=[!!! YOUR API KEY !!!]
    UNIFORM_PROJECT_ID=[!!! YOUR 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.
Last updated on