Article
0 comment

Configure yeoman web app generator to use HTTPS instead of HTTP

browsersync.io

As mentioned in the previous blog posts I use Yeoman and the default web app generator to get my branding for on premises and Office 365 done. While in the past I struggled to configure HTTPS I had to use a mixed content hack to add the CSS or Javascript file to Sharepoint. This hack is might not the best approach and only recommended for development environments.
The good news. The web app generator has recently integrated a tool named Browser Sync.io. This allows you to switch easily from HTTP to HTTPS by simply set one additional property. All that needs to be done is add https and set the value to true or false if you like to disable https support.

...
browserSync: {
options: {
notify: false,
background: true,
watchOptions: {
ignored: ''
},
https: true
},
...

The next time your start with grunt serve your browse will open your web application using https instead of http.
What else to know? Well, you might get an exception by your browser that the certificate is not secure. This is because the certificate is self-signed. To avoid this notification add this certificate to your trusted one and you won’t see the message again.

Browsersync.io

Beside the easy SSL/HTTPS configuration this tool has some other nice features. It allows you to sync different browser windows for testing. So when you scroll your internet explorer it automatically scrolls your Chrome, Firefox. This makes it pretty easy to cross browser test your applications. Needless to say that in can be integrated with grunt as well as gulp. Check out this short introduction on their web site.

I also check the angular yeoman generator but this one still use the old web server component.

Sad but true. This makes the previous blog post on How to use CSS and JavaScript files from Yeoman directly in SharePoint obsolete.

 

Article
4 comments

How to use CSS and JavaScript files from Yeoman directly in SharePoint

In the first blog post I explained how to set up your Yeoman development environment. You have now a local web server and you can start your web development. Now lets take a closer look how you can integrate the files on this web serve directly into SharePoint on-premises and Office 365.
Open your project and start the web serve with the command ‘grunt serve’.

[Read more]

Article
10 comments

How I develop in SharePoint and Office 365 now

In my session at the SPS Antwerp I showed the attendees how my personal branding workflow evolved over the past two years. For the demos all I needed was my web browser and Yeoman.IO.
I presented all of my stuff on the ancient looking MacOS armed with SharePoint virtual machines and in Office 365.

The reason why I switch my development workflow to yeoman was because I can do many things faster. I currently use it for all my SharePoint related branding and JavaScript development.
It works great for my for Office 365 development as for SharePoint On-premises. No more deployments during development just use it.
I use the resources out of Yeoman such as JavavScript and CSS files directly out of it. Just as we use things from a CDN such as jQuery. Before I can dig deeper on how to use it the first thing to do is to get your development environment ready.

[Read more]