Skip to main content

Starters

Uniform created starters to reduce the time it takes to create digital experiences. These starters contain entities that form the basis of building a Uniform-powered website. They include components, compositions for pages, and signals for personalization.

When you create a new Uniform account, a new project is created and a default starter is installed. You can install a different starter by going to integrations in Canvas, and selecting the starters tab under "Browse integrations."

Important

Installing a starter overwrites any existing components or content in Uniform.

There are three starters available:

Hello world​

This starter is Uniform's default and installs automatically when you create a new account on the dashboard. The starter ships with two components and one composition. Here is a live version of the starter.

This starter is implemented in both Next.js 13 and Nuxt 3 frameworks.

Repositories​

To connect the starter to a local project and continue development:

  1. Clone the repository with the project.

    git clone https://github.com/uniformdev/examples.git

  2. For Next.js, go into the project directory, install the dependencies, and spin up a new dev server with the commands:

    cd examples/examples/nextjs-starter

    Similarly, for Nuxt.js, use the commands:

    cd examples/examples/nuxtjs-starter

  3. Generate and add environment variables to a .env file you create in the project. The following variables are required, and you retrieve them from Uniform.app.

     UNIFORM_API_KEY=[!!! YOUR API KEY !!!]
     UNIFORM_PROJECT_ID=[!!! YOUR PROJECT ID !!!]

  4. Install dependencies with

    npm install

  5. Run the site locally with

    npm run dev

A local development server is started, usually on localhost:3000.

Next steps​

  • Experience live preview in Canvas by configuring it in Canvas Settings. If running locally, the following preview URL can be used with this starter (preview secret is set in UNIFORM_PREVIEW_SECRET environment variable):
    http://localhost:3000/api/preview?secret=hello-world
  • Deploy this app to your preferred CDN.
  • Configure webhooks to trigger re-deployment of the app when a composition publishes.
  • Try adding a new component in Component Library and place it on existing composition. Add the implementation of the new component into your codebase (see the Hero component for reference).
  • Consider adding one of the many CMS integrations Uniform supports into this project

JavaDrip​

This starter ships a modern e-commerce store, and content for the following features:

  • Personalization powered by Uniform
  • Home page
  • Product Catalog
  • Single product pages
  • Cart page

Here's a live version of the Starter.

The starter relies on a FakeCommerce integration on Uniform. FakeCommerce is a headless-commerce service for demonstration purposes, and is installed with this starter. A developer will need to set up a running local development environment for FakeCommerce following the steps in the next section.

info

Replace FakeCommerce with your own headless commerce service during ongoing development.

Repository​

We created a Next.js project with a structure and components that match this starter. Its content also powers the FakeCommerce integration.

All the product content and commerce functionality are for the demo only and implemented locally. The cart functionality uses local storage. The product and category data powering the FakeCommerce integration via Next.js API routes are in the src/data directory.

To connect the starter to a local project and continue development:

  1. Clone the repository with the project.

    git clone https://github.com/uniformdev/commerce-starter.git

  2. Generate and add environment variables to a .env file you create in the project. The following variables are required, and you retrieve them from your Uniform dashboard.

    UNIFORM_PROJECT_ID=
    UNIFORM_API_KEY=

  3. In the project directory, install the dependencies:

    npm install

  4. Spin up a new dev server with:

    npm run dev

A local development server is started, usually on localhost:3000.

Next steps​

  • Replace the FakeCommerce integration with one of our commerce integrations.
  • Implement the real cart functionality depending on the specific commerce engine API.
  • Consider adding one of the many CMS integrations Uniform supports into this project.
  • Explore the Project Map on Uniform and add new pages.

UniformConf​

This starter contains content for a simple, personalized event website for marketing purposes. The starter ships with 8 components and 4 compositions. Here is a live version of the starter. This starter is implemented in both Next.js 13 and Nuxt 3 frameworks.

Repositories​

To connect to the starter to a local project and continue development:

  1. Clone one of these repositories with the app front-end:

    # For Next.js
    git clone https://github.com/uniformdev/uniformconf.git
    # For Nuxt.js
    git clone https://github.com/uniformdev/uniformconf-nuxt.git

  2. Generate and add environment variables to a .env file you create in the project. The following variables are required, and you retrieve them from your Uniform dashboard.

    UNIFORM_API_KEY=
    UNIFORM_PROJECT_ID=

  3. In the project directory, install the dependencies:

    npm install

  4. Spin up a new dev server with:

    npm run dev

A local development server is started, usually on localhost:3000.

Next steps​

  • Experience live preview in Canvas by configuring it in Canvas Settings. If running locally, the following preview URL can be used with this starter (preview secret is set in UNIFORM_PREVIEW_SECRET environment variable):
    http://localhost:3000/api/preview?secret=uniformconf
  • Deploy this app to your preferred CDN.
  • Configure webhooks to trigger re-deployment of the app when a composition publishes.
  • Try adding a new component in Component Library and place it on existing composition. Add the implementation of the new component into your codebase (see the Hero component for reference).
  • Consider adding one of the many CMS integrations Uniform supports into this project
Last updated on