Front-end management

Uniform enables you to use content from Sitecore to power omnichannel digital experiences without depending on Sitecore to management the front-end. But if you already a Sitecore site, you already have a front-end. You have the following options when adopting Uniform:

• Build an entirely new front-end - You are planning a new front-end and are only using content from Sitecore.
• Migrating the front-end from Sitecore - You want to retain your existing front-end, but you do not want to manage it usig Sitecore presentation details.

Build new front-end#

If you are doing a site redesign, you are creating your front-end from scratch. You do not need to worry about migrating your existing Sitecore front-end. Your focus is on creating front-end components that can access content from Sitecore items.

In addition, you may create new front-end components after you have finished migrating renderings & layouts from Sitecore and need to create new front-end components.

Create web app#

1. Open a command-line interface (CLI).
2. Enter the following commands:
   CopyCopied!Wrap
3. Create a file named .env
4. Add a file .env and define the following variables:

The file will look like the following:

Add npm packages#

In order to add Uniform functionality to your web app, you must add a number of npm packages. Some of these packages are publically available and some require an npm access token.

Enter the following commands:

Add Uniform config#

You must configure Next.js to load Uniform settings when it runs.

1. Open the file next.config.js.
2. Change the contents to the following:
   CopyCopied!Wrap

Create front-end component#

Map component name to implementation#

Each component defined in Canvas has a public ID. When you defined the component in Canvas, you specified this value.

When your web app reads composition definitions from Canvas, the composition and the components that are assigned to the composition are identified using this value.

You must provide instructions to your web app on how to map the public ID to the front-end implementation of that component. In your web app, React components provide that implementation.

Create a file lib/resolveRenderer.js:

Add Uniform to page#

In Canvas you have a composition that represents the home page and describes the layout for the page. You have a number of React components that represent the implementation of those components. Now you must configure the Next.js app to use the information from the Canvas composition in order to render the page using the React components you implemented.

Add composition component#

Replace the contents of the file pages/index.jsx with the following:

Retrieve the composition#

1. Add the following code to the top of the file pages/index.jsx:
   CopyCopied!Wrap
2. Add the following code to the file pages/index.jsx:
   CopyCopied!Wrap

Add enhancer#

When you retrieve the composition from Canvas, Sitecore item ids are included in the data. You must use an enhancer to retrieve the fields for those items.

Enable live preview#

Live preview enables you to view changes you make in Canvas almost immediately after you save them, without having to manually refresh the page.

1. Create a file lib/useLivePreviewNextStaticProps.js:
   CopyCopied!Wrap
2. Add the following code to the file pages/index.jsx:
   CopyCopied!Wrap
3. Make the following changes:
   CopyCopied!Wrap
4. Make the following changes:
   CopyCopied!Wrap
5. Make the following changes:
   CopyCopied!Wrap
6. In your .env file, add the following variable and set its value so it matches UNIFORM_PROJECT_ID:
   CopyCopied!Wrap

Start the web app#

When you run the web app, you should see the page from the default Sitecore site, but Sitecore isn't handling page rendering. Sitecore is only acting as a headless CMS.

1. In the terminal, enter the following command:
   CopyCopied!Wrap
2. Open your browser to http://localhost:3000