Skip to main content

Finished code

This section describes how to configure a finished version of the tutorial to run in your preferred environment without having to follow all of the steps in the tutorial.

Before you start

You must setup a Uniform project before you can load the finished code.

  1. Add the following permissions to your Uniform API key:

    Uniform Canvas > Compositions > Create
    Uniform Canvas > Compositions > Publish
    Uniform Canvas > Compositions > Update
    caution

    You should always assign the minimal permissions required to meet your requirements. Since this you are going to load configuration from a code repository into Uniform, you need permissions to write to Uniform.

    For more details on permissions, see the administrator guide.

  2. Start a development environment:

  3. After you open StackBlitz you will see an error that the "API key was not valid". You must set the variables in .env as described in the steps.

  4. Changing the .env file should cause the container to restart. If it doesn't, reload your browser window. You will see an error that the "Slug not found". This is because the composition with the specified slug hasn't been created in your Uniform project.

  5. In StackBlitz, open a new terminal.

  6. Enter the following command:

    npm run uniform:push
  7. Close the terminal.

  8. Reload your browser window. This will cause the manifest to be downloaded before the app starts up.

  9. In the activity bar the plug icon indicates that 1 port is in use. Click this icon.

    stackblitz-ports-in-use
  10. You will see links to the web app running on the 1 port. Click the link for Port 3000.

    stackblitz-ports-in-use-2
  11. A new browser tab opens. This is your Next.js application running in develop mode.

    https://uniformdev-uniform-docs-examples-######--3000.local.webcontainer.io/