I really left this series at a cliffhanger last post. In that post, we implemented all of the homepage components that we could without going into connected mode. It's time though. In this post, I'm going to talk about the process of going connected and mention a few small things I had to adjust to make what we've built so far work in that mode. No new components will be covered in this post but we'll explore the "Recent Posts" component, powered by GraphQL, in the next post.

So what was it like?

Well, I actually recorded myself going through the process.

via GIPHY

In all seriousness, it was a pretty good experience. There's really thorough documentation for the commands you'll need to execute the setup and deploy your JSS application to your Sitecore site.

I did experience some errors though. I would have caught these errors sooner if I had at least been deploying my site as I went along while I was building the components.

What changed

A few things, these were mostly errors on my side by disconnected mode didn't complain so I just didn't notice.

I had a component data item named "Header" as well as a component template named "Header" and they were in conflict with one another. When I deployed I received the error:

Existing item '/sitecore/content/blog/Components/Header' does not have the expected Template ID. Data updates may be ineffective and app may
not receive expected fields.
        Expected: {4C7D1C39-1F99-5DD5-91C4-FA7BDA93EBE5}
        Actual: {A87A00B1-E6DB-45AB-8B54-636FEC3B5523}

And...

The manifest item ID(s) header-content were referred to by other item(s), but they could not be resolved in Sitecore. This likely means no item(s) with these IDs are present in the manifest.

Ultimately it resulted it me just renaming "Header" to "Header Content", which it probably should have been anyway.

Property Names

I used "templateName" in a content item yml file instead of "template", it didn't give me an error but it created my content item with the "App Route" template.

Once I fixed the property name, it worked as expected.

Name Property

So we were using the "name" property to render the navigation links. Half in error, because I added a title field on the template and just wasn't using it. The name property just disappeared when I went connected, though. So you'll see all of the yml files for the pages now contain the "title" field filled in now.

Updated mapping change can be seen here.

Placeholder Settings

It's easy to forget to define your placeholder settings in disconnected mode. It doesn't seem to mind. Connected has some issues with it though, so I defined them in the placeholder.sitecore.js file.

Conclusion

It was a good experience and definitely exposed errors that I should have caught sooner. I'll be running syncs more frequently now to try to catch things sooner. It was really exciting seeing the app we've been building through these posts just work after fixing these small issues. Excited to move forward with implementing the more dynamic components.