Setting Up Pop!_OS for Front End Development

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 -vnpm -v

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-worldnpm start

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

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

And next, we'll install Postman:

And of course, Visual Studio Code.

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

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

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 cssmdir javascript

CSS Folder

cd css

Here I like to clone in Bootstrap

git clone https://github.com/twbs/bootstrap.git

and Tailwind

git clone https://github.com/tailwindcss/tailwindcss.git

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 https://github.com/facebook/react.gitgit clone https://github.com/angular/angular.gitgit clone https://github.com/vuejs/vue.git

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

Configure VS Code

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

I'll install prettier

Javascript ES6 code snippets

Angular snippets by John Papa

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

Summary

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:

• Angular
• React
• Vue

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