Been wanting to add Sass to my current project since I used it a few years ago. After going through a lot of trials and errors, I decided to write this down. Since Sass is Ruby-based and I have a NodeJS app, there are 3 steps that needed to be taken to deploy the app successfully to heroku.
Step 1: Add buildpacks to heroku and turn on the dyno
Heroku has made it easier over the years by supporting buildpacks. So, if you have access to the heroku UI, go to your app > Settings and scroll down to the “Buildpacks” section.
Once you get there, click the “Add buildpack” button. You will be presented with multiple buildpacks, but first, select Ruby because we want heroku to install Ruby first. The order of the buildpack installation matters because the latter installation is the actual web server.
Click the “Save changes” button. You will see “heroku/ruby” is added as one of the buildpacks. Click the “Add buildpack” button again to add the NodeJS buildpack.
After clicking the “Save changes” button, you will see both buildpacks appear on the section.
So, that is the configuration done through the heroku UI. If you don’t have access to the UI, you will need to install the heroku CLI. Then, run the following commands on your terminal:
$ heroku buildpacks:set heroku/nodejs
$ heroku buildpacks:add --index 1 heroku/ruby
Then, run $ heroku buildpacks to verify that you have (in the correct order):
- heroku/ruby
- heroku/nodejs
If you don’t, then just run the following to try again:
$ heroku buildpacks:clear
When you are done with adding buildpacks, go to your app > Resources on the heroku UI. Click the “Edit” icon.
Click the toggle and “Confirm” button. It’s a free dyno. By turning it on, the container is now ready to serve your app.
Step 2: Install Ruby, Bundler, and Sass to your computer
If you have a Mac, you already have Ruby. If you have a Windows machine, you will need to install Ruby using the RubyInstaller. After you are done installing, open a new terminal to test out your Ruby installation:
$ ruby -v
It should show a version of Ruby. Once you verify the installation is good, enter:
$ gem install bundler
Once it’s done, check the version of Bundler:
$ bundler -v
After that, cd into your NodeJS app, create a file called Gemfile. Add the following into the file:
When you are done, go back to your terminal and run:
$ bundle install
It will then install Sass to your project. In case you are wondering, the ruby version is declared in the Gemfile for heroku purposes.
Step 3: Add Gruntfile.js and postinstall script to package.json
Let’s add Gruntfile.js to your NodeJS project. You will use Grunt to run a task to compile the Sass files into CSS files.
(You might need to modify the path to your scss files within the Gruntfile.js. I put my scss files in the assets/sass folder.)
Then, go to your package.json to insert the following into the “scripts” block:
“postinstall”: “grunt sass:production”
Also, don’t forget to insert the following into the “dependencies” block:
“grunt”: “*”,
“grunt-cli”: “*”,
“grunt-contrib-sass”: “*”,
“grunt-contrib-watch”: “*”
When you are done, depending on whether you already have a Sass file, you could create one to test and modify the path to the Sass file within the Gruntfile.js. After that, to test everything, go back to your terminal and run:
$ npm install
Then, you will also see the css file created. Once you have verified everything is working, push all the files to GitHub and heroku:
$ git add Gemfile Gemfile.lock Gruntfile.js package.json
$ git commit -m “Added sass”
$ git push
$ git push heroku master
Hope this is helpful.
