Skip to main content

Activate Uniform Context

At this point you have a simple web app running. The next step is to activate Uniform Context in the app.

tip

You can catch up with the previous steps using the following links. Be sure to set the environment variables in the file .env

  • StackBlitz - Open the code in a web container that runs entirely in your browser.
  • GitHub - Clone the repo on your own machine.

Add npm packages​

  1. Open a CLI in the root of the web application.

  2. Enter the following command:

    npm install @uniformdev/context @uniformdev/context-react
    About this command

    This adds references to the packages for React apps that need to use Context.

  3. Enter the following command:

    npm install @uniformdev/cli
    About this command

    This adds a reference to the package with the Uniform CLI, which is a tool that enables you to interact with Uniform from a command-line interface.

Update package scripts​

Edit the following file:

/package.json
{
  "name": "my-uniform-app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "npm run download:manifest && next build",
    "download:manifest": "uniform context manifest download --output ./lib/contextManifest.json",
    ...
About this command

This adds a step to the Next.js build process to download the context manifest from Uniform. This manifest includes information that tells Context how to classify visitors. Since the app doesn't make a call back to Uniform at runtime, this information is needed at build-time. All the details the app needs are provided at build-time.

Download manifest manually​

In the CLI, enter the following command:

npm run download:manifest
About this command

In order to add Context to the app, you need the context manifest. When you are running Next.js in developer mode, the build process doesn't run. That is normally when the context manifest is generated. This command generates the context manifest on demand.

Add Context to app​

Edit the following file:

/pages/_app.js
import { UniformContext } from "@uniformdev/context-react";
import { Context } from "@uniformdev/context";

import manifest from "../lib/contextManifest.json";

import "../styles/globals.css";
import "../styles/page.css";

const context = new Context({
  manifest,
  defaultConsent: true,
});

function MyApp({ Component, pageProps }) {
  return (
    <UniformContext context={context}>
      <Component {...pageProps} />
    </UniformContext>
  );
}

export default MyApp;
About these changes

This adds Context to the web app, and instructs Context to classify visitors per the settings from the manifest.

About consent

The line in the code about defaultConsent: true tells Context to assume the visitor has given consent to have their actions classified and stored locally. Normally a web app would prompt the user to give consent (and you would programically notify Context that consent was granted), but since this is a learning exercise, consent is implied.

Finished code​

The application with all of the steps to this point is available here:

  • StackBlitz - Open the code in a web container that runs entirely in your browser.
  • GitHub - Clone the repo on your own machine.
tip

Be sure to set the environment variables in the file .env