DEV Community: Ahmed Altaai

Create subdomains in express.js with vhost in Heroku and Namecheap

Ahmed Altaai — Fri, 16 Oct 2020 15:35:09 +0000

Wondering how to replicate the Apache vhost feature in Express.js? Virtual hosting is a method for hosting multiple domain names on a single server. In case you are new to vhost, it allows a web server to listen on a single port and serve different web apps depending on the domain name or the subdomain. Implementing such a feature in Express.js is very easy.

I will be using Heroku as a cloud hosting provider with Namecheap as a domain registrar and Node.js (Express.js) for the Back-End displaying my portfolio which is made with Vue.js.

The goal

Create and connect subdomain on the services
Directory structure
Node.js server setup

Requirements

Basic node.js/ express.js knowledge
Payed Dyno (hobby)
The will to learn

Lets get started!

Create and connect subdomain

Lets start with Heroku where you need to be logged in:

After login your dynos will be displayed...

Pick the one you want to use.
Go to settings

Scroll down to domains
Click on "Add domain"

Enter wished subdomain
for the sake of this tutorial it will be test.ahmedaltaai.com
Click next

Copy DNS Target

It will show you "waiting" on heroku until you connect it to a domain with DNS Target

Now lets head to namecheap to connect DNS Target

Go to Domain List

choose your domain and click on "manage"

Click on advanced DNS and scroll down to "host records"
Click "add new record"

Select "CNAME" from the dropdown menu in the type column
Enter your subdomain in the "host" column
Paste in your "DNS Target" in The "value" column
Click on the "greenish" check mark to save

That was it for the registeration of the subdomain

Now on heroku there would be a red flag because of the SSL certificate. It will take some time for it to be activated on the subdomain (5-10 min).

After some time has passed it will say that everything is OK

Directory structure

Root folder
- server.js
- public (main website)
- index.html
- style.css
- main.js
- subdomains
- test (project directory)
  - server.js
  - public
  - index.html
  - style.css
  - main.js

In the root directory a creation of an express app is needed

npm init

then

npm install express

. Now we create our server.js file which if not changed during the "npm package initialization process" will be named index.js by default.
It can be checked in the package.json file.

  "scripts": {
    "start": "node server.js"
  }

Every website needs its own express app to be rendered by. In the root directory there is the one express app to rule them all. In our case to route the views for the specified URL.

As seen above every project directory has a server.js file which is the node server (express app) and the public directory where the website is which will be rendered in the browser.

to serve are the website files e.g. index.html / style.css / main.js. It is needed to put them all in one directory e.g. public / client / frontend because we will be serving/ rendering the view from server.js.

The subdomain directory will hold all the other directories of the individual projects which will be rendered when visiting the registered subdomain in our case it will be test.ahmedaltaai.com

Nodejs server setup

Lets take a look at server.js for displaying the main website

// importing express
const express = require('express')

// The path module provides utilities for working with 
// file and directory paths
const path = require('path')

// app is an instance of express
// why app? I DON'T KNOW it is the law
const app = express()

// serves files from public directory 
// which contains the main website
const website = express.static(path.join(__dirname, '/public')

// Mounts the specified middleware function or functions 
// at the specified path: the middleware function is executed 
// when the base of the requested path matches path.
app.use(website)

// routes an HTTP request, where METHOD is the HTTP 
// method of the request, such as 
// GET, PUT, POST, and so on, in lowercase. 
app.get('/', (req, res) => {
// The path.join() method joins all given path segments together
// using the platform-specific separator as a delimiter, 
// then normalizes the resulting path.
 res.render(path.join(__dirname, '/public'))
})

// in many environments (e.g. Heroku), and as a convention,
// you can set the environment variable PORT 
// to tell your web server what port to listen on.
const port = process.env.PORT || 8080

// binds and listens for connections on the specified host and port.
app.listen(port)

// just logging out on which port the app is listening
console.log("listening on... " + port)

Now when visiting yourwebsite.com the index.html inside the public directory will be rendered.

Now lets use vhost to display the subdomains

To display the subdomains we need to create a module out of the test directory's express app which is named server.js

It is nearly the same as a normal express app except we won't use

app.listen(...)

rather we will export it as a module and make it run on the same port and server which is being used for the main website.

test subdomains express app

const express = require('express')
const path = require('path')
const app = express()

app.use(express.static(path.join(__dirname, './public')))

app.get('/', (req, res) => {
  res.render(path.join(__dirname, './public'))
})

module.exports = app

Now lets configure vhost in the root express app.

vhost needs to be installed through npm in the root directory

npm install vhost

then import it as we did with express and path with




#### main express app

const express = require('express')
const path = require('path')
const vhost = require('vhost')
const app = express()

const website = express.static(path.join(__dirname, '/public')

// it is important to have it at the top
// before app.use(website) otherwise it wont work
// the express app which we exported
// is being requires thus it is being executed
// also the code says it should render a view
app.use(vhost('test.ahmedaltaai.com', require('./subdomains/test/public/app')))

app.use(website)

app.get('/', (req, res) => {
res.render(path.join(__dirname, '/public'))
})

const port = process.env.PORT || 8080

app.listen(port)

console.log("listening on... " + port)




The repository can be found  [here](https://github.com/ahmedaltaai/portfolio-vuejs) 

# I hope you learned something new

How to automate your portfolio website [Part 2]

Ahmed Altaai — Thu, 15 Oct 2020 11:48:54 +0000

To have less steps redacting the portfolio every time you publish a blog or push a new project to GitHub, automating it is the right choice.

In this article, I'd like to share how you can automate publishing your Hashnode blogs to your portfolio website with the help of Hashnodes API, let me show you how I did it.

What should be achieved with this project

Automatically display and link my projects from GitHub
Automatically display and link my blogs from Hashnode

Requirements

JavaScript
Vue.js
vue-apollo

The steps I took

After I finished preparing my last post about automating with github api I started playing with the Hashnode API.

Which looks like this

It is a GraphQL playground

The documentation tab is next to the scroll bar

I searched for it quite a bit until I found it because it was the first time me seeing this UI

Lets start with a step for step explanation

specify a user

username: String!

the exclamation mark means it is required to enter what is specified, in this case it is a String.

age: Int?

the question mark means it is not necessary to enter what is specified, in this case it is an Int and it was just an example we only need the one above "username".

choose publication
then posts
finally pick which data you want retrieve from the API

In our case we will need cover image, title, brief(description).

Also cuid and slug are going to be needed to dynamically link the blog card on your website to direct to the original post. We will discuss it later.

I'm using my username for demonstration, you can use whatever username you like.

query {
    user(username: "ahmedaltaai") {
        publication {
                  posts {
                    coverImage
                    title
                    brief
                    slug
                    cuid
                    }
              }
    }
}

This is the result after pressing the play button in the middle of the screen

Well very nice we did it in the GraphQL playground but how can we do it in our code base?

Because I'm using Vue.js we will be using vue-apollo. There is also a version for React and Angular.

So we will install the npm package as a dependency with

npm i vue-apollo --save

Afterwards we will find a new js file in our projects src directory "vue-apollo.js"

Inside the vue-apollo.js file we need to modify two things

httpEndpoint
wsEndpoint (Web Socket)

Our API address link goes into the httpEndpoint and the wsEndpoint is going to be set to null.

Now we switch to the component where we will be making the call (I'm not using a state management system such as Vuex)

<script>
//we need to import graphql
//gql is the graphql query language

import gql from 'graphql-tag'

export default {
  name: 'blog',

//use the "apollo" object
//to query and retrieve the data

  apollo: {

//add an attribute which has the same name 
//as the field name in the query

    user: gql`
      query {
        user(username: "ahmedaltaai") {
          publication {
            posts {
              coverImage
              title
              brief
              slug
              cuid
            }
          }
        }
      }
    `
  }
}
</script>

Read the vue-apollo documentation for better understanding about name matchnig & co.

Now we can just loop over the apollo object to display the data

We need to loop over the "posts" object which is in "publication" under "user".

v-for="post in user.publication.posts" :key="post.cuid"

This is how my component looks like

I will spare you the style section for the sake of the blogs length. You can still see the whole code on my github profile.

<section
        v-for="post in user.publication.posts"
        :key="post.cuid"
        class="card"
      >
        <a :href="`https://ahmeds.tech/${post.slug}`">
          <div class="cover-image">
            <img :src="post.coverImage" />
          </div>
          <div class="text">
            <div class="title">
              <h3>{{ post.title }}</h3>
            </div>
            <div class="description">
              <p>{{ post.brief }}</p>
            </div>
          </div>
        </a>
      </section>

As you see I'm using an "a" tag to make my card link to the original post if clicked.

You have the complete power to do it as you wish!

How to modify the URL in the "a" tag

It will depend if you have your own domain or using a subdomain under hashnode.

Own domain
Subdomain under Hashnode

Own domain

On api.hashnode.com when we queried for the data we requested a "slug"

A slug is a human-readable, unique identifier, used to identify a resource instead of a less human-readable identifier like an id . You use a slug when you want to refer to an item while preserving the ability to see, at a glance, what the item is.

The value of slug will be your post title:

So in the "a" tag we want to make the "href" dynamic with a v-bind which I will be shortening to a colon " : " just like this:

To access the v-for loop "post" element

I'm putting the link in backticks - which result in template literals (template string)

Template literals are string literals allowing embedded expressions.

So I can use "post" attribute from the v-for loop and fetch the slug to append it to the URL which will accumulate to a full link of my individual blog... the blog which is being clicked on.

https://ahmeds.tech/how-to-automate-your-portfolio-website-part-1-1

Subdomain under Hashnode

Identical procedure except we now also need the cuid

The Customer user ID (CUID) field is a unique user identifier set by app and website owners.

A blogger's URL without a private domain will look like this:

<username>.hashnode.dev/<slug>

<username>.hashnode.dev/<slug>-<cuid>

I can't tell you why there are those two differences because I don't know. You have to find out which one suites you. If you pay more attention to the URLs when ready on Hashnode then you will notice and understand what I'm talking about here.

Replace with your username on Hashnode, hard code it. And take the same procedure with the rest of the URL.

<a :href="`https://<username>.hashnode.dev/${post.slug}`">

<a :href="`https://<username>.hashnode.dev/${post.slug}-${post.cuid}`">

Now the posts should be displaying on your website. Although there is a "long" loading time which I don't like and I think neither do you.

Lets make it more professional with a loading skeleton

Loading skeleton

I won't go into detail on how to create or style a loading skeleton because there are plenty of tutorials which are online. Also it is an opportunity to get your googling skills on fleek :p

Although I will tell you the challenge I had while setting the skeleton up.

Loading state on vue-apollo documentation

You can display a loading state thanks to the $apollo.loading prop:

<div v-if="$apollo.loading">Loading...</div>

When I was implementing this function at the beginning it didn't work. It never displayed the skeleton. So I reversed the order of the

v-if

:

<div v-if="!$apollo.loading">
  <blog-card />
</div> 

<div v-else>
  <loading-skeleton />
<div>

In this case if it is NOT loading, as of NOT fetching any data then show me the blog card with the cover image, title and description else display loading skeleton.

Easy Peazy

That was it I hope you learned something new 😃

How to automate your portfolio website [Part 1]

Ahmed Altaai — Wed, 14 Oct 2020 12:10:19 +0000

To have less steps redacting the portfolio every time you publish a blog or push a new project to GitHub, automating it is the right choice.

In this article, I'd like to share how you can automate your portfolio website with the help of some APIs, let me show you how I did it.

What should be achieved with this project

Automatically display and link my projects from GitHub
Automatically display and link my blogs from Hashnode

Requirements

JavaScript
Vue.js
fetch API

The steps I took

First of all, I was messing around with the github API and have created a user search application with vuejs. Then the idea struck me! If I can search for users and display them this way, there must be a way to automatically display all the repositories on my website.

So I started looking through the API links until I found what was needed. Afterwards I looked into the Hashnode API which will be explained in the next article so stay tuned.

The GitHub API

Preparing the fetch request

This link will be prepared so we can fetch all the public repositories of the chosen profile.

"https://api.github.com/users/{user}/repos{?type,page,per_page,sort}"

// change {user} with a GitHub username
// remove the curly braces and insert the username
// to retrieve all the public repositories remove everything 
// after repos within the quotation marks

// this is how the link looks like in my case 
"https://api.github.com/users/ahmedaltaai/repos"

All the work is happening inside a component

Requesting the repositories from the GitHub API with the JavaScript fetch API when the the instance is created.

  created() {
    fetch('https://api.github.com/users/ahmedaltaai/repos')
      .then(res => res.json())
      .then(data =>
        console.log(data)
      })
  }

The response

Afterwards

Analise the returned data by clicking on the triangle next to the indexed links to display the information within the object which is needed to know which data is being returned and which to use for displaying on the website.

I placed a red dot next to the information which I want to display:

Name
Language
Description
Repository URL
URL of the project for live preview

Now lets store all the information.

Storing the response into an array

To be able to store the data we first need to create an empty array.

data() {
    return {
      // empty array to store the data
      // coming from the api
      repos: []
    }
  }

Then assign the data to the array.

Populating the empty array which was created prior

  created() {
    fetch('https://api.github.com/users/ahmedaltaai/repos')
      .then(res => res.json())
      .then(data =>
// select the array with this.repos and insert the data into it
        this.repos = data
      })
  }

Looping over the repos

We can use the v-for directive to render a list of items based on an array. The v-for directive requires a special syntax in the form of item in items, where items is the source data array and item is an alias for the array element being iterated on.

v-for="(repo, i) in repos" :key="i"

To give Vue a hint so that it can track each node’s identity, and thus reuse and reorder existing elements, you need to provide a unique key attribute for each item.

This is how my component looks like. I will spare the styling which you can find in my GitHub repo

<template>
  <!-- projects container -->
  <article class="projects__container">
    <!-- card container -->
    <section class="card" v-for="(repo, i) in repos" :key="i">
      <div>
        <!-- card header -->
        <header class="header">
          <div>
            {{ repo.name }}
          </div>
          <div class="lang">
            <span class="tag"></span>
            <div>
              {{ repo.language }}
            </div>
          </div>
        </header>
        <!-- card body -->
        <div class="description">
          {{ repo.description }}
        </div>
        <!-- links / buttons -->
        <footer class="buttons">
          <a :href="repo.svn_url">
            <i class="fab fa-github"></i>
            CODE
          </a>
          <a :href="repo.homepage">
            <i class="fas fa-play-circle"></i>
            DEMO
          </a>
        </footer>
      </div>
    </section>
  </article>
</template>

This is how it looks like in the browser

As you can see it is returning every public repository which I don't want it to; so I will use an if-statement and disclose that it should show only the repos which have a homepage link them.

This is a common scenario as you can imagine, wanting to conditionally loop through objects. Only actually running the loop on objects that match a given criteria. The question is how do you do it?

This is how to do it

Place this if statement after the v-for loop so it has access to the individual item and can figure out if repo.homepage is true or false

v-if="repo.homepage"

We want to loop through this repos array using the v-for directive. With each loop iteration we display another repo. But we only want to loop through repos which have a link to a live demo. If a repo doesn't have anything inside the repo.homepage we basically want to skip over it.

This means if homepage in the individual repo is true then show me the requested details as of name, description and so on.

The result of the if-statement

As you can see this would technically work. But we now have empty div elements around each object which can likely interfere with DOM traversal and phantom CSS styling. In addition, it clutters our app and adds unnecessary structure to our HTML markup.

I should also mention that you are still looping through unwanted repos and running a conditional before breaking and going to the next loop iteration. This might solve the problem visually, but computationally we are still looping through every single repo in the system instead of only the needed ones. Depending on the size of the repos payload, this could lead to performance issues.

The solution: computed properties

Instead of looping through all of the repo objects and then checking mid-loop if they meet our criteria, we could just create a subset of our repos, which only represents the wanted repos, with homepage link, and loop only that subset!

We have the repos as an array so we can use the .filter() method to only return the wanted repositories.

    // this function is made to filter every public
    // repo and return only the ones with a homepage in it
    // to overcome empty divs and phantom CSS styling

computed: {
    wantedRepos: function() {
      return this.repos.filter(repo => {
        return repo.homepage
      })
    }
  }

And now we update the v-for loop

v-for="(repo, i) in wantedRepos" :key="i"

The new outcome with computed properties

90% of the work is done. There is one more thing I want to add to the cards I want to add colored language tags the same as on GitHub.

example

Hold up

You may be asking: well how can I add a description and a homepage link to my repositories.

Say no more

Go to the desired repository
Click the cog icon

Fill the fields out and click save changes

Now lets go back to the colored language tags

First of all put a class or id on the languages element. I used a class and named it 'lang'

<header class="header">
    <div>
      {{ repo.name }}
    </div>
    <div class="lang">
        <span></span>
      <div>
          {{ repo.language }}
      </div>
    </div>
</header>

I believe everyone is going to have multiple repositories to portray so when you grab the element of the language e.g. class of 'lang' there will be multiple classes with the same value because every repo card has its own language element. So we need to grab them all.

updated() {
    // grab the all element of the language tag
    let lang = document.querySelectorAll('.lang')

    // and cycle through them
    // with a for-of loop then use if and else if statements
    // to decide which language gets which color
    // with 'tag' you can access the individual nodes
    // within the grabed element
    // tag.firstChild is the span element where
    // the colored dot is being displayed

   for (let tag of lang) {
      if (tag.innerText === 'PHP') {
        tag.firstChild.style.backgroundColor = '#4F5D95'
      } else if (tag.innerText === 'HTML') {
        tag.firstChild.style.backgroundColor = '#e34c26'
      } else if (tag.innerText === 'JavaScript') {
        tag.firstChild.style.backgroundColor = '#f1e05a'
      } else if (tag.innerText === 'CSS') {
        tag.firstChild.style.backgroundColor = '#563d7c'
      } else if (tag.innerText === 'C') {
        tag.firstChild.style.backgroundColor = '#f34b7d'
      } else if (tag.innerText === 'C++') {
        tag.firstChild.style.backgroundColor = '#b07219'
      } else if (tag.innerText === 'Java') {
        tag.firstChild.style.backgroundColor = '#b07219'
      } else if (tag.innerText === 'Python') {
        tag.firstChild.style.backgroundColor = '#3572A5'
      } else if (tag.innerText === 'Vue') {
        tag.firstChild.style.backgroundColor = '#2c3e50'
      } else if (tag.innerText === 'TypeScript') {
        tag.firstChild.style.backgroundColor = '#2b7489'
      }
    }

The colored dot is styled in the CSS section and we are only adding the background-color to it.

I grabbed the colors from GitHub with the help of dev-tools inspector.

Congratulations on automating your projects section on your portfolio homepage.

Next: Hashnode API implementation so stay tuned and follow me to not miss it out!