Setup dev environment
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
Select the tab that corresponds with your preferred front-end framework.
- Next.js
- Nuxt 3
Enter the following commands:
git clone https://github.com/uniformdev/examples
cd examples
cd examples/docs/intro-to-canvas/nextjs/no-uniformOpen the file
.env
.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 !!!]Save the file.
Open a terminal in the root of the repository.
Run the following commands:
cd examples/docs/intro-to-canvas/nextjs/no-uniform
npm install
npm run devOpen your browser to the following URL:
http://localhost:3000
Enter the following commands:
git clone https://github.com/uniformdev/examples
cd examples
cd examples/docs/intro-to-canvas/nuxtjs/no-uniformOpen the file
.env
.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 !!!]Save the file.
Open a terminal in the root of the repository.
Run the following commands:
cd examples/docs/intro-to-canvas/nuxtjs/no-uniform
npm install
npm run devOpen your browser to the following URL:
http://localhost:3000
StackBlitz
Select the tab that corresponds with your preferred front-end framework.
- Next.js
- Nuxt 3
- Open StackBlitz with Next.js.
- Open the file
.env
. - 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 !!!] - Save the file.
- 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.
- Open StackBlitz with Nuxt 3.
- Open the file
.env
. - 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 !!!] - Save the file.
- 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.