Author: Tony

Categories
JavaScript Development

Get content from an API endpoint

XMLHttpRequest()

Until recently a request for data from an API endpoint would typically boil down to this:

let url = '/some/content.json',
	request = new XMLHttpRequest();

request.open('GET', url);
request.responseType = 'json';
request.send();

request.onload = function() {
	console.log(request.response);
}

request.onerror = function () {
	console.log("An error occurred.");
};

It’s not too much code and can handle most requests with little change, but it’s never been very easy for me to remember.

fetch()

Now we have fetch() though, which in my opinion has a much nicer syntax:

const url = '/some/content.json';

fetch(url, {
	'Method': 'GET',
	'Content-Type': 'text/json'
})
.then((response) => {
	return response.json();
})
.then((json) => {
	console.log(json);
})
.catch((error) => {
	console.log("An error occurred.");
});
Categories
JavaScript Development

Node Package Manager – Installing packages

The most common task at the beginning of a project is to install the necessary packages – to do this you’ll use the install command a few times:

npm install react --save

To save a few keystrokes, this can be shorted to:

npm i react -S

npm i react-dom -S

--save or -S install the package to the current project – the packages will show up in the package.json under dependencies with a version number, usually the latest:

  "dependencies": {
    "react": "^16.12.0"
  }

Development dependencies

Not all dependencies need to be in the finished project, stuff like dev tools. To install a package only used during the development phase you can swap to --save-dev or -D:

npm i babel-core -D

This will install development dependencies under devDependencies in the package.json:

  "devDependencies": {
    "babel-core": "^6.26.3"
  }

Multiple packages in one install

If you are installing multiple packages at the same time, you can combine your installs into one line:

npm i babel-core babel-loader babel-preset-react -D

It doesn’t really matter if something has already been installed:

  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^8.0.6",
    "babel-preset-react": "^6.24.1"
  }

If you wanna get really hardcore with your installs, you can use the following syntax to combine common package names:

npm i babel-{core,loader} babel-preset-react -D

This hurts my head though.

Specific versions

If your project has very specific requirements for what packages are used, you can also load specific versions via NPM:

npm install lodash@4.1.8

Or the latest version in a major version:

npm install lodash@^4.0.0

What happens in the background?

Loading just 5 packages seems easy when you look at it like this, but if you check your projects node_modules folder you’ll see alot happened in the background:

Installing packages in NPM installs all the dependencies for every package.

Every package you install also brings with it all of its dependencies – this can add up quickly on a big project. Our 5 packages has installed 83 packages into our node_modules folder.

Not something you’d want to manage manually…

Categories
LAMP Stack Quick Ubuntu Server

Enable Apache caching

To enable caching on Apache web server – simply type the following in on the CLI:

a2enmod expires

With this you can now add caching rules to your Virtual Host: 

    <FilesMatch "\.(jpg|png|gif|mp4)$">
        ExpiresActive           On
        ExpiresDefault          "access plus 1 year"
    </FilesMatch>

    <FilesMatch "\.(css|js)$">
        ExpiresActive           On
        ExpiresDefault          "access plus 1 month"
    </FilesMatch>

Your application will need to manage expiring the cached files when things change.

Categories
LAMP Stack Ubuntu Server

Installing PHP on Ubuntu Server 18.04 for use in LAMP stack

Before doing any work on your Ubuntu Server, it’s a good idea to update your software repositories using:

apt update

Once that has completed, you can install PHP and some of the packages that integrate it into your stack:

apt install php libapache2-mod-php php-mysql

You may also want to just tidy up what files Apache looks for when someone requests a directory:

vi /etc/apache2/mods-enabled/dir.conf

<IfModule mod_dir.c>
    DirectoryIndex index.php index.html
</IfModule>

As usual when making changes to apache, you’ll need to restart your service for changes to take affect:

systemctl restart apache2

Categories
Ubuntu Server

Quick set up for UFW or Ubuntu Firewall on Ubuntu Server 18.04

A quick and easy firewall is included with Ubuntu Server – it is easy to set up.

Before doing any work on your Ubuntu Server, it is good practice to update your software repositories using:

apt update

Before you start making changes to the firewall, it is a good idea to check its status:

ufw status

You can also list any running applications that have registered a profile with the firewall:

ufw app list

If you access your server via SSH then you need to allow that service before you enable the firewall:

ufw allow OpenSSH

If you are enbling a profile that has spaces in the name, simply wrap your service name in quotes:

ufw allow 'Apache Full'

Once you’re sure you’re happy with the firewall setup, enable your firewall:

ufw enable

You can now see what profiles are active by running:

ufw status

Categories
LAMP Stack Ubuntu Server

Installing Apache with Let’s Encrypt on Ubuntu Server 18.04

Before doing any work on your Ubuntu Server, it is good practice to update your software repositories using:

apt update

It’s also worth creating a document root for your new web sites – I generally create a dedicated folder in the root, with web sites and logs folders within:

mkdir /sites
mkdir /sites/logs
mkdir /sites/tonymerryfield.co.uk

To make life easier, make your web site folder reflect your domain name.

Installing Apache

To install Apache we simply use the apt command:

apt install apache2

Once installed you’ll need to do some configuration.

First of all let’s go to our apache hosts folder & create a .conf file specific to your new web site.

To keep things simple use the same naming convention you have used for the document root – ensure your config file is named with .conf at the end:

cd /etc/apache2/sites-available

vi tonymerryfield.co.uk.conf

Add the following to your file, you may find it easier to edit this beforehand:

<VirtualHost *:80>

    ServerName      tonymerryfield.co.uk
    ServerAlias     www.tonymerryfield.co.uk

    DocumentRoot    /sites/tonymerryfield.co.uk

    ErrorLog        /sites/logs/tonymerryfield.co.uk.errors.log
    CustomLog       /sites/logs/tonymerryfield.co.uk.access.log combined

    <Directory /sites/tonymerryfield.co.uk/>
        Require all granted
        AllowOverride All
    </Directory>

</VirtualHost>

The only changes you really need to make at this stage is references to tonymerryfield.co.uk to reflect your web sites name.

Installing Let’s Encrypt

Because the version of Certbot in the Ubuntu repositories can be a little out of date, install directly from the PPA:

add-apt-repository ppa:certbot/certbot

apt install python-certbot-apache

Once installed you can run certbot to get a new certificate – on your first run you will need to enter your email address and opt in/out of some options.

certbot

Once you’ve run certbot and got your certificates you can simply check your web site and carry on with your day.

I prefer to tidy up my host files.

Firstly your HTTP config:

vi tonymerryfield.co.uk.conf

<VirtualHost *:80>

    ServerName      tonymerryfield.co.uk
    ServerAlias     www.tonymerryfield.co.uk

    DocumentRoot    /sites/tonymerryfield.co.uk

    RewriteEngine on
    RewriteRule ^ https://tonymerryfield.co.uk%{REQUEST_URI} [END,NE,R=permanent]

</VirtualHost>

Secondly your HTTPS config:

vi tonymerryfield.co.uk-le-ssl.conf

<IfModule mod_ssl.c>
    <VirtualHost *:443>

        ServerName              tonymerryfield.co.uk
        ServerAlias             www.tonymerryfield.co.uk

        DocumentRoot            /sites/tonymerryfield.co.uk

        ErrorLog                /sites/logs/tonymerryfield.co.uk.errors.log
        CustomLog               /sites/logs/tonymerryfield.co.uk.access.log combined

        <Directory /sites/tonymerryfield.co.uk/>
            Require all granted
            AllowOverride All
        </Directory>

        SSLCertificateFile      /etc/letsencrypt/live/tonymerryfield.co.uk/fullchain.pem
        SSLCertificateKeyFile   /etc/letsencrypt/live/tonymerryfield.co.uk/privkey.pem
        Include                 /etc/letsencrypt/options-ssl-apache.conf

    </VirtualHost>
</IfModule>

Lastly, just to be sure all is still working, restart Apache:

systemctl reload apache2

Cert renewal

It’s a good idea to test your configuration using the following:

certbot renew --dry-run

When certbot is installed it adds a service to the cron.d so any certificates approaching its end-of-life will get renewed. Let’s Encrypt certificates are valid for 90 days, but the client will automatically renew after 60.

Categories
Ubuntu Server

Set up unattended-upgrades on Ubuntu Server 18.04

Setting up your Ubuntu Server to auto upgrade itself is pretty easy and will save you some piece of mind once set up.

As always when you are making changes to your server, make sure to update your software repositories using:

apt update

Once this has completed you can either upgrade any out of date packages or continue with setting up auto-update.

To get started, install the package:

apt install unattended-upgrades

Once complete you will need to configure your system – we’re using VI here but feel free to use your text editor of choice:

vi /etc/apt/apt.conf.d/50unattended-upgrades

By standard unattended-upgrades only installs security updates – I generally leave this so a daily update does affect my system setup.

Find these lines in the file below – in my version they were commented out, uncomment them and set your own preferences:

Unattended-Upgrade::Mail "my@email.address";
Unattended-Upgrade::MailOnlyOnError "true";
Unattended-Upgrade::Remove-Unused-Kernel-Packages "true";
Unattended-Upgrade::Remove-Unused-Dependencies "true";

To activate the unattended-upgrades you’ll need to edit a separate file – this one was empty by default for me:

vi /etc/apt/apt.conf.d/20auto-upgrades

Add your own preferences, or simply use the ones I used below – the values equate to days:

APT::Periodic::Update-Package-Lists "1";
APT::Periodic::Download-Upgradeable-Packages "1";
APT::Periodic::AutocleanInterval "7";
APT::Periodic::Unattended-Upgrade "1";

You can test your unattended-upgrades by running the following:

unattended-upgrades --dry-run --debug