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."
Installing a starter overwrites any existing components or content in Uniform.
There are three starters available:
- Hello world - the most barebones starter
- JavaDrip - our latest commerce starter
- UniformConf - marketing site starter
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:
Clone the repository with the project.
git clone https://github.com/uniformdev/examples.git
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
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 !!!]Install dependencies with
npm install
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.
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:
Clone the repository with the project.
git clone https://github.com/uniformdev/commerce-starter.git
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=In the project directory, install the dependencies:
npm install
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:
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.gitGenerate 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=In the project directory, install the dependencies:
npm install
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