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.
- The Tool Chain
- Package Management
- Workflow Tools
- Task Runners
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.
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.
If Firefox is your favorite development browser, it’s as easy as installing it from the AppCenter. Just look for Firefox and install.
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.
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.
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
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.
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
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
\curl -sSL https://get.rvm.io | bash -s stable
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.
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 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
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 is a heady dependency manager for web technologies. It’s advanced and sophisticated but can be very powerful.
npm install -g webpack
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
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 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.
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.
Grunt and/or Gulp and/or Brunch ⯅
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
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
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 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 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.
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.
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 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”.
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”.
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.