Tailwind Logo

Creating Tailwind CSS Sample site in XM Cloud - Part 1. Create New Repository

XM CloudHeadless SXA

Published: 2024-06-17

I would like to create a sample using the tips I have been introducing in my blog. This time, we will create the base of a sample that can use Tailwind CSS.

Create a repository using a template

Templates provided for XM Cloud are available in the following repositories

In the upper right corner of the above screen, there is a Use this template button, which can be clicked to select Create a new repository.

create-tailwindcss-sample-01.png

Click to create a repository with a new name. At this time, you can select Private or Public. Basically, you should choose Private. After a few moments, a repository will be created using the above template.

create-tailwindcss-sample-02.png

Allow local startup

Clone the repository you just created. In this case, we will create a development branch instead of a main branch.

To create a newer version of the Docker image to be created locally, change the default value of baseOs to lts2022 in the init.ps1 file.

PowerShell 
    [Parameter(Mandatory = $false, HelpMessage = "Specifies os version of the base image.")]
    [ValidateSet("ltsc2019", "ltsc2022")]
    [string]$baseOs = "ltsc2022"
)

Also, change the hostname to tailwindcss instead of sxastarter.

After this, start a terminal with administrator privileges and execute the following commands to initialize the system.

PowerShell 
.\init.ps1 -InitEnv -LicenseXmlPath "C:\path\to\license.xml" -AdminPassword "DesiredAdminPassword"

The above command will update the .env value and also add the required hostname, etc.

As for .env, please update the following two points

Plain Text 
COMPOSE_PROJECT_NAME=tailwindcss
NODEJS_PARENT_IMAGE=mcr.microsoft.com/windows/nanoserver:ltsc2022

This will launch your local Docker environment. Verify that it starts with the following command

Next, make some adjustments regarding certificates. Rewrite the file docker\traefik\config\dynamic\certs_config.yaml as follows

YAML 
tls:
  certificates:
    - certFile: C:\etc\traefik\certs\_wildcard.tailwindcss.localhost.pem
      keyFile: C:\etc\traefik\certs\_wildcard.tailwindcss.localhost-key.pem
    - certFile: C:\etc\traefik\certs\xmcloudcm.localhost.pem
      keyFile: C:\etc\traefik\certs\xmcloudcm.localhost-key.pem

You are now ready to go. Execute the following command

PowerShell 
.\up.ps1

A local instance of XM Cloud has been started.

Adding a new project

This time, we will create a new JSS project instead of the existing sxastarter code. The command to add a project is in the form of the following command

PowerShell 
cd src
npx create-sitecore-jss

The first step is to select a template for the project.

create-tailwindcss-sample-03.png

In this case, we will make the following selections

  • Which template would you like to create? nextjs
  • Where would you like your new app created? tailwindcss
  • Would you like to use the pre-push hook for linting check? Y
  • Which template would you like to create? tailwindcss
  • What is your Sitecore hostname (used if deployed to Sitecore)? ( default )
  • How would you like to fetch Layout and Dictionary data? GraphQL
  • How would you like to prerender your application? SSG
  • Are you building for Sitecore XM Cloud? Y
  • Would you like to include any add-on initializers? Check nextjs-sxa and nextjs-multisite

The work of adding new projects will run for a while.

create-tailwindcss-sample-04.png

The last step of this command completes the directory creation in the form of individual management by git. To avoid this, let's delete the hidden folder where the .git folder is. You can make the hidden files show up in Explorer and delete them.

create-tailwindcss-sample-05.png

The originally created sxastarter folder is no longer needed and is deleted. As a result, the directory structure changes as follows

create-tailwindcss-sample-06.png

Change path of Next.js

The default was to load sxastarter, so this time we will change it so that XM Cloud can be started using the new path. First, change the path listed in the docker-compose.override.yml file.

Dockerfile 
  rendering:
    image: ${REGISTRY}${COMPOSE_PROJECT_NAME}-rendering:${VERSION:-latest}
    build:
      context: ./docker/build/rendering
      target: ${BUILD_CONFIGURATION}
      args:
        PARENT_IMAGE: ${REGISTRY}${COMPOSE_PROJECT_NAME}-nodejs:${VERSION:-latest}
    volumes:
      - .\src\tailwindcss:C:\app

src\sxastarter to src\tailwindcss. Next, change the path listed in the xmcloud.build.json file that XM Cloud uses for deployment.

JSON 
{
    "renderingHosts": {
      "xmcloudpreview": {
        "path": "./src/tailwindcss",
        "nodeVersion": "20.14.0",
        "jssDeploymentSecret": "110F1C44A496B45478640DD36F80C18C9",
        "enabled": true,
        "type": "sxa",
        "buildCommand": "build",
        "runCommand": "next:start"
      }
    },

To make sure that the system will start up in the new path, let's delete the data already created. First, delete the data created at the last startup.

PowerShell 
cd docker
.\clean.ps1

Once again . Run \up.ps1. XM Cloud will start up in a few moments.

Operation check

Launch the Content Editor and add a Headless Site. Launch the Experience Editor using the Home page of the site you created, and you will be taken to the Edit Page screen.

create-tailwindcss-sample-07.png

We have placed the Title component and verified that the title of the top page is displayed. This completes the local verification.

Summary

This time, we have added a new Next.js project instead of the sxastarter provided in the template to make it work. The code created up to this point is available at

Related article

Tags