Realtime CSS/Scss Edition with Meteor Avoiding Server Restart

Realtime css / scss edition with meteor avoiding server restart

Here is what you need (it looks fastidious but do not be afraid, it worth it):

Setup your project to externalise .css files

• Meteor compiles all the .css files into one monolithic one, most of the css editors are not expecting this behaviour. For the development phase, I do recommend to use the traditional approach of including the stylesheet to the html page itself. to do so:
  
  • Create a public folder in the root of your meteor project: meteorProject/public
  • Add a css file into this folder: meteorProject/public/style.css
  • Import the stylesheet in your main html code <link rel="stylesheet" type="text/css" href="/style.css" />

What you did ? You created a public repository accessible through the path localhost:3000/ then you added the stylesheet style.css to this repository, that one became available through the relative path /style.css. By using this technique, meteor will not compile neither include by itself the stylesheet to your project, you just load it manually in the regular way using the link tag. Now it is time to configure an editor.

• Now that the styles are imported the way they were 10 year ago, you can use compatible tools which will override the style to allow live editing. A simple one but only for css is the well known Espresso (formerly CSSEdit), open the page and override the styles… but that one is currently not supporting .scss files.

Editing .scss files in realtime with meteor:

• To achieve this, you will need to use Sublime Text 2 or 3 as the editor, you can get it here: http://www.sublimetext.com/3 it is not free but there is no feature nor time restriction. So if you continue using it, just buy it to support the developers team.
• You will need the awesome tool to allow the live edition which is takana, get it here: https://github.com/mechio/takana

That takana is freaking awesome! the concept is the following: Once installed and ran it will create a server interacting with the sublimetext editor, then you are requested to add a js snippet to your code so that the browser will get connected with the takana server and reload the .css or .scss files in realtime without having to reboot meteor.
To setup the meteor project with takana just do the following:

• open the terminal
• sudo npm install -g takana (enter your password if requested)
• start takana in another terminal by providing it the absolute path of the meteorProject/public folder created above is might look something like: takana /Users/aUser/meteorProject/public
• Add to your main html page the js snippet <script type="text/javascript" src="http://localhost:48626/takana.js"></script>

You are all set, now to use it

• Start your meteor project in a second terminal. command meteor from the right path…
• Open any browser to your meteor page i.e. probably http://localhost:3000
• Open sublimetext, try editing your style.css file, the css changes are automatically displayed on the browser page without saving anything.
• This is also working with .scss file. Just rename the style.css to style.css.scss and edit it within sublime text. Here the magic happen, you are editing a scss file with live result on a meteor application without having to reload anything.

Once you are satisfied with the result you can either compile the .scss to a .css file and add it the regular way to the project, or use the meteor .scss package which will do this for you at each restart. Note: Don't forget to remove the js and style snippet one to your code once in production.

Last but not least: you can open the project in several browsers and see them be refreshed in live while you edit the file in SublimeText, also it worked fine with Safari, FF but for some reasons I had to use "Google Chrome Canary" instead of "Chrome". Please comment if you made it work on other browsers such as IE, Opera or even if it worked with the regular "Chrome" on your computer.

Change URL with pushState. Meteor reloads old page

OK, I figured it out. The whole route was triggered again (so reloading the page) because I called a reactive function in onAfterAction. pushState is fine. Meteor also. Duh. :)

Meteor crashes on server start with promise_server.js error

Wow. Okay, I found the problem. It's this comma that should be a semicolon in an scss file.
See the red circle below. This innocuous typo causes the above error.

HTML components developement. Light-weight, fast solution with browser auto-reload

Try out gulp for compiling your sass with BrowserSync. Gives a lot of customization in how you compile, when to compile, etc.

HTML components developement. Light-weight, fast solution with browser auto-reload

Try out gulp for compiling your sass with BrowserSync. Gives a lot of customization in how you compile, when to compile, etc.

Does Meteor need either Gulp or Grunt?

Need is probably not the right word. Whether you want it or not is a different story.

As the comments mentioned above, Meteor include a very clever build system of its own called isobuild, which builds your WHOLE application for you. But there are certainly instances where you may want your own tasks which would best be accomplished through grunt or gulp. (The range of tasks you can accomplish with these is staggering, so I'm only going to list a couple simple common examples.)

The most obvious is going to be for assets you want to put in your public folder. But this is far from an exhaustive list of tasks that you may want to automate on a larger project.

• Compile SASS files not using the libsass compiler (because it doesn't support all the features)
• Compress and optimize images, svg files, favicons, etc.
• Create multiple sizes / versions of images
• Create Sprite Sheets
• Concatenate and minify scripts in your own order / manner
• Combine with Bower to manage front end packages that aren't available through atmosphere etc.

The way I would approach it is by putting all of this into the private folder, so its avoided by the meteor isobuild build system.

I believe these are enough reasons to not consider Gulp or Grunt redundant, and the range of tasks possible with grunt or gulp are so varied they can't all be listed here. Needless to say IsoBuild is fantastic for what it does, but would not replace everything possible with these task runners, and to my knowledge there are no plans to incorporate Gulp into IsoBuild. IsoBuild is core to what Meteor is, gulp and grunt are very powerful automation tools with thousands of possible uses.

Heres a really great starter for gulp, its super simple to get started with: NodeJitsu Gulp tutorial

So, sure, you don't need grunt or gulp, but they could certainly have a productive place in your meteor project and they're definitely worthwhile tools to get to grips with to streamline your dev processes.

If you would like to use either grunt or gulp, this is how I approach structure my project:

Project-folder
    |__ webapp  // my meteor app lives here
    |__ assets  // scss / images / svgs
    |__ node_modules
    | gruntfile.js
    | .eslintrc
    | package.json

I then build, minify, and process my assets, with my target directories in webapp/public

Note that with full npm support coming in Meteor@1.3 this may change, though I'm unclear about whether we'll be able to mvoe this into the project yet.

---

Related Topics