Fixed : Sitecore JSS error - the route does not have an explicitly specified ID

I was working on Sitecore JSS application in which I have created a route “BlogDetailsModule2” with below body

fields:

  pageTitle: My JSS Powered Blog

placeholders:

  jss-main:

  - componentName: BlogHeader

    fields:

      HeaderContent : My Sitecore JSS Powered Blog

      HeaderSubTitle :

                <a href="https://jss.sitecore.com/" class="text-light">Sitecore JSS</a> promises to be the way of the future.

  - componentName: BlogArticle

    fields:

      blogArticleList:

      - id: BlogPost-2     

I was referencing this route in my shareable item “Item2 (BlogPost-2)” as an internal link like

  blogpostInternalLink:

    href: /blogdetailsmodule2

    text: Read on              

During JSS content and dictionary deployment to Sitecore, I received below error as

Exception thrown while importing JSS app

Exception: System.InvalidOperationException

Message: The item /sitecore/content/my-first-jss-app/Content/BlogPostCollection/ContentListField/Item2 contains link field 'blogpostInternalLink' that refers to route '/blogdetailsmodule2', but the route does not have an explicitly specified ID. To be used as a link reference from another item, the /blogdetailsmodule2 route needs an explicit ID set using the 'id' property as an app-wide unique string such as 'blogdetailsmodule2', or a GUID value.

Solution:-

Open “data\routes\BlogDetailsModule2\en.yml” file and add line “id: SomeUniquePageName” at the starting of file as

id: BlogDetailsModule2

fields:

  pageTitle: My JSS Powered Blog

placeholders:

  jss-main:

Save this file.

After this change, I was successfully able to deploy my JSS application to my Sitecore instance by command “jss deploy app --includeContent --includeDictionary”.

 
Learning from this error fixed is that though page id is optional entry but always specify it in all routes yml files in Sitecore JSS application.

Speed up Sitecore JSS App creation process

To setup a new Sitecore JSS application, you must fire command “jss create <AppName> <JSFramework>”. This command download “master.zip” from github repository.

Sitecore JSS Github repository address

This downloading process is very slow on my machine which inspire me to write this blog.
 

To speed up JSS application creation process, download zip file https://github.com/Sitecore/jss/archive/master.zip which downloaded with name “jss-master.zip”. Rename it to “master.zip” and put it into “C:\inetpub\wwwroot” folder.

Open file “C:\Users\<UserName>\AppData\Roaming\npm\node_modules\@sitecore-jss\sitecore-jss-cli\dist\create\create.source.github.js”.

Comment and add below line. (In my machine, commented line number is 53.) 

//this.githubDownloadUrl = "https://github.com/" + repository + "/archive/" + branch + ".zip";

this.githubDownloadUrl = "http://localhost/" + branch + ".zip";

Save this file.

Now if you fire any “jss create <AppName> <JSFramework>” command, installation will be done very fast as instead of downloading from Github, zip file is downloaded from local machine as

Sitecore JSS localhost address

Note – If there are any major changes on JSS Github for any future release, then we have to again download and replace this master.zip file.

Start playing with JSS. 

Happy Sitecore JSS.