Updated NodeJS tools

Written: 3.10.2018 Updated: 10.6.2019

Today we have started to roll out NodeJS version 8, as well as new versions of related tools NPM, Yarn, Gulp, Grunt, Webpack, Browserify and Bower. We have provided NodeJS tools for our customers for years now, to help our customers have whatever development workflow they want, including the possibility to use NodeJS tools like Gulp to automatically compile assets for their website. In addition to the pre-installed tools also npm is available, so customers can also install more NodeJS packages if they want, including simply running npm install if their project has a package.json file. Some might nowadays also prefer to use Yarn instead. Updated versions of the forementioned will appear soon in both our development (Vagrant), testing and production environments.

NodeJS logo

The NodeJS version 8 is a Long Term Support (LTS) version, so we indend to stick to if for a longer time. The NodeJS ecosystems moves fast, and some tools that were hugely popular just two years ago might already be abandoned, like Bower for example. We still keep it included for backwards compatibility.

Note that currently all tools are designed for development use, not actually for serving your site. In the future we might also start offering our customers the possibility to run a NodeJS front on their site once the WordPress world becomes more standardized in how ReactJS based themes present themselves to the world. Please leave comments below if you have thoughts on this!

Take advantage of the best developer tools available for your WordPress site today with Seravo premium hosting and upkeep! 

Developer tip: automatically compile SASS on every git checkout

Did you know our environments come with a full-fledged git installation out-of-the-box for developers to enjoy? You can read all about our developers tools at seravo.com/docs.

One typical use case for git and NodeJS in concert is automatic compilation of SASS, the language for maintaining CSS. In git you can define all kinds of hooks that trigger automatically during specific git operations. Take a look at the .git/hooks/ directory and you will discover many sample files that you can modify to your needs and activate by stripping the .sample suffix.

/data/wordpress$ ls .git/hooks/*-*
.git/hooks/applypatch-msg.sample
.git/hooks/post-update.sample
.git/hooks/prepare-commit-msg.sample
.git/hooks/commit-msg.sample
.git/hooks/pre-applypatch.sample
.git/hooks/pre-push.sample
.git/hooks/post-merge.sample
.git/hooks/pre-commit.sample
.git/hooks/pre-rebase.sample

At Seravo.com we use SASS for our stylesheets, and we have the following post-merge hook:

#!/bin/bash
##
# A Git hook to compile Seravo theme Sass after git pull.
##

# Show errors
set -e;

# Source environment if doesn't exist yet
if [ -z $PS1 ]; then
  source /etc/container_environment.sh
fi

# This hook is only for non-development environments.
if [ $WP_ENV == 'production' ] || [ $WP_ENV == 'staging' ]
then
  echo "Githook: compiling Seravo theme Sass...";
  /usr/local/bin/sass --update --force /data/wordpress/htdocs/wp-content/themes/seravo/css/;
fi

When git pull is run on the server, it can look like this:

/data/wordpress$ git pull
Receiving objects: 100% (209/209), 368.85 KiB | 1.58 MiB/s, done.
objects.
From github.com:Seravo
   e3764cf..8c4f534  master               -> origin/master
 themes/seravo/css/_case.scss                     |    2 +-
 themes/seravo/css/_comments.scss                 |   30 +-
 themes/seravo/css/_footer.scss                   |    4 +-
 themes/seravo/css/_fp-blog-section.scss          |    2 +-
 themes/seravo/css/_fp-community-involvement.scss |   50 +
 themes/seravo/css/_fp-cta.scss                   |    6 +-
 themes/seravo/css/_fp-customers.scss             |    4 +-
Githook: compiling Seravo theme Sass...
      write /data/wordpress/htdocs/wp-content/themes/seravo/css/layout.css
      write /data/wordpress/htdocs/wp-content/themes/seravo/css/layout.css.map
/data/wordpress$

Feel free to use this tip and all of our other developer tools to make your work easier and more productive than ever before. Happy coding!

Leave a comment

Otto Kekäläinen

CEO

Search Seravo.com

Categories

More reading

Translating WordPress

15.8.2019

About a third of the websites in the world are currently running on WordPress. Behind the success of the platform […]

Optimize images for better loading times

23.7.2019

When browsing the internet every second counts. A single second wasted on loading a website might determine if a visitor […]

Best PHP code style for WordPress developers?

16.7.2019

Code style has always been a topic of huge debate since programming was a thing. One of the more famous […]