Last Update: Jun 7, 2024

Check out my YouTube Channel!

If you’ve heard all the chatter lately about Pop!_OS and have been wanting to try it out, here’s a good guide to setting up a front end development machine.

If you’re relatively new to Linux and are just trying it out, I suggest building this in a Virtual Machine. I have the full instructions for installing Pop!_OS in a virtual machine here. This is the best way to dip your toes in without significant modifications to your computer.

Moving on, can you set up a front end development machine with Pop!_OS? Absolutely! It’s one of the easiest environments to set up and will provide speed, stability, and great looks along the way. Here’s how to do it.

Get the Basic Tools

You’ll need some basics just to get started with any developer machine. Let’s get some of the core tools installed.

Generally in these tutorials, I suggest installing Git as the first step, but Pop!_OS already has Git installed by default!

Next, install Node, and NPM

sudo apt install nodejs npm

Run the following commands to make sure it installed:

node -v
npm -v

Pop!_OS Front End Development

Perfect. Let’s install a quick react app.

npx create-react-app hello world

This will scaffold out a new React application using create-react-app.

cd hello-world
npm start

Pop!_OS Front End Development

And there’s our fancy Feact app. So now, let’s get some tooling.

Install Some Tools From the Pop! Shop

Click on the Pop! shop

Pop!_OS Front End Development

First, we’ll install Git Kracken. This is a handy visualizer for Git.

Pop!_OS Front End Development

And next, we’ll install Postman:

Pop!_OS Front End Development

And of course, Visual Studio Code.

Pop!_OS Front End Development

Notice you can select between deb and Flatpack here. Many of the software packages give you this choice in Pop!_OS.

Serve is one of those tools I’ve been using for years and years. Now, if you’re working with React, Angular, or Vue you get a web server built-in. For everything else, I use Serve.

sudo npm install -g serve

Pop!_OS Front End Development

With Serve, you run an HTTP server out of whatever folder you run it from:

Pop!_OS Front End Development

It’s pretty handy for one-off projects.

Project Folders

So here’s how I like to set up my project folders.

cd ~
mkdir libraries

Then I set up folders like this:

mkdir css
mdir javascript

CSS Folder

cd css

Here I like to clone in Bootstrap

git clone

and Tailwind

git clone

Yes, I know you can include these with NPM, but I always like to have a copy here on my hard drive I can grab to test something out, and it’s easy to make sure they’re up to date.

JavaScript Folder

In my JavaScript library, I like to keep copies of the big frameworks and any other JS stuff I may want to grab and put into a project.

cd ../javascript

Here I’ll clone in the big three:

git clone
git clone
git clone

Then, I create a projects folder. This is a place where I can create different projects and then init with Git and push them elsewhere.

cd ~
mkdir Projects

I generally make an output folder. This is essentially an artifacts (dist) folder that I can run Serve from. It’s an excellent way to pre test and see what things will look like. I just clear it out afterward.

mkdir Projects/output

Pop!_OS Front End Development

Configure VS Code

Now that Visual Studio Code is installed, I’ll add a few plugins to help us out:

Pop!_OS Front End Development

I’ll install prettier

Pop!_OS Front End Development

Javascript ES6 code snippets

Pop!_OS Front End Development

Angular snippets by John Papa

Pop!_OS Front End Development

Or you can do the Angular Extension Pack for a bunch of angular goodness.


Pop!_OS is super fun to use and works great. This is the OS I’m doing most of my front end development in these days. Once you’ve got this setup, you’re all good to go. It feels like doing development on a Mac, without needing a Mac! If you haven’t tried Pop!_OS yet, I highly recommend it.

And if you want to up your front end development chops, check out some of these awesome courses on Pluralsight:

Are you using Pop!_OS for front end development? What do you think? Having issues? Let me know!

Want to learn more about Linux? Of course you do. Check out this Linux Fundamentals course. You can sign up for a free trial here and take it today!

Published: May 11, 2020 by Jeremy Morgan. Contact me before republishing this content.