Sign in

Senior Full Stack Software Engineer — Javascript — Berlin

Express is one of the most popular libraries for Node.js backend development purposes. Today, we will go through how to add TypeScript support for the Express framework.

If you are not familiar with Express and want to read a quick tutorial, you can check out my other story to getting started with Express.

Requirements

  • Node.js needs to be installed on your system.

Initialization

Let’s create an empty folder and initialize our package.json file

mkdir ExpressApp && cd ExpressApp

After the initialization of our application folder, we need to initialize npm

npm init -y

Installing Express

yarn add express

Installing TypeScript and…


Why Serve static files using Express?

Serving static files from the server-side is very important in web development. These are the files that create your web application. Static files can be images, CSS, JavaScript, HTML, PDFs, and many other file types.

If you have just started getting into development using Express, I suggest you read my other article:

How to serve static files in Express.js

There is a built-in middleware in Express that enables us to serve static files by specifying a certain path and options. As you can see below:

express.static(root, [options])

The express.static middleware takes the root directory as its first argument to serve static assets. Options is the other argument…


What is Express

Express is a Node.js framework for server side web applications. Express built on Node.js features to provide easy and fast web & mobile server solutions. It is open source framework and maintain by Node.js community. There are many another libraries built on Express and many big tech companies are using Express in their backend services. Check it out which companies are using Express in their official page.

On GitHub Express repository has 52.3k stars and 8.8k forks. You can check it out from their official Express repository.

Installation

After you initialized your npm package.json you can install as below. …


How to use self hosted fonts in Next.js?

Fonts are very important assets in web development. Let’s see how we can use custom fonts or self hosted fonts in Next.js.

If you have already created your application in Next.js you can continue reading otherwise I would suggest you to read my another post about how to start development in Next.js

Choosing the right font

You can choose any font as you wish for your projects but i will choose Open Sans for the tutorial.

You can download open sans from google fonts or choose another font as you wish.

Convert fonts to ttf, eot, woff, woff2

To be able to support all the browsers we need to convert our…


If you are part of development Git is one of the most important tools you can use for development. There are many use cases for the github. You can contribute any open source project you would like to and learn coding with reading the codes of many successful developers.

If you are working with the team using git is inevitable for every developer. Learning github commands and memorizing them might be challenging at the beginning but it will come with time :)

1- Git clone

Git clone is one of the most important command.

When you want to clone one of the projects…


Tailwindcss is an utility-first CSS framework.
It enables to use pre defined classes like text-center, mt-6, flex etc.


How can we use SVG as ReactComponent inside Nextjs & React?

When you create new web applications probably you would use SVG’s in your project. SVG’s are really important in web development.

You can have a look to my another post to see the importance of SVG usage and some useful SVG sources i use on my daily life.

How to use SVG’s in Next.js?

There are few options to use svg’s in your nextjs application you can choose which one suits best for you and start using that technique!

1 - SVG components

Using SVG components is one of the simplest and affective one for me, because it works with React, Nextjs and Preact so basically…


Tailwind CSS is becaming very popular and it is very developer friendly utility-first CSS framework. If you haven’t used tailwindCSS before you can start looking their documentation.

Setup

Create your nextjs application first

npx create-next-app tailwind-demo

After you create your nextjs application we changed directory to the project

cd tailwind-demo

Setup required node modules for tailwind

yarn add tailwindcss yarn add -D postcss postcss-preset-env

After successfully installed required packages now we can create required configuration files.

Configuration

There are 2 configuration files we need to add our project.

  • tailwind.config.js
  • postcss.config.js

Tailwind configurations will be created after running this command as below.

npx…

This tutorial will show how to integrate TypeScript to your Nextjs applications. For this purpose we should install required typescript libraries for our Nextjs project.

If you are starting a new project and start with Typescript you can also create a new nextjs application in a seconds with

npx create-next-app your-app-name

Install required libraries for Typescript support

// with Npm
npm install -D typescript @types/react @types/node
// with Yarn
yarn add — dev typescript @types/react @types/node

Inside the root folder to be able to use TypeScript tsconfig.json needs to be added.

tsconfig.js

As you can see in the include array we defined some file endings.


Social media cards are really important for your business. Here are meta tags that can show your website much better when it shared.

If you don’t have the required meta tags it would be only a simple text. There are very small changes you can make to show your links with images, descriptions and other contents together to provide much better sharing experience.

As you can see below if Apple does not have the required meta tags it would look like on the left side. Plain simple text.

After you complete this tutorial your links would be on the right…

Melih Yumak

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store