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’.
What is Grunt?
Another this which is really handy and integrate it in the grunt tasks you a thing called livereload. So every time you save your files the browser automatically refreshes.
Before we get started on how to add files to SharePoint a short overview of the structure of your Yeoman project.
File structure of your Yeoman project
For getting started we just need those folders right now.
Embed CSS into SharePoint
Finally, let’s get started to write the first CSS file ready to be used in SharePoint. Open the file ‘main.scss’ in the subfolder named ‘styles’. The extension of the file means that it is a SASS file. Don’t worry about that for now. SASS and SharePoint I will cover in some upcoming blog posts. To me SASS is the most powerful how you can write CSS files. Again grunt make sure that a clean css file will be served to our SharePoint.
Delete the current content in this file except the comments at the start. Instead, insert the following code in the file. This will color the background of the SharePoint s4-workspace ‘yellow’.
If you like the preview the changes just add to the ‘index.html’ file the following div container.
this is our workspace
After you saved all your files the browser should automatically refresh and shows the div element in a bright yellow.
Our CSS file can be found under the URL ‘http://localhost:9000/styles/main.css’ and is actually the url that we like to embed in our SharePoint in on-premises and Office 365.
To integrate this url the easiest way to do it is to use a new site collection based on the publishing site template. You are able to smuggle in your CSS by using the alternate CSS Url settings of the master pages.
To do so, navigate to ‘Site Settings’, ‘Edit Master Page’ and paste in ‘http://localhost:9000/styles/main.css’ and submit the settings change. If you tried this on a development environment that has SharePoint installed your website should look like this.
Now you are ready to go and make additional changes in SharePoint.
Once you are done all the customisation you will find your compiled file in a folder of your root project ‘.tmp/styles/main.css’.
The script tag to embed looks like this:
The browsers doesn’t need to be tweaked anymore. Most yeoman generators now support HTTPS out of the box. Read how to switch those settings to support https
How about remote SharePoint installations and Office 365?
Well to be honest, this is a little bit different game. While our local Yeoman is running on localhost and port 9000 via http protocol we need to use at least https to allow the things to be loaded. An easier way is to tweak the browsers a bit.
Configure Internet Explorer
If you have added the style sheet or script to Office 365 you might see a big yellow warning at the bottom of your browser.
This simply says that you have http content, coming from yeoman, embedded into and https web site which is a SharePoint on Office 365. You can now press every time this message shows up the button and allow your assets to be loaded.
Another other option is to reconfigure your Internet Explorer. Open internet options and navigate to the security tab. Make sure you have added your SharePoint address and http://localhost added to the trusted sites list.
The next thing needs to be done is to allow mixed content for trusted sites.
Configure Google Chrome
In Google Chrome it is really easy to allow the content of your Yeoman files to be loaded. You don’t need to reconfigure anything. When a web page tries to load mixed content take a look at the address bar there is a shield icon. This indicates that some scripts or css files are blocked.
When you click on this icon and select “load scripts” you enabled your browser to load all files from Yeoman. This works as long as you are in the same browser tab. If you open a new one this needs to be enabled again.
FireFox has the same security mechanism as Google Chrome but you find the shield icon on the left side. You can disable disable the protection for the current browser session. Just press disable protection for now.
After that the style sheet just loads perfectly.
As you have seen it is pretty easy to integrate a web framework such as Yeoman into SharePoint to enhance your development workflow. With some browser tricks external file can be added directly.
Like to write a small script and use REST API or JSOM. Develop it local, test run it in SharePoint directly. Once you have finished your work you can integrate it in your SharePoint App. I think this approach is one of the fastest ways to customise even a cloud service such as Office 365.