Setting Up Pop!_OS for Front End Development
Tags: javascript, webdev, beginners, react
Published: 2020-05-15 21:46:28

---
title: Setting Up Pop!_OS for Front End Development
published: true
description: "I've been using Pop!_OS for front end development a lot lately. Here's how I set it up"

canonical_url: https://www.jeremymorgan.com/blog/linux/pop-os-front-end/

cover_image: https://dev-to-uploads.s3.amazonaws.com/i/jl77adqhkxcl96p9bnh6.jpg
tags: javascript, webdev, beginners, react
---
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](https://www.jeremymorgan.com/blog/linux/how-to-install-linux/). 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](https://dev-to-uploads.s3.amazonaws.com/i/umblh0rgjcys7ln7u1mh.jpg)


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](https://github.com/facebook/create-react-app).

```
cd hello-world
npm start
```

![Pop!_OS Front End Development](https://dev-to-uploads.s3.amazonaws.com/i/hmdhyd3why9kjz0amap7.jpg)

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](https://dev-to-uploads.s3.amazonaws.com/i/1me66n83k998oopzzbgy.jpg)

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

![Pop!_OS Front End Development](https://dev-to-uploads.s3.amazonaws.com/i/svbiwua1t2byxaknjxlw.jpg)

And next, we'll install Postman:

![Pop!_OS Front End Development](https://dev-to-uploads.s3.amazonaws.com/i/wxat6pbppentxdw23avg.jpg)


And of course, Visual Studio Code.

![Pop!_OS Front End Development](https://dev-to-uploads.s3.amazonaws.com/i/3cbjult1vd3fpmhkwiwv.jpg)

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](https://dev-to-uploads.s3.amazonaws.com/i/e23e63fnwq6zbdg630kd.jpg)

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

![Pop!_OS Front End Development](https://dev-to-uploads.s3.amazonaws.com/i/t7stq000z6lp9qx1soqt.jpg)

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 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.git
git clone https://github.com/angular/angular.git
git 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
```

![Pop!_OS Front End Development](https://dev-to-uploads.s3.amazonaws.com/i/ox7ca8dg824us21ey560.jpg)

## 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](https://dev-to-uploads.s3.amazonaws.com/i/s0vyvf74ruonxxlfklzp.jpg)

I'll install [prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)

![Pop!_OS Front End Development](https://dev-to-uploads.s3.amazonaws.com/i/77opq6a2fsx1v4iwcrdq.jpg)

[Javascript ES6 code snippets](https://marketplace.visualstudio.com/items?itemName=xabikos.JavaScriptSnippets)

![Pop!_OS Front End Development](https://dev-to-uploads.s3.amazonaws.com/i/9d736jq7wzehswhlxvjn.jpg)

[Angular snippets by John Papa](https://marketplace.visualstudio.com/items?itemName=johnpapa.Angular2)

![Pop!_OS Front End Development](https://dev-to-uploads.s3.amazonaws.com/i/1a87hiws3f6u4zm7ta5v.jpg)


Or you can do the [Angular Extension Pack](https://marketplace.visualstudio.com/items?itemName=doggy8088.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](http://bit.ly/2k1RW5S)
- [React](http://bit.ly/PSReactFundamentals)
- [Vue](http://bit.ly/2lYwjUB)

Are you using Pop!_OS for front end development? What do you think? Having issues? **[Let me know!](http://bit.ly/JeremyCMorgan)**