Web Development on elementary OS 0.4.0 Loki

If you’re a web developer looking to switch to elementary OS, there is a 73% chance you are coming from Windows or Mac OS. You might be wondering how to get started with a new environment. Let me show you how.

Previously I mentioned that elementary OS is not a power users Linux; what I meant is that elementary OS doesn’t require you to be one. Under the hood, it’s every bit as capable of all the Linux goodness, without looking like it was built by cave trolls.

Out of the box, elementary OS doesn’t come with much in the way of a development tool chain. It comes with Scratch, Terminal, Ruby, Python, make, g++, c++ and all the standard fare you might expect on a Linux distro. After all, many Linux apps run on these technologies.

What is missing are applications like vim (or Sublime, or Atom), node.js, Rails, PHP, Vagrant, Docker… all of the tools a web developer might need, depending on the sort of project they are working on.

Here are some of the more common web development tools and environments. It’s always a good idea to only install what you need. Keep in mind that these instructions will mostly apply to all Ubuntu based Linux distributions.

Table of Contents:

  1. Browsers
  2. Editors
  3. The Tool Chain
  4. Package Management
  5. Workflow Tools
  6. Task Runners
  7. Frameworks
  8. Graphics
  9. Databases
  10. Summary

Browsers


Chromium

Chromium is the open source browser that is the basis of Google’s Chrome browser. It doesn’t include all the proprietary bits and codecs and updating, etc… but for web development it ought to be good enough for the vast majority of what you are doing.

To install, open up the AppCenter and search for Chromium, and click install.

appcenter-chromium


Chrome

You might be more comfortable installing the real thing just to make sure you’re getting the full Chrome experience.

First you’ll need the GDebi package installer, so open up the AppCenter and search for “gdebi”.

Next, head to the Chrome site and click the download button (this will download a .deb file. Click on the .deb and Gdebi will do the rest.


Firefox

If Firefox is your favorite development browser, it’s as easy as installing it from the AppCenter. Just look for Firefox and install.

appcenter-firefox


Editor


Scratch

As mentioned previously, elementary OS comes with Scratch, and if you read their developer docs, they tend to advocate for using it. I suspect they are implying that the elementary team uses it for development of the OS itself.

At first I thought this was unlikely, but the I opened up a JavaScript file in Scratch and started to play around with the settings.

eos-loki-scratch-features

I was pleasantly surprised at how far you can configure Scratch, extensive syntax highlighting, themes, indent style, line numbers, mini-map, etc… but then I was extra surprised with the number of plugins available that include the likes of web preview, embedded terminal, vim emulation and so much more. I could actually see myself using Scratch.

eos-loki-scratch-plugins


Vi Improved (Vim)

I use vim. I could make it as simple as sudo apt install vim, but I like some of the OS integrations (like clipboard access) that come with vim-gnome or vim-gtk. I still use them in their CLI form, but those conveniences only come with the GUI binaries. Since elementary OS already comes with the GNOME libraries we can install vim-gnome (vim-gtk is for systems without GNOME and when you don’t want to install gnome to get the GUI).

sudo apt install vim-gnome

eos-loki-vim-gnome


Atom

Since Atom seems to be the new hotness over the waning popularity of Sublime Text, I’ll cover how to install Atom, but either way the process is the same.

Assuming you’ve already installed GDebi (see Chrome section), head over to the Atom website and download the .deb. Then tap on the downloaded file and GDebi will take over. Simply click “Install Package” and let GDebi do it’s thing. Now you can open Atom from the Application Menu.

eos-loki-atom


The Tool Chain


nodejs_logo_green

Node.js

Node.js is arguably the most important tool in today’s modern web development. So many full-stack applications start with a REST service built on node.js. But even if your backend is written in something else, like PHP, Python or Ruby, chances are you are still using Node.js to make life easier for you on the front end — from dependency managers to task runners, node.js plays as big a part in developing the front end as it does the back.

Please note that I like to install the LTS versions of node.js (4.x). You can install which ever makes you comfortable. To install node.js on elementary OS 0.4.0 Loki, simply run the following command in the terminal:

curl -sL https://deb.nodesource.com/setup_4.x | sudo -E bash -
sudo apt-get install -y nodejs

rvm-logo-gerarduzzi

RVM

Ruby is already pre-installed on elementary OS Loki, but if you plan to do any significant Ruby development, you might find the need to jump versions from time to time. That’s where RVM (Ruby Version Manager) comes in. If you need multiple versions of Ruby, install RVM with:

gpg --keyserver hkp://keys.gnupg.net --recv-keys 409B6B1796C275462A1703113804BB82D39DC0E3

Then…

\curl -sSL https://get.rvm.io | bash -s stable

docker_container_engine_logo

Docker

Docker is a container solution that allows developers to wrap their software in an enclosed file system that contains all the tools and libraries needed to run it. Containers tend to be lighter than virtual machines as containers use the host operating system, while VM’s use it’s own opperating system or guest OS. Installing Docker is a little more involved that apt install so I will defer to their documents if you want to use Docker as your container of choice.


appcenter-virtualbox

VirtualBox

For web developers, Virtual Machines have grown beyond filling a need to test on other operating systems. VM’s are now a common way to develop on replicated environments, a way to sandbox tool sets to be shared across a whole team and more. If you plan to use Vagrant boxes then you need a a way to run VM’s on your machine.

VirtualBox is the standard for this sort of virtualization in the open source community. To install it, go to the AppCenter and search for VirtualBox.


vagrant-logo

Vagrant

Vagrant allows developers to create and configure lightweight, reproducible, and portable development environments. Vagrant uses virtualization (and requires VurtualBox) as opposed to the containerization that Docker uses, so that makes it more CPU intensive, but it tends to be much easier to set up.

Vagrant comes in handy for WordPress and Rails development and is the basis for developing Laravel applications. To install Vargrant, open up the terminal and run:

sudo apt install vagrant

Package Management


npm-logo

npm

Node.js will come with npm installed already, but it’s a pretty old version. To update to the latest, use this command (you might need to use sudo because we’re using the -g, or global flag):

npm install -g npm

Now with npm installed, a number of the remaining tools could be installed in single line, but I won’t assume you want them all, and cover each one individually.


webpack-logo

Webpack

Webpack is a heady dependency manager for web technologies. It’s advanced and sophisticated but can be very powerful.

npm install -g webpack

bower-logo

Bower

Before Webpack, there was Bower, still a very widely used package manger for the web. If webpack’s learning curve is too steep, Bower keeps things grounded. A lot of Yeoman generators rely on Bower, so it’s a good idea to install it if you are going to use Yeoman.

npm install -g bower

Workflow Tools


yeoman-logo

Yeoman

Yeoman is a web scaffolding tool for modern web apps. It makes spinning up new apps a breeze, regardless of whether they are as simple as HTML5, or more advanced like AngularJS, Ionic, React, WordPress, Chrome Extensions and more.

To install yeoman (sudo may be required):

npm install -g yo

To install a yeoman generator:

npm install -g generator-[genratorName]

express-js-logo

Express.js

Express is the original Node.js web server framework that has become the de facto standard and the basis for all other web servers, most of which are built on top of Express. Express is normally just included as a dependency in your application, however, it also comes with a generator that allows you to quickly scaffold applications. To install the generator:

npm install -g express-generator

Learn more about scaffolding a new application with the generator here.


api-connect_logo

API Connect / Loopback

To take things a step further than Express.js, another popular web framework tool is API Connect, formerly Loopback, from IBM. API Connect is a tool that allows you to quickly design API’s with a web UI. To install API Connect:

npm install -g apiconnect

Learn more about creating your first project here.


Task Runners


grunt-gulp-brunch

Grunt and/or Gulp and/or Brunch

Both Gulp and Grunt are JavaScript task runners. They help build web applications by performing those tasks that you don’t want to do, like wire up new dependencies, minify css files, transpile JavaScript and compile SASS. Chance are you are in one camp or the other so you may only need to install one but keep in mind that some tools sets will require one or the other. Installing both might be a good option:

npm install -g gulp-cli grunt-cli

Brunch, on the other hand, is a little more specific, making it a little simpler to configure and use. It’s intended to simply build or watch your web application, two of the more common tasks that we use gulp or grunt for.

To install brunch:

npm install -g brunch

Frameworks


ember_cli-light

Ember

The venerable Ember.js stoically plods along, taking the web app space by slow and steady awesomeness. React and Angular might get all the media attention but Ember has been in the background, stable, mature and growing stronger by the day.

Ember has a cli tool to help you develop and test your apps:

npm install -g ember-cli

angularjs_logo

Angular2

With the release of Angular2, the Angular team has tried to make it easier to spin up new applications with an ember-cli inspired command-line tool, angular-cli. If you’re getting into Angular2 applications, it’s likely worth installing this tool:

npm install -g angular-cli

rails-logo

Rails

Rails is the best known Ruby application framework around. Since Ruby is already installed on elementary OS, installing Rails is as easy as a simple gem command. My personal preference is to run my Ruby apps virtualized with Vagrant, in which case you can use railsbox, or there are plenty of tutorials on using a Docker container as well.

If you still want to install rails locally, keep in mind Ruby Version Management if you are working on an existing Rails application with specific requirements. To install Rails locally, simply run the following in the terminal:

gem install rails

laravel-logo

Laravel

Laravel is one of the more popular PHP application frameworks that comes from a “Rails” mentality of scaffolding new applications. To create Laravel applications in your own environment, you could install and maintian all of the dependencies yourself, or you could take advantage of VirtualBox, Vagrant and some tooling that Lavavel makes available in the form of Homestead.

To learn more about installing Homestead, it’s best to leave that to the Laravel documentaion found here.


Databases

Back before virtualization and containerization became an everyday tool for developers, we’d have all have databases running free and wild on our local machines, always running, always with the default ports set and usually with the default username and password… Yeah I don’t really condone such risky behavior anymore. If you have a need for a database in your development, and aren’t using a container or virtualization, I can’t help you here. You are on your own.


Graphics

As a developer I actually spend very little time in the design space. But there are times when I need some bitmap manipulation or vector tweaking.

If you have a long history using Adobe products, this switch might require a little more patience. The open source tools are adequate but certainly not clones of what Adobe has to offer. I personally have not been a user of the Adobe suite of tools since Adobe CS 2, so the open source tools are familiar to me.


Gimp

Gimp is quite a remarkable bitmap editor and has really good online documentation. There are plenty of YouTube tutorials that show tips and tricks and I am always amazed at what is possible with this unassuming application.

To install Gimp, open up the AppCenter and search for “gimp”.

appcenter-gimp


InkScape

Inkscape is a vector graphics editor that can be used to create or edit vector graphics such as illustrations, diagrams, line arts, charts, logos and complex paintings. Inkscape’s primary vector graphics format is Scalable Vector Graphics (SVG), however many other formats can be imported and exported.

To install Inkscape, open up the AppCenter and search for “inkscape”.

appcenter-inkscape


Summary

Hopefully this is enough to get you started in your journey to make elementary OS your full-stack web development environment of choice. If you are closer to the design side of things you might find yourself struggling with the open-source graphics tools, but otherwise you should find that everything else just works better on Linux.

 

Adam Merrifield

 

3 thoughts on “Web Development on elementary OS 0.4.0 Loki

  1. Hi,
    Thanks for writing such a well thought, well presented and detailed article on Elementary OS. I am not a web developer, yet, I find this immensely helpful.

  2. I loved this article, I’m a fledgling developer, and a designer as well. I too have not touched Adobe since CS2 was around(and not legitimately I might add),Before I came to Linux(Ubuntu and Fedora, now Ubuntu and eOS Freya), I discovered GIMP, and I was blown away at what free and legal could offer. Inkscape really seals the deal though. I’m pretty intrigued by Sketch, and all of the integrations it offers, but I’m not giving up Linux for anything. Constantly there’s this little voice in my head telling my to buy a Macbook Pro, but it would mean leaving living in Linux behind, and I just can’t do it. Thank you though for this resource, it’s been clipped and archived.

Leave a Reply