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.
- Create a new Uniform project using the Uniform Component Starter Kit.
- Install and configure the Uniform Theme Pack.
- Understand the purpose of the global template.
Install Component Starter Kit#
To install the component starter kit, you'll need a Uniform account. If you don't already have one, you can request an account.
Open a terminal, and navigate to where you want your local project to be created.
Run this in terminal or command line:npx @uniformdev/cli@latest new
Enter the following values when prompted. You may be asked for permission to install packages:
Prompt Response 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:
- Creates a new Uniform project.
- Populates the Uniform project with sample content.
- Creates a new front-end application using your preferred framework connected to your new Uniform project.
- Starts the new front-end app locally.
Start your local application and open your browser to http://localhost:3000 to access the front-end.
Install Theme Pack integration#
In Uniform, open your project.
Navigate to Integrations.
Add the integration Theme Pack.
From the list of themes, select the theme you want to apply to your project.The "Uniform" theme is selected.
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.Editing the main header pattern.
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
themeon the integration settings page.
Configure home composition#
- Open the project map.
- Click the node Home to open the composition in Canvas.The project map content tree of the default Component Starter Kit install.
- The Home page is built from a set of components included into the starter kit.The configuration options of the Component Starter Kit.