DEV Community

Cover image for Setting Up Pop!_OS for Front End Development
Jeremy Morgan
Jeremy Morgan

Posted on • Edited on • Originally published at jeremymorgan.com

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
Enter fullscreen mode Exit fullscreen mode

Run the following commands to make sure it installed:

node -v
npm -v
Enter fullscreen mode Exit fullscreen mode

Pop!_OS Front End Development

Perfect. Let's install a quick react app.

npx create-react-app hello world
Enter fullscreen mode Exit fullscreen mode

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

cd hello-world
npm start
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Then I set up folders like this:

mkdir css
mdir javascript
Enter fullscreen mode Exit fullscreen mode

CSS Folder

cd css
Enter fullscreen mode Exit fullscreen mode

Here I like to clone in Bootstrap

git clone https://github.com/twbs/bootstrap.git
Enter fullscreen mode Exit fullscreen mode

and Tailwind

git clone https://github.com/tailwindcss/tailwindcss.git
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Here I'll clone in the big three:

git clone https://github.com/facebook/react.git
git clone https://github.com/angular/angular.git
git clone https://github.com/vuejs/vue.git
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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.

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:

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

Top comments (11)

Collapse
 
fultonbrowne profile image
Fulton Browne

And just as a note this can be applied to all variants to Ubuntu and most variants of Debian. Great article :]

Collapse
 
derekedelaney profile image
Derek Delaney

Nice article! I like the idea of trying this out in a virtual machine. I always dual boot linux then give it a shot and if I don’t like it I have to go through the hassle of removing it and fixing the boot loader. Virtual Machine!! 🤦‍♂️

Collapse
 
andrecavaco profile image
andrecavaco

Good article but instead of installing node like that you should take a look into nvm!

Collapse
 
projectescape profile image
Aniket

Great Article!!
I'll just like to add that postman is pretty overkill for most front-end developers, maybe you should consider postwoman instead, as it is both lightweight and feature rich

Collapse
 
alexmenor profile image
Alex Menor

I would also suggest insomnia as an alternative to postman, much simpler imo.

Collapse
 
laurenclark profile image
Lauren Clark

Insomnia is frickin awesome. Everytime I wanna run a quick GET in Postman i just end up mashing a button. I don’t wanna make a project now dammit

Collapse
 
frontenddude profile image
Frontend Dude 👨‍💻

Great article Jeremy. Learnt a few things thanks!

Collapse
 
faqahat profile image
Faqahat Khan

I think this will apply for all or most linux distros however i always fantasized PopOS but never got to try one. I definately will!

Collapse
 
lorrehuggan profile image
Lorre Huggan

Great article especially the cloning libraries part as I have wondered what i would do if i need to create-react-app deep in the amazon rain forest.. Thank you

Collapse
 
devhammed profile image
Hammed Oyedele

Great setup and for most of my command line utilities I use Homebrew for Linux

Collapse
 
jackfiallos profile image
Jackfiallos

In my case I have Insomnia instead of Postman and also have installed Flameshot to share screenshots, everything else is pretty similar.