Forem: Haseeb Burki

Configure SSL Certificate — AWS Elastic Beanstalk (Single Instance)

Haseeb Burki — Fri, 04 Oct 2019 21:48:19 +0000

SSL secures data transfer between client and server-side. Not only that it also increases your website’s Google ranking, so it's safe to say that SSL certificates are a MUST have.

AWS provides a very convenient solution called “AWS Certificate Manager” (ACM). It provides free public SSL certificates that you can connect to your load balanced Elastic Beanstalk (EB) instances.

That’s great !! but we can lose the load balancer for instances hosting our development environments and side projects … RIGHT ??

After all, a single low-cost instance will suffice. We’ll just generate a certificate using ACM use it on our “single instance” … wait what’s that !! we can’t ?? 😧😧😧

Apparently, ACM requires a load balancer (or CloudFront distribution). It’s not possible to use the certificate with an instance directly.

Well, that’s mildly annoying 😒 but don’t worry we can still provision a free SSL certificate without enduring unnecessary load balancer expenses, in three easy steps.

1) Elastic Beanstalk

The first step is to say goodbye to your load balancer. Convert your instance type to “single instance” from “load balanced.” You can do this from the Capacity tab inside Configurations. Just choose single instance in the environment type and that’s it.

2) Certbot

The second step is creating and signing the certificate using “certbot”. You can find it here. I should mention that you’ll need a domain to use the certificate on.

Open up the terminal on your local machine, I’m using mac so some of the commands might be a little different for you.

certbot certonly --manual -d domain.com --preferred-challenges dns

“certonly”: use certbot authenticators
“manual”: generate certificates on machines other than web servers.
“d”: specify a domain
“preferred-challenges”: a method for domain verification

The cli will ask you to allow to log your machine’s IP address. You have to agree to continue.

After that, it’ll ask you to deploy a DNS TXT record with the name _acme-challenge.domain.com. Press “enter” when you want to verify the new record.

On successfully creating the certificate the cli will spit out two files “privkey.pem” & “fullchain.pem”.

certbot certificates

You can use the above command to list all the certificates along with paths to their files.

3) .ebextensions

Okay so we’re nearly there, the third and last step is enabling HTTPS for your “single instance” by allowing traffic on port 443.

Create a folder named .ebextensions, it is important that the name be exactly the same. Then create a configuration file with the extension “.config”.

“packages” key installs mod24_ssl on the instance.
“files” key is used to create files which hold the certificate, certificate chain and private key that certbot created.

Note:

Copy the contents of “privkey.pem” to server.key file
Copy the contents in “fullchain.pem” to chain.pem file
There will be two keys in “fullchain.pem” You only need to copy the first key to server.crt file

Now all you have to do is deploy your code to Elastic Beanstalk. Make sure that your instance is connected to the same URL in Route53 that you entered in certbot cli …

Aaand Voilà !!! A+ rating for your very own, free of cost SSL Certificate. You can test your SSL certificate at ssllabs.com.

Happy Coding :)

Migrating API from Laravel to NestJS

Haseeb Burki — Wed, 18 Sep 2019 19:21:09 +0000

I want your opinion

I've been working as a full-stack developer on mobile and web-based application backed by an API built in Laravel for 2 years.

Fast forward to today we have 3 developers (excluding myself) working on the same code.

Recently I've been seriously considering migrating the API to JavaScript. After doing some research I decided on NestJS.

When I started looking at javascript (NodeJS) I was disappointed. None of the backend libraries or frameworks offered as much as Laravel does. I had to setup up very trivial things like server-side validation, dependency injection, error logging, etc. things which Laravel offers right out of the box. NestJS removed most of these concerns.

Pros of Migrating to NestJS

I have a personal desire to shift my work to JS.
Migrating backend to JS closes the language barrier between frontend and backend devs.
I can handle testing both frontend and backend with Jest.
There are a lot more developers for Node and JS than for Laravel.
JS ecosystem (npm) is much better than PHP's ecosystem.
Node seems to have a leg up in terms of performance.
Unfortunately Laravel is cursed by its language of choice (PHP). This scares away a lot of potential new developers.

Note that I run a team and have to retain my employees. I also need to consider what resources are available in case I hire more employees.

Cons of Migrating to NestJS

The only issue I have is the time and effort I will have to put in to migrate all our work to a new framework. I (and my team) are comfortable with Laravel but want to migrate to NestJS.

I just wanted to get more opinions about whether migrating is a good or bad idea? And do you think it will be worth it in the long run or not?

NestJS: Getting Started with SequilizeJS

Haseeb Burki — Fri, 06 Sep 2019 19:31:56 +0000

Preface

Coming from Laravel, which has a myriad of built-in features I started to resent shifting to NodeJS. Setting up error handling, logging, dependency injection, etc. was not what I had in mind. Thankfully I found NestJS, with its out-of-the-box architecture and great documentation I started feeling at home again.

This is one small step in a long technical journey with NestJS.

SequelizeJS is an ORM that offers connectivity to relational databases like MySQL, PostgreSQL, and MSSQL. For this article, I’m going to use MySQL hosted on RemoteMySQL, but you can use any relational database you like.

Getting Started

Assuming you have a nest project ready to go. We’ll start by installing the following dependencies.

npm install --save sequelize sequelize-typescript mysql2
npm install --save-dev @types/sequelize

First, we’ll pass the connection details to SequelizeJS. We can do this by creating a database module and provider.

nest generate module database
nest generate provider database/database.providers

This is where we will add our entity models to SequelizeJS. I’m adding models right now (even though they are created yet), but you can do this later.

I have imported and added the user model to the addModels function. Now export your database provider so it can be consumed with any module that needs to access the database through SequelizeJS.

User Entity Model

I’m not going to explain how the code above populates the database table and its attributes. If you’re interested in learning more about SequelizeJS, you can look here.

Next, we’ll create user.provider.ts which will be used to export the User model so it can be used in different services.

The USER_REPOSITORY is stored in a const variable, in a separate file, so it can be used anywhere without being subject to human error.

At this point, we’re done with our database and SequelizeJS configuration. From now on it’s just a matter of importing database and its models and using them 😀.

Onwards with the Code

Let’s move on and create our user *module, controller and service *with the following command.

nest generate module user
nest generate controller user
nest generate service user

These are the files responsible for entertaining recurring database requests. But first we’ll create a Data Transfer Object (DTO), this is especially useful for validating body of the incoming HTTP request or building API documentation with swagger, etc.

User Module

The above code is consolidating all the User code (controller, service, model) into one place, the user module so it can be exported to the app module.

Note that the user controller and service have been generated but are empty right at this step. You can opt to populate this file later on.

User Service

Unlike user service which uses the “Injectable” decorator, the user provider we created to use the User Model is not a part of NestJS, therefore has to be injected manually.

We do this inside the service’s constructor method using the “Inject” decorator.

User Controller

The last step is to inject the user service in our user controller. The controller exposes our code base to externally accessible API endpoints.

Folder Structure

If you’re curious, this is how my folder structure looks like.

The database connection details are in the database folder, easy to maintain and reuse anywhere in the app.

The bulk of the files are in the user folder. You can ignore the .spec files as they are used to host tests that are out of the scope of this article.

The dto folder holds “data transfer objects” for each request. The index file is used to export all *dto-*s.

Create your first AWS Billing Alarm

Haseeb Burki — Sun, 01 Sep 2019 19:52:38 +0000

Whether you're a novice, just starting or a highly skilled AWS ninja, you need to keep an eye on those pesky AWS bills. Billing is a very important and sometimes confusing part of AWS and if left unchecked can cause a lot of damage.

AWS gives a one-year free trial and there are a lot of great tutorials out there, enabling young devs to get started in no time. However, before getting started, it is strongly recommended that you set up a billing alarm to avoid any unnecessary costs.

This article assumes that you have already created an AWS account

What is a Billing Alarm?

Good question! Billing Alarm is a limit that you can set and AWS console lets you know (email) when you exceed that limit.

Let's get our hands dirty !! 👩‍💻 👨‍💻

Assuming you are logged into the console. Click on your username in the top right bar and select the Billing Dashboard. Alternately, you can also search for billing in the search bar, on the main page.
On the left tab, under the Preferences section click Billing preferences.

Check Receive Billing Alerts and press Save Preferences.

Note: AWS recently updated its user interface (UI), so many existing tutorials on the net are still based on the older UI.

After that, you'll need to navigate to CloudWatch. Open Services dropdown (top bar) and search for CloudWatch. It should be under Management and Governance.
On the left side tab, click on Billing and then Create Alarm button.

💡CloudWatch displays all billing alerts in US East (N. Virginia) region only. So you will have to create all alarms in that region.

The Create Alarm button will take you to a setup wizard. There are four steps in the wizard:

Specify metrics and conditions
Configure actions
Add description
Preview and create

In the first step, you can add the alarm's name, currency, and conditions that trigger the alarm.

In the second step, you can configure when the alarm is triggered and who it goes out to. To define who receives the notification, you will need to create or choose an existing, SNS topic.
Complete the following steps;

Select Create new topic under "Select an SNS topic" subheading
You can change the topic name if you want.
Add your email address. You can add multiple email addresses separated by commas (,)
Press Create topic

In the third step just add a unique name and description (optional) for the alarm. This is so you can recognize the alarm easily among others you may create in the future.
The last step lets you preview all the information you have added in the setup wizard and create the alarm.

Note: Once the alarm is created, you will need to access your email and confirm the subscription to it.

100% height to all divs - Gatsby

Haseeb Burki — Wed, 15 May 2019 16:02:37 +0000

Use Case

A simple UI containing a header, main and footer.

The footer should stick to the bottom if content above it (main) does not fill the whole view and get pushed down if the content (main) exceeds the view height.

What we Have!

What we Want!

The Simple Solution

My first thought was assigning all html tags above the div which holds the <main></main> tags height: '100%'.

But!!! 😮😮😮

Additional div Highlighted

Gatsby uses @reach/router which wraps the Layout component in an additional div. This is done so,

@reach/router can automatically manage the focus as part of making sure sites are usable by screen readers.

So you can see how adding style to a javascript injected div without any class or id might be an issue.

The Real Solution

Well the real solution is actually still the same, we need to assign a height: '100%' to all parent divs.

Create a new css file and name it global.css. I've put it in a separate styles folder in my repo.

/* 
 * Purpose:
 * Assign height: "100%" to
 * html, body, #___gatsby &  
 * div with role="group"
*/

html, body, #___gatsby {
    height: 100%;
}

body {
    margin: 0px;
}

div[role="group"][tabindex] {
    height: 100%;
}

In the root of your directory, look for gatsby-browser.js and import global.css.

import './src/styles/global.css'

I like to start my projects from scratch. This is my take on Layout Component.

<div style={{
  height: '100%',
  display: 'flex',
  flexDirection: "column"
}}>
  <header>
    <Header siteTitle={data.site.siteMetadata.title} />
  </header>

  <main 
    style={{
      backgroundColor: 'pink',
      flexGrow: 1
    }}
  >{children}</main>

  <footer style={{
    backgroundColor: 'aquamarine'
  }}>
    © {new Date().getFullYear()}, Built with
    {` `}
    <a href="https://www.gatsbyjs.org">Gatsby</a>
  </footer>
</div>

The Result as Promised !!

Footer pushed down by content

This solution is based on a github thread.