A Guide for Setting Up a Chromebook for Web Development
A set-up on a budget chromebook for web development including IDE, browsers, and more.
Note: this post mostly described using web development programs. A budget machine specs does not have (a good) capability of playing intensive games (such as from steam). Some applications like video editors (on Linux) may be a bit slow. Lastly, its recommended to have command line experience.
Basically, started out looking for a tablet (under $300) but was not a fan of the development apps, keyboard, screen size and more. When I saw a sale on Amazon ($199 CAN during last Boxing Day) that had Linux capability, I figured I would give it a go. Figure if it could support an IDE and browser for travel (as well as some streaming services that can save on SD cards), it still be worth it.
At the time of writing, there are RAW recordings in the Linux section. These will be replaced with a final video at some point.
The device I went with was an Acer Chromebook 311 with:
- Display: 11.6in.
- Processor: Intel Celeron N4000
- RAM: 4GB
- Storage: 32GB eMMC Storage
- OS: Chrome OS, Linux Dev Environment
- Updates supported until: 2026
- Year first manufactured: 2022
- Amazon price (without sale): $270 Listing of Chromebook being used (note the screen is also updated to 15in.
Note, this machine does not have an HDMI port, though a USB (or USB-C) hub or dock could work for you in this area. the USB C Hub by QGeeM worked well . If you have another one used for another device, give it a try.
For development (especially when basically having 2 separate OS), the below specs would provide a better experience than just the basics:
- Storage: 64GB or higher (Unless you add your Linux Partition to an SD card)
- If your gaming or doing a lot of video editing, would also suggest a RAM and/or Processor upgrade.
Here is the Amazon.ca Listing for most of the same specs, but with 64GB of storage instead of 32. It comes to $380
When you first get the machine (especially for a first time Chrome OS user), here are some steps to start with (after your google account is connected)
- Make sure to go through all Chrome OS and all Play Store updates. You may need to reboot a few times.
- Optional: Set-up a PIN instead of using to use your login/pass all the time (though this is less secure).
- If your using external storage, How to Get Android Apps to See External Storage on Chromebooks by How To Geek has an excellent tutorial to get you set up.
- Google Chrome Dev Tool Extensions:
Enabling Linux Development Environment
For this section, you need Administrator access, so you may not be able to use with a school or work machine without permission.
First, Google's guide (section Turn on Linux) to Set up Linux on your Chromebook
Once its successfully installed, make a back-up of your environment (this way if something goes wrong, you can restore).
Check out the Port-Forwarding guide if you want to see on other devices.
Managing linux & command line instals
Now, open your apps launchpad, and in the Linux folder, click "Terminal", then run the below commands to update the files in the Linux Environment.
sudo apt-get update sudo apt-get upgrade
Once everything is finished, right click on the terminal icon in the shelf, and click "Shut down Linux".
If you want to upgrade your Linux container (to the next version), or to try to fix some install issues, use the following command:
sudo apt-get update && sudo apt-get dist-upgrade
The version of linux being used is called Debian, so if your familiar with those apps, and have specific programs or program managers, follow the debian guide/practices to install a program, such as the below command to install NodeJS:
sudo apt-get install nodejs -y
Here is a video demo of installing VS code using the official debian file.
Installing a Package Manager
A popular package manager is called "FlatPak", they have extra programs you can install, including a GUI/Graphic app to search for and install programs.
Here are the steps to install Flatpak:
- Follow the official documentation (starting at step 2): Chrome OS Quick Setup
- 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:
- Alternatively, you can search flathub.org, and install via the command line. The first command below installs Visual Studio Code, while the second one runs the program.
flatpak install flathub com.visualstudio.code flatpak run com.visualstudio.code
Check out the section "Turn Off Linux" for details to completely remove linux and its files.
- Linux Set-Up
- Official Linux install guide from Microsoft
- Flatpak: Visual Studio Code
- Flatpak: Sequeler (sql client)
- Flatpak: Kdenlive (video Editor)
- Flatpak: HandBrake
- Flatpak: Android Studio
- Flatpak: Boxy SVG (Scalable Vector Graphics editor)
- Flatpak: GitHub Desktop
- Flatpak: Image Optimizer
- Flatpak: IntelliJ IDEA Community (Java IDE)
- Flatpak: PyCharm-Community (Python IDE)
- Flatpak: NetBeans
- Flatpak: POEdit (Translation Editor)
- Flatpak: FireFox
- Flatpak: Brave (browser)
- Flatpak: Entire Dev Tool Catalog