Get started with the CSK

This tutorial covers the essential topics for developers using Uniform. The Uniform Component Starter Kit (CSK) is used as the starting point for building a web application with Uniform.

Learn more the Component Starter Kit.

Goals

  1. Create a new Uniform project using the Uniform Component Starter Kit.
  2. Install and configure the Uniform Theme Pack.
  3. Understand the purpose of the global template.

To install the component starter kit, you'll need a Uniform account. If you don't already have one, you can request an account.

  1. Open a terminal, and navigate to where you want your local project to be created.

  2. Run this in terminal or command line:

    npx @uniformdev/cli@latest new
  3. Enter the following values when prompted. You may be asked for permission to install packages:

    PromptResponse
    Can we open a browser window to get a Uniform auth token?Y
    Paste your Uniform auth token. [hidden][Copy the value in the browser window opened in the previous step. Paste in the value from your clipboard.]
    Hey [username]! Choose a Uniform team for your new project[Select appropriate team name]
    Choose your preferred framework (Use arrow keys)[Choose Next.js]
    Choose one of the Uniform starters (for Next.js) (Use arrow keys)Component Starter Kit
    What's your project name?[Give a descriptive name for your project]

    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.
  4. Start your local application and open your browser to http://localhost:3000 to access the front-end.

  1. In Uniform, open your project.

  2. Navigate to Integrations.

  3. Add the integration Theme Pack.

  4. From the list of themes, select the theme you want to apply to your project.

    theme-pack-settings
    The "Uniform" theme is selected.
  5. Click Save.

  6. Go to Experience > Components, and find the Main Header pattern. This pattern is based off of the Header component. This pattern manages your header and footer content, such as the logo and navigation links. You can also manage the main font that will be used with the theme.

    main-header-pattern
    Editing the main header pattern.
  7. To apply theme changes, press Publish (even if the pattern itself isn't changed). You must re-publish the "Main Header" pattern after every time you change the theme on the integration settings page.

  1. Open the project map.
  2. Click the node Home to open the composition in Canvas.
    home-composition-in-project-map
    The project map content tree of the default Component Starter Kit install.
  3. The Home page is built from a set of components included into the starter kit.
    home-composition-canvas
    The configuration options of the Component Starter Kit.