Getting Speak 3 With A Little Help From My Friends

A Better Way Of Starting A New Speak 3 Project

I began the task to start my Speak 3 application and struggled. More and more people reached out to assist me and my previous blog article was all about that help.  However then this came up and I was surprised it was so buried in Search.  Now that I have found it I am going to let all of you know.

If you are starting with Speak 3 and Angular you will want to check out this article on the Sitecore Speak Starter Template by Mihály Árvai, and the Corresponding GitHub. It will save you a ton of time. The only thing to be aware of is the build command is npm run-script build. If you forget the run-script the command will prompt you so no worries.

Special thanks to:

• Mihály Árvai for the GitHub project and writing an amazing article on Sitecore Speak Starter Template

Creating New Pages

TO DO: I am still doing this for my project but as I do it I will document it here.

Adding Components

When you are ready to add components then your next step should be to set up this Sitecore Speak UI Library project.  This article explains how to get the Sitecore Speak 3 UI Collection set up. Then you can see some components in use and copy them over to your solution as a starting point. 

You will get an error in the header.components.html file. Simply open the header.components.ts and make sure it has the isNavigationShown : boolean; as noted below. This will fix the error and then the project will run. You can then click on component pages and see how components work then use them in your project.

import { Component, OnInit } from '@angular/core';

import { SciLogoutService } from '@speak/ng-sc/logout';

@Component({

selector: 'app-header',

templateUrl: './header.component.html',

styleUrls: ['./header.component.scss']

})

export class HeaderComponent implements OnInit {

// WAS MISSING IN EXAMPLE

isNavigationShown : boolean;

constructor(

public logoutService: SciLogoutService) { }

ngOnInit() {

}

}