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