Create a JSS app locally
If you want to create a JSS app locally before connecting it to your SitecoreAI instance, you can do so using the command line. This method gives you precise control over your initial app, letting you choose a framework for your app (either Angular or Next.js) and specify various other settings.
After creating an app this way, you can use it to replace the one generated automatically for your SitecoreAI instance.
Creating an app from the command line is also the quickest way to upgrade your existing app to a newer version, because you can use files from the new app to replace any older unmodified versions in your current app.
- Install Node.js. We recommend using the most recent long-term support (LTS) version.
To create a JSS app locally based on your preferred framework:
Next.js
-
In a terminal, start the initializer using your preferred package manager:
TipIf you're using
npx, you can include additional parameters to manually configure the JSS initializer. Doing so can save you time by skipping some or all of the remaining steps in this process. -
If prompted to install the
create-sitecore-jss@<latest-version>package, answery. -
Enter the folder path for your new app.
TipThis will default to
./nextjs-starter/.The simplest approach is to use the default, but if you want to use a different name you can either copy your new JSS app's files into the
./headapps/nextjs-starter/folder in your SitecoreAI app or reconfigure the XM Cloud app to use a different path. -
Specify whether to use the pre-push hook for linting check, which validates all TypeScript types and code formatting each time you push changes to your remote repository.
-
Enter a name for your app.
-
Specify your Sitecore hostname or use the default value.
-
For the data fetching strategy, select
GraphQL. -
For the rendering strategy, select
SSGorSSR, depending on your needs. -
When asked if you are building for XM Cloud, answer
y. This installs additional functionality including the XM Cloud add-on.XM Cloud is now SitecoreAISome code examples, images, and UI labels may still use XM Cloud while engineering assets are being updated.
-
When asked if you want to install other add-ons, take the following actions:
nextjs-sxa- always select this add-on, because it provides various core services and middleware for working with SitecoreAI, such as redirects, robots.txt, and sitemaps. It also provides samples components to help you quickly build your site content with Next.js.nextjs-multisite- select this add-on if you want to include a sample Next.js configuration for working with environments that have multiple sites.
When you finish making your choices, the initializer will create your app in the specified directory. You can then use the new app to replace the one in your locally cloned SitecoreAI app as needed. The default name and location used for these apps by SitecoreAI are as follows, and we recommend you use these unless you want to reconfigure the default paths yourself:
| App name | Path |
|---|---|
nextjs-starter | ./headapps/ |
Angular
-
In a terminal, start the initializer using your preferred package manager:
TipIf you're using
npx, you can include additional parameters to manually configure the JSS initializer. Doing so can save you time by skipping some or all of the remaining steps in this process. -
If prompted to install the
create-sitecore-jss@<latest-version>package, answery. -
Enter the folder path for your new app.
TipThis will default to
./angular/.The simplest approach is to use the default, but if you want to use a different name you can either copy your new JSS app's files into the
./headapps/spa-starters/angular/folder in your SitecoreAI app or reconfigure the SitecoreAI app to use a different path. -
Specify whether to use the pre-push hook for linting check, which validates all TypeScript types and code formatting each time you push changes to your remote repository.
-
When asked if you are building for XM Cloud, answer
y. This installs additional functionality including the XM Cloud Node proxy app.XM Cloud is now SitecoreAISome code examples, images, and UI labels may still use XM Cloud while engineering assets are being updated.
-
Enter a name for your app.
-
Enter the folder path for your proxy app. This will default to
./node-xmcloud-proxy/.
When you finish making your choices, the initializer will create your app in the specified directory. You can then use the new app to replace the one in your locally cloned SitecoreAI app as needed. The default names and locations used for these apps by SitecoreAI are as follows, and we recommend you use these unless you want to reconfigure the default paths yourself:
| App type | App name | Path |
|---|---|---|
| Angular | angular | ./headapps/spa-starters/ |
| Node proxy | proxy | ./headapps/spa-starters/ |