Get started with the CSK

This tutorial covers the essential topics of getting started with CSK:

  • Create a new Uniform project using the Uniform Component Starter Kit.
  • Install and configure Design Extensions.

Prerequisites

You must have access to a Uniform team with the ability to create new projects. If you are an active customer or a partner, please get in touch with your Uniform team administrator colleague and ask for an invite.

If you are not sure or your company does not have a Uniform team, you can request a sandbox here.

  1. Clone the CSK repo:

    git clone https://github.com/uniformdev/component-starter-kit-next-approuter.git

  2. Create an empty Uniform project in your team.

  3. Setup your .env file using your Uniform project connection details (see .env.example for reference)

    UNIFORM_PROJECT_ID= UNIFORM_API_KEY= UNIFORM_PREVIEW_SECRET=hello-world

    Make sure your API key has "Developer" role to be able to push content.

  4. Run npm install to install dependencies.

  5. Run npm run init to initialize your CSK project.

    This will push all content from disk (.\content folder) and your design extensions settings (colors, fonts, borders, etc. for this default theme).

  1. Run this in terminal or command line:
    npx @uniformdev/cli@latest new
  2. Enter the following values when prompted. You may be asked for permission to install packages:
    PromptResponseDescription
    Can we open a browser window to get a Uniform auth token?YThis will open a new browser window where an access token is displayed. Copy this value into your clipboard.
    Paste your Uniform auth token [input is hidden]Paste the access token you copied into your clipboard, then press Enter.When you paste the access token, it will not be displayed in the terminal. This is a security feature.
    Hey username! Choose a Uniform team for your new project (Use arrow keys)Select the team you want your project created in.
    Choose your preferred framework (Use arrow keys)Next.js
    Choose one of the Uniform starters (for Next.js) (Use arrow keys)Component Starter Kit (Recommended)
    What's your project name?CSK Tutorial

    About this step

    This command performs a number of tasks for you:

    1. Creates a new Uniform project.
    2. Populates the Uniform project with sample content.
    3. Creates a new front-end application using your preferred framework connected to your new Uniform project.
    4. Starts the new front-end app locally.
  1. Run npm run dev to start the app.
  2. Open your browser to http://localhost:3000 to access the front-end application.
  1. In Uniform, open your project.
  2. Navigate to Settings > Integrations.
  3. Find the Design Extensions integration in the list and add it to your project.
Last modified
Next
Next.js tutorial