Joe Bailey Photography

This guide will help you use UFW (uncomplicated firewall) to block all traffic to your server other than traffic coming via Cloudflare, or for essential operations such as FTP and SSH.

Why would you want to do this?

Cloudflare will protect your site from all manner of attacks. However, your server may still be vulnerable. By closing ports down to everyone but CloudFlare, you will hopefully protect yourself further. Cloudflare offers Argo as a solution to combat this, which effectively does the same thing, blocks all traffic except Cloudflare’s. Argo costs at least $5 a month per domain. UFW is free, however, does nothing against DDOS attacks. You’ll want to make sure that the DNS Zones for websites hosted on the server we’re about to lock down are protected by Cloudflare, i.e. have the orange cloud rather than the grey one.

How can I set up UFW?

First, you’ll need to be running Debian or Ubuntu. I recommend (and use) DigitalOcean. For $100 free credit over 60 days, sign up using this link (I get $25 when you have spent $25).

UFW is usually installed by default. You can check using:

sudo ufw status

If it isn’t installed you can install it by running this command:

sudo apt-get install ufw

Before anything else, make sure you won’t lock yourself out, by opening up your SSH port:

sudo ufw allow ssh

If your SSH is not running on the default port 22, then run:

sudo ufw allow 1234/tcp

Replace 1234 with the SSH port number.

Now allow anything else that runs on your server, like FTP:

sudo ufw allow ftp

But not the web ports (80, 443) – we’re getting to that.

Cloudflare publishes the IP addresses of its servers online.

Without further ado, copy and paste the following into your terminal:

This allows all connections from <ip address>, to anything on port <port>.

sudo ufw allow from 173.245.48.0/20 to any port http
sudo ufw allow from 103.21.244.0/22 to any port http
sudo ufw allow from 103.22.200.0/22 to any port http
sudo ufw allow from 103.31.4.0/22 to any port http
sudo ufw allow from 141.101.64.0/18 to any port http
sudo ufw allow from 108.162.192.0/18 to any port http
sudo ufw allow from 190.93.240.0/20 to any port http
sudo ufw allow from 188.114.96.0/20 to any port http
sudo ufw allow from 197.234.240.0/22 to any port http
sudo ufw allow from 198.41.128.0/17 to any port http
sudo ufw allow from 162.158.0.0/15 to any port http
sudo ufw allow from 104.16.0.0/12 to any port http
sudo ufw allow from 172.64.0.0/13 to any port http
sudo ufw allow from 131.0.72.0/22 to any port http

If you also use IPv6, also copy the following:

sudo ufw allow from 2400:cb00::/32 to any port http
sudo ufw allow from 2606:4700::/32 to any port http
sudo ufw allow from 2803:f800::/32 to any port http
sudo ufw allow from 2405:b500::/32 to any port http
sudo ufw allow from 2405:8100::/32 to any port http
sudo ufw allow from 2a06:98c0::/29 to any port http
sudo ufw allow from 2c0f:f248::/32 to any port http

If you use HTTPS, also do the following:

sudo ufw allow from 173.245.48.0/20 to any port https
sudo ufw allow from 103.21.244.0/22 to any port https
sudo ufw allow from 103.22.200.0/22 to any port https
sudo ufw allow from 103.31.4.0/22 to any port https
sudo ufw allow from 141.101.64.0/18 to any port https
sudo ufw allow from 108.162.192.0/18 to any port https
sudo ufw allow from 190.93.240.0/20 to any port https
sudo ufw allow from 188.114.96.0/20 to any port https
sudo ufw allow from 197.234.240.0/22 to any port https
sudo ufw allow from 198.41.128.0/17 to any port https
sudo ufw allow from 162.158.0.0/15 to any port https
sudo ufw allow from 104.16.0.0/12 to any port https
sudo ufw allow from 172.64.0.0/13 to any port https
sudo ufw allow from 131.0.72.0/22 to any port https

And for HTTPS and IPv6:

sudo ufw allow from 2400:cb00::/32 to any port https
sudo ufw allow from 2606:4700::/32 to any port https
sudo ufw allow from 2803:f800::/32 to any port https
sudo ufw allow from 2405:b500::/32 to any port https
sudo ufw allow from 2405:8100::/32 to any port https
sudo ufw allow from 2a06:98c0::/29 to any port https
sudo ufw allow from 2c0f:f248::/32 to any port https

Run the following to enable UFW:

sudo ufw enable

Run this to check UFW’s status:

	sudo ufw status

Now, nobody can access your websites without going through Cloudflare. And nobody can access your server through ports which don’t have ALLOW written next to them.

After re-creating my portfolio with Gatsby (which uses React) and building an app for a client in Vue I feel I have more knowledge about the two JavaScript frameworks to give an informed opinion on both.

When I was first starting out using these sort of frameworks I wrote this article on my thoughts.

I would argue that React is quite an old framework. This leads to some benefits. There are a lot of tutorials online and a lot of examples and plugins that you can download to extend React. I may not have grasped the framework fully but I feel that because it’s an older framework, and it grew in popularity so quickly, it has become bloated and more difficult to understand. React has so many core features now, compared to when it first launched, such as hooks and state, with many more features planned. There are at least 2 different ways of doing things, such as the simple task of creating a component. You can either create a functional component or a class component. This means many tutorials are incompatible with each other, even when all of React is written in the same language, JavaScript. When initially starting out I didn’t like how you had to buy into the whole React eco-system. It was much like deciding to buy a MacBook. Coming from building static sites and having the option to use some PHP to make them dynamic, using React felt like I jumped straight into the deep end and had to use JavaScript for everything. There are even plugins that extend React enabling you to write CSS in JavaScript. I love CSS!

Vue was one of the first JavaScript frameworks I used. I started out by forking my lecturers class notes which used VuePress. I had no idea what I was doing but I managed to follow his tutorial and get up and running. I then used Vue to redo my portfolio on my photography site. This was more to complete a task and I was implementing it on a pre-built website, which uses PHP, and jQuery, it wasn’t an experience of building a SPA or a site from scratch. This experience came when building an app for a client. Building it with Vue was like a breath of fresh air. Vue template files split CSS, HTML, and JavaScript, just like a static site. The HTML doesn’t have to be JSX, but it can be. I use the V-If statement so much to conditionally render HTML. The Vue data attribute is a god save for managing variables and data within the application. Vue devtools make it really easy to manage too, it’s like a mini database on the Front-End. I understand how the Vue lifecycle works and know when to execute my code. No more worrying about whether I can call componentDidMount() on a functional component.

In conclusion, both frameworks have their merits but I’ll be using Vue from now on.

I’ve been asking myself this question a lot recently after applying for quite a few web development placements.

The experience has been enlightening, teaching me a great deal about the industry. I’ve been reflecting on what I’m good at in web development and what I enjoy.

Whilst freelancing I’d describe myself as a Full-Stack Developer. I have to deal with the client/project. Come up with designs. Create a website for them. And sometimes create a Back-End API. Being a freelancer I have to be skilled in the entire process of web development. In a junior role I wouldn’t be expected to work on a project in that way.

When I first started interviewing for roles I called myself a Full-Stack Developer. Most companies needed someone to create APIs and write Object Oriented PHP.

I then started calling myself a Front-End Developer and companies were still getting me to do PHP competancy tests.

In my opinion, a Front-End Developer specializes in languages that run in the browser: HTML, CSS, and JavaScript. This has shifted in recent years and now encompasses the array of JavaScript Frameworks out there such as React, Vue, Angular, and Svelte. I’d also argue that a Front-End Developer should have a great deal of knowledge in SEO, Website Optimization, and Accessibility.

I would define a Back-End developer as anyone that specializes in languages that run on a server. I.e. PHP, Python, and Ruby.

With the Jamstack turning heads all across the development landscape Front-End developers can now work on projects that historically needed a Back-End developer.

In conclusion, I find myself enjoying what I would define as Front-End Development. Practising my skills with JavaScript Frameworks, and optimizing my sites for accessibility and speed. But the role of a junior Front-End Developer seems hard to come by, at least in my experience, with companies expecting proficiency in sever-side languages.

TL;DR

Front-End Developers focus on languages that run in the browser.

Back-End Developers focus on languages that run on a server.