Skip to main content

Introduction to Uniform Context

This tutorial will guide you through the process of building a web application that uses Uniform's classification and personalization capabilities:

  • Build a web application using your preferred front-end framework.
  • Enable personalization to be controlled by non-developers.
tip

This is a very basic web app by design. This will allow you to focus on the Uniform bits instead of getting caught up with styles, design or complicated application functionality.

The tutorial supports the following front-end frameworks. If you use one that is not listed, let us know so we know people are interested in more examples:

tip

This tutorial is similar to the Getting Started tutorial. That tutorial includes composition. This tutorial only covers classification and personalization.

Before you start

You must have the following available in order to complete this tutorial:

  • Node.js v14+ installed locally.
  • Uniform account with administrator access. If you do not already have one, you can sign up for a free account at https://uniform.app.
  • Uniform extension for Google Chrome. This is optional, but this tutorial uses it to help explain how Uniform classification and personalization work.

Finished code​

In case you prefer to learn by looking at a finished solution, we provide a finished version of the Intro to Context Tutorial application that you can get running in your preferred environment.

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 Context > Signals > Create
    Uniform Context > Signals > 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.

  10. You will see links to the web app running on the 1 port. Click the link for Port 3000.

  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/