Transitioning from code-first to Sitecore-first

Current version: 20.x

JSS applications created based on official application samples are set up to use the code-first workflow by default. In most cases, JSS apps transition from working with disconnected data and importing that into Sitecore to treating Sitecore as the main source of data.

In the code-first workflow, Sitecore templates and content are created in JavaScript by using the Manifest API.

The Manifest API is not a complete replica of everything that can be done with Sitecore items in Sitecore. If the front-end development team has hit a roadblock in the code-first workflow, it might be time to switch to the Sitecore-first workflow.

We recommend you switch to using the Sitecore-first development when:

  • An app started its life as a code-first disconnected prototype and is transitioning to integrating with Sitecore.

  • App developers are more comfortable working in Sitecore than in JavaScript and prefer a familiar back end.

  • The import process is too limiting, and the app is transitioning to use Sitecore item serialization.

  • You want to create branch templates.

  • You want to add renderings to the layout of standard value items.

  • You want the ability to configure the Datasource Location field on components.

  • You want more control over the Layout Service response.

To transition to Sitecore-first development, you can simply avoid pushing import data to Sitecore.

However, following the decision to switch to Sitecore-first development, we recommend you remove code-first artifacts from the app to avoid clutter and prevent accidental deployment.

Working after removal

After code-first artifacts have been removed from the app, new items in Sitecore do not come from the JSS application.

From this point onward, you are most likely working in connected mode, where your app runs locally but fetches data from a Sitecore instance that is available via HTTP(S).

When you create a new front-end component:

  • You cannot see it in action when creating it unless you use tools like Storybook.

  • You must manually create the datasource template, the rendering item, and the datasource items in Sitecore.

  • You must manually add the rendering to the pages in Sitecore using Experience Editor, the Content Editor Presentation details dialog, or XM Cloud Pages.

When developing Sitecore-first, you must not run the jss deploy app -c -d command.

Do you have some feedback for us?

If you have suggestions for improving this article,