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’.

What is Grunt?

Grunt is a task runner. This tool allows you to automate repeating tasks. You can do things like minify your JavaScript files, automatically compile SASS files to a CSS file. In Yeoman it it responsible for starting the web server and monitor the file system for changes and many things more.
In case of JavaScript files GruntJS automatically parse your files through a thin called jshint. JSHint is a program that flags suspicious usage in your JavaScript. Possible problems will be shown directly in the console window.
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

All files and folders needed for development are stored in a subfolder named ‘app’. In this folder you will find and index.html and contains the landing page your application or project. Cascading Style Sheet files should be stored in the folder named ‘styles’ and your JavaScript files should be stored in the folder named ‘scripts’.
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.

After you saved all your files the browser should automatically refresh and shows the div element in a bright yellow.

#s4-workspace built in Yeoman

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.

Integrate CSS file into SharePoint

Now you are ready to go and make additional changes in SharePoint.

Yeoman embeded CSS 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’.

Embed JavaScript into SharePoint

The same thing will work for JavaScript files too. They are located in the folder scripts. You can edit the ‘main.js’ file as you like and embed it using a script embedding.

JavaScript embedding into SharePoint

The script tag to embed looks like this:

To test, run the javascript embedding you can simply add an alert to this javascript file.

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.

Security Warning shown in footer of IE

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.

Reconfigure your trusted site location

Reconfigure your trusted site location

The next thing needs to be done is to allow mixed content for trusted sites.

Enable mixed content in IE

Enable mixed content in IE

After that your style sheet and JavaScript files should load perfectly without any warning. Make sure that the mixed content is just activated for the trusted site otherwise it might cause security issues.

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.

Enable loading of Yeoman files in SharePoint and Google Chrome

Enable loading of Yeoman files in SharePoint and Google Chrome

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.

Loaded files in Google Chrome

Loaded files in Google Chrome


Configure FireFox

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.

Enable content loading in FireFox

Enable content loading in FireFox

After that the style sheet just loads perfectly.

CSS loaded after disabling the browser security.

CSS loaded after disabling the browser security.


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.
If you change your CSS or JavaScript file now you will instantly see your changes in SharePoint.
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.