Jenn Tesolin

A guide to setting up a Chromebook for web development

This post is based on an older Chromebook setup and is being kept mainly as a reference.

A setup guide for using a budget Chromebook for web development, including IDEs, browsers, and other tools.

Note: This post mostly focuses on web development tools and workflows. A budget machine like this is not ideal for intensive gaming, such as many Steam titles. Some applications, including video editors running under Linux, may also feel slow. It also helps to be comfortable using the command line.

Background

I originally started out looking for a tablet under $300, but I was not happy with the available development apps, keyboard options, screen sizes, and overall experience. When I found an Amazon sale on a Chromebook for $199 CAD during Boxing Day, and saw that it supported Linux, I decided to give it a try.

I figured that if it could support an IDE and browser for travel, along with some streaming services that could save content to an SD card, it would still be worth it.

The machine

The device I went with was an Acer Chromebook 311 with:

  • Display: 11.6in
  • Processor: Intel Celeron N4000
  • RAM: 4GB
  • Storage: 32GB eMMC
  • OS: ChromeOS with Linux development environment
  • Updates supported until: 2026
  • Year first manufactured: 2022
  • Amazon price (without sale): $270 Listing of the Chromebook used (note that the screen size in the listing has since changed)

This machine does not have an HDMI port, although a USB or USB-C hub or dock can help with that. The QGeeM USB-C hub worked well in my setup. If you already have a similar hub, it is worth trying.

Recommended specs and upgrades

For development, especially when effectively running two environments, the following specs would provide a better experience than the basics:

  • Storage: 64GB or higher, unless you plan to put your Linux environment on an SD card
  • If you are gaming or doing a lot of video editing, I would also suggest upgrading the RAM and/or processor

Here is an Amazon.ca listing with mostly the same specs, but with 64GB of storage instead of 32GB.

Initial setup

When you first get the machine, especially if you are new to ChromeOS, here are some good steps to start with after signing in to your Google account:

  1. Make sure all ChromeOS and Play Store updates are installed. You may need to reboot a few times.
  2. Optional: Set up a PIN instead of entering your full login information every time, though this is less secure.
  3. If you are using external storage, How to Get Android Apps to See External Storage on Chromebooks from How-To Geek is a helpful guide.
  4. Browse the Google Chrome DevTools extensions if you want browser-based tools as well.

Enabling the Linux development environment

For this section, you will need administrator access, so you may not be able to do this on a school or work device without permission.

First, follow Google’s guide for setting up Linux on your Chromebook.

Once it is successfully installed, create a backup of your environment so you can restore it later if something goes wrong.

Check out the port forwarding guide if you want to test on other devices.

Managing Linux and command-line installs

Now open your app launcher, go into the Linux folder, click Terminal, and run the commands below to update the packages in your Linux environment.

sudo apt-get update
sudo apt-get upgrade

Once everything is finished, right-click the terminal icon in the shelf and click Shut down Linux.

If you want to upgrade your Linux container to the next version, or try to fix certain install issues, use the following command:

sudo apt-get update && sudo apt-get dist-upgrade

The Linux distribution being used here is Debian, so if you are familiar with Debian packages and tooling, follow Debian-style instructions for installing software. For example, the command below installs Node.js:

sudo apt-get install nodejs -y

Here is a video demo of installing VS Code using the official Debian package.

Installing a package manager

A popular package manager is called Flatpak. It gives you access to additional applications, including GUI tools for browsing and installing software.

Here are the steps to install Flatpak:

  1. Follow the official documentation starting at step 2: ChromeOS Quick Setup
  1. If you want to use a GUI to install apps, run this command:
apt install gnome-software-plugin-flatpak

Using the package manager to find software:

  1. Alternatively, you can search flathub.org and install software through the command line. The first command below installs Visual Studio Code, while the second runs the program.
flatpak install flathub com.visualstudio.code
flatpak run com.visualstudio.code

Removing Linux

See the section Turn off Linux for details on fully removing Linux and its files.

Resources