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

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

// bower:scss
// endbower
#s4-workspace{
    background-color: #FFDC00;
}

If you like the preview the changes just add to the ‘index.html’ file the following div container.

<div id="s4-workspace">
    this is our workspace
</div>

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:

<script src="http://localhost:9000/scripts/main.js"></script>

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.

Summary

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.

 

4 Comments

  1. Thanks for this. I still don’t see the benefit of using this and wonder if it’ll really speed up SharePoint development.

    Generally, I feel modifying CSS within chrome (cuz you can see the markup and everything) and updating it using SharePoint designer is the fastest. Here, you’ll have to know the IDs and classes and everything and doing it once in chrome and doing it again here would be double work. Also, please let me know how you use SCSS for faster development since I didn’t understand it. Doesn’t it take more time to write SCSS (not to mention refer to the IDs and classes again and again) if on the contrary, you can simply change some styles with the CSS live editor in chrome and copy back in designer?

    As for JS, there are chrome plugins which let you inject JavaScript to a page and you can instantly see the change as well.

    Thanks.

    Reply

    • Why SharePoint Designer or JS Injection is slower than this approach is because you always have to same things into SharePoint. This is time consuming. With this approach you have everything locally and just inject the files from a local web server. Similar to using jQuery from a CDN.
      Beside the code editor I have open on one screen I can pick the IDs and CSS classes from the browser window and add it in my code.
      The other thing is that through SASS you can create small CSS files that will be combined in really time to a single css. This also allows you to build reusable component for rich text editor styles, navigation, header and so on.
      What you basically get is your own framework that you can use and more important reuse throughout various projects.
      SASS also allows you to store color values, font families, default border sizes, … and many more in variables that can be easily changed.
      In case of JavaScript you also just simply reload the web page when you changed the code but don’t need to upload the code again.
      In web development / web design my approach is not something really new but it will be used for example in WordPress branding projects too.

      Since someone don’t invent a clever new way to do it. Working locally is always the fastest way.

      /Stefan

      Reply

  2. Hey Stefan,

    Any guidance when your JavaScript contains REST? Seems like I can’t make AJAX calls due to CORS restrictions unless you know of a better option? Any advice would be appreciated!
    Thanks!
    -Jared

    Reply

    • Hi,

      this highly depends on what browser you use and where you have the CORS Problem.
      A while back I wrote a blog post how to deal with the CORS issues. The main problem is that you embedd the source from localhost or http and this cause some security issues.
      What you should have is browser-sync or the yeoman generator switched to use https. What exact problem do you have?
      /Stefan

      Reply

Leave a Reply to Jared Matfess Cancel reply

Required fields are marked *.


This site uses Akismet to reduce spam. Learn how your comment data is processed.