DEV Community: Jan

Understanding Arrow Functions in JavaScript

Jan — Tue, 26 Aug 2025 13:12:58 +0000

Introduction

Arrow functions were introduced in ECMAScript 2015 (ES6) and provide developers with a more concise syntax for writing anonymous function expressions. You can use them for short, one-liner functions instead of declaring a regular function.

Prerequisites

For this tutorial, you need a basic understanding of JavaScript concepts, like:

Variables, functions, objects, and event handlers.

Let’s Get a Grasp of the Syntax First

When working with traditional function expressions, you assign an anonymous function to a variable that you can call later in your code. Arrow functions eliminate the need for using the function keyword in expressions.

(Source: Gemini)

From the illustration above, the arrow function has no function keyword, curly braces, or return keyword. You eliminate curly braces and the return keyword in single expressions, but you will still need them if you are evaluating more expressions.

Take a look at how you write arrow functions in different scenarios:

// One parameter; multiple expressions
param => {
    expression 1;
    return expression 2;
}

// Single expression; multiple parameters
(param1, param2, ..., paramN) => expression

// Single expression; no parameters
() => expression

// Single expression; one parameter
param => param * 2;

Arrow Functions Use Cases

Arrow functions, being succinct and readable, are useful in various scenarios.

(Source: Gemini)

One such case is in declaring single-expression functions, where you can get away with an implicit return.

Take a look at the differences using an example of an exponential function. You can see the three-line regular function expression transform into only one line using an arrow function.

// Traditional function expression
const power = function (base, exponent) {
  return base ** exponent;
};

// Arrow function
const power = (base, exponent) => base ** exponent;

Arrow functions are also useful when working with higher-order functions or array methods like map, filter, and reduce. For instance, suppose you want to filter an array based on a certain criterion. How can you implement the logic using an arrow function?

// Given an array of user ages; filter for users younger than 35 years (youth)
const userAges = [23, 56, 34, 47, 18, 25, 90];
const youth = userAges.filter((age) => age <= 35);
console.log(youth);

// Output
// [23, 34, 18, 25]

With the filter method, you pass an arrow function with the logic age <=35 that returns a new array with user ages equal to or below 35 years. The arrow function reduces boilerplate in cases where you need to manipulate large datasets.

Additionally, you can implement arrow functions in callbacks, especially with asynchronous operations or event handlers where preserving the ‘this‘ context is important.

Why Arrow Functions?

(Source: Gemini)

Apart from the rather obvious benefit of arrow functions being concise and readable, there are other benefits of arrow functions.

Arrow functions help solve the issue of losing the correct ‘this‘ binding when using traditional functions.

Arrow functions become beneficial in cases where the ‘this’ context can get lost. A good example is in code that involves callbacks, i.e., when working with event handlers or setTimeout.

What does this actually mean?

One is that arrow functions avoid a common issue where ‘this‘ points to either a global object or undefined. Two, you no longer have to store ‘this’ in a variable (const self = this) or use bind().

Let’s take a deeper look at the lexical ‘this' binding.

Arrow Functions and the Lexical ‘This’ Binding

Arrow functions inherit ‘this‘ from the surrounding context, like a function or block scope. That means that arrow functions don’t have their own ‘this’ value. Instead, the ‘this’ value is determined by the enclosing (lexical) scope.

(Source: Gemini)

To understand the lexical ‘this’ much better, let’s use an example of a function inside a block scope that takes the name of a person and logs it, then, after one second, logs the name again using setTimeout.

// Example using a regular function
const person = {
  name: "Julia the drummer",
  introducePerson: function () {
    console.log(`Hi! My name is ${this.name}`); // first output

    setTimeout(function () {
      console.log(`Actually my name is... ${this.name}`); // second output
    }, 1000);
  },
};

person.introducePerson();

// Output:
// Hi! My name is Julia the drummer
// Actually my name is... undefined

When you call person.introducePerson(); the first output that references ‘this‘ returns the actual person’s name as expected. But inside setTimeout, when a new function is called, the correct ‘this‘ binding is lost, which is why we get undefined.

Now let’s see what happens when we replace the regular anonymous function in setTimeout with an arrow function.

// Example using an arrow function
const person = {
  name: "Julia the drummer",
  introducePerson: function () {
    console.log(`Hi! My name is ${this.name}`);

    setTimeout(
      () => console.log(`Actually my name is still... ${this.name}`),
      1000
    );
  },
};

person.introducePerson();

// Output:
// Hi! My name is Julia the drummer
// Actually my name is still... Julia the drummer

As you can see, when using the arrow function, you retain the ‘this‘ value of the original function.

Limitations of Arrow Functions

You can’t use arrow functions as constructors. That’s because you cannot override an arrow function with the new keyword. One reason is that arrow functions don’t have their own ‘this‘ binding, and two being that they lack the [[Construct]] internal method needed for instantiation.

Additionally, you can’t use arrow functions as methods. That’s because arrow functions lack their own ‘this’ binding along with arguments or super.

A Few Things To Keep in Mind

Arrow functions support destructuring, and also rest, and default parameters. Note that you always have to write these parameters in parentheses. Here’s a simple illustration of how:

// Default parameters
(a = 12, b = 6, c) => expression;

// Rest parameters
(a, b, ...r) => expression;

// Destructuring
// Array destructuring
([a, b]= [12, 6]) => expression;

// Object destructuring
({a, b} = {a: 12, b: 6}) => expression;

You can also make your arrow function asynchronous by prefixing it with the async keyword just like this:

async param => expression;

Conclusion

In this article, you've learned:

How arrow functions work, the inner workings of lexical ‘this‘ binding, and various use cases for arrow functions.

I hope this article has been of help to you.

Thanks for reading. Keep building! 🌟

References

Fetch API and HTTP requests in JavaScript

Jan — Thu, 21 Aug 2025 18:50:13 +0000

TL;DR

A simple guide on using the Fetch API to make network requests in JavaScript. Learn how to use async/await to make your code more readable. See how you can handle errors gracefully to avoid your program crashing.

Introduction

If you want a clean and flexible way to handle network requests, then the Fetch API comes in handy. The Fetch API is a modern JavaScript interface for making asynchronous HTTP requests to servers. You use promises to fetch resources from servers asynchronously.

Promises, as we will see later in this tutorial, help make your code more readable and maintainable as opposed to callback approaches.

Fetch API replaces older methods like:

XML HttpRequest
jQuery’s AJAX methods

Prerequisites

To proceed with this guide, you need a basic understanding of:

Core JavaScript basics like:
- Arrow functions
- Objects
- String manipulation with template literals
Asynchronous concepts like:
- Promises (.then() and .catch())
- Async/await syntax
HTTP and networking basics, such as:
- HTTP methods (GET and POST)
- Status codes
- Basic API understanding

I will provide brief explanations of these concepts whenever necessary.

Understanding Fetch API Syntax

Before we dive into the various use cases of the Fetch API, let’s first get a rundown of the syntax.

fetch(url)
 .then(response => response.json()) // parses the response body to JSON
 .then(data => console.log(data)) // logs the data into the console
 .catch(error => console.error(error)); // catches errors if request fails

The fetch() function takes a URL as an argument and sends requests to that URL. The default request is usually a GET request. You can supply an optional second argument as an object to specify a HTTP method, or headers in the case of a POST request.

.then() handles responses when the request is successful. You parse the response body to JSON and later log the data received.

.catch() catches errors like network issues and invalid responses, in cases where the request fails. However, .catch() doesn’t throw errors for HTTP status codes like 404.

We shall see later in this guide how to handle 404 errors manually using the reponse.ok.

Handling HTTP Requests

(Source: Gemini)

When making a GET request using fetch(url), your code returns a Promise that resolves into a Response object.

Let’s take a look at a simple GET Request.

GET Request

To illustrate a GET request, we will use a fun example of a free API resource that generates random sentences to make you sound tech-savvy. You can generate as many random messages as you want with the API.

You start by adding the API endpoint as an argument to fetch() and use .then() and .catch() promises to define what happens to the response body.

Before parsing data into JSON, you should first check if the response was successful using response.ok.

Once successful, the code proceeds on to parse the response body into JSON and log the data to the console. The .catch() block is there to handle any network errors or invalid responses.

fetch("https://techy-api.vercel.app/api/json")
    .then(response => {
        // Check if response is successful
        if (!response.ok) {
            throw new Error(`Network error! Status: ${response.status}`);
        }
        return response.json(); // parse the response body into JSON
    })
    .then(data => console.log(data)) // log data to the console
    .catch(error => console.error("Error:", error)); // handle errors when request fails

The result is a random message as shown above.

POST Request

To make a POST, PUT, or DELETE request, you have to provide an options object that specifies the method, headers, and body as needed.

Query Parameters

When working with APIs, adding parameters helps you filter or modify the data you receive. Now let’s see how we can manipulate query parameters for API endpoints.

We will use the Faker API to generate random addresses for any country of our choice. Take a look at the code below:

// Initializing the API endpoint
const apiUrl = "https://fakerapi.it/api/v2/addresses?_quantity=1";

// Initializing a query parameter
const queryParam = {
  _country_code: "en_CA",
};

// Converting query parameter to string
const queryStr = new URLSearchParams(queryParam).toString();

// API endpoint + query parameter
const addressUrl = `${apiUrl}&${queryStr}`;

fetch(addressUrl)
  .then(response => {
    if (!response.ok) {
      throw new Error(`Network error! Status: ${response.status}`);
    }
    return response.json();
  })
  .then(address => console.log(address))
  .catch(error => console.error("Error:", error));

The result looks like this:

The example above shows a dummy address generated from the Faker API filtered for the Canada region.

Using async/await with the Fetch API

Async/await lets you simplify asynchronous operations using promises. The async function ensures the execution thread is not blocked, while the await block pauses execution until a promise is returned.

(Source: Gemini)

We will still use Faker API to demonstrate how you can add async/await when making network requests. In the code below, we will create an async function fetchAddress to help us generate random addresses from an API.

// Initializing the API endpoint
const apiUrl = "https://fakerapi.it/api/v2/addresses?_quantity=1";

// Initializing a query parameter and convering it to string
const queryParam = {
  _country_code: "en_CA",
};

const queryStr = new URLSearchParams(queryParam).toString();

// API endpoint + query parameter
const addressUrl = `${apiUrl}&${queryStr}`;

async function fetchAddress() {
  try {
    const response = await fetch(addressUrl);
    // Check if response is successful
    if (!response.ok) {
      throw new Error(`Network error. Status: ${response.status}`);
    }
    const addressData = await response.json();
    console.log(addressData);
  } catch (error) {
    console.error("Error:", error);
  }
}

fetchAddress();

The result is a randomly generated address as shown below:

Using await fetch(addressUrl); removes the need to add multiple .then() methods.

Also, the await response.json(); pauses code execution until the response body is parsed to JSON.

Error Handling

(Source: Gemini)

Checking for errors when fetching data helps you identify potential issues that may make your app crash. The try/catch block helps identify any errors when fetching requests and parsing the response. However, some HTTP error codes require you to log them manually.

Here’s a recap of how we can catch errors in various sections of our code:

So, how exactly does each code block help catch errors?

The if(!response.ok) code block checks for response status in the 200 to 299 range; otherwise, it logs an error.
The throw new Error(); logs a custom message when the response fails.
The catch() block handles invalid responses and network issues.

Conclusion

In this article, we have covered key concepts on using the Fetch API to make network requests. We have also seen how to use async/await to make code more readable, and how to handle errors using try/catch and response.ok.

I hope this article has been of help to you.

Thanks for reading. Keep building! 🌟

References

Setting Up Material for MkDocs in Linux

Jan — Thu, 03 Jul 2025 09:00:08 +0000

When crafting documentation using the Docs-as-code approach, authors often use plain-text formats such as Markdown.

One popular tool for rendering Markdown is MkDocs, a static site generator for project documentation.

With MkDocs you can easily host your site on platforms like Netlify, GitHub Pages, GitLab Pages, just to mention but a few.

In this article, we will focus on Material for MkDocs a powerful documentation framework built on top of MkDocs.

We will go through the setup process with installations done using pip, the Python package manager and Docker.

Before we get started here are some few things you will need:

Prerequisites

You need to have:

Installed a recent version of Python
Installed Python package manager, pip

Note that if you are not familiar with Python, you can still install Material for MkDocs with Docker.

Project Setup

We will begin our project setup using pip. If you plan on using Docker you can skip to the section below.

Installation with Pip

Material for MkDocs is published as a Python package. Therefore, you can install it with pip, ideally using a virtual environment.

Let's begin by setting up a virtual environment.

Create a Virtual Environment

Initializing a virtual environment is important especially if you want to keep the dependencies of different projects separate.

With a virtual environment, you can create an isolated Python interpreter for your project. This way, it's easy to avoid potential issues caused by updating libraries used by your system tools.

Additionally, with a virtual environment, your teams can work in the same environment thus maintaining consistency across development and deployment.

To create a new virtual environment, open your terminal and navigate to your project directory.

Use the built in venv module to set up a Python virtual environment called venv.

To do so, run the following code:

python -m venv venv

Next, activate your virtual environment by running:

source venv/bin/activate

Now you can install MkDocs material using pip with the following command:

pip install mkdocs-material

The above command lets you automatically install all dependencies including:

MkDocs
Markdown
Pygments
Python Markdown Extensions

Installation with Docker

Opting for Docker for Material for MkDocs installation means that all dependencies come pre-installed.

You get the following plugins bundled with the Docker image:

Use the Docker image to get started. Pull the image with:

docker pull squidfunk/mkdocs-material

However, note that the docker container is not suitable for deployment but for previewing purposes only.

(Source)

Setting Up Your Site

Now you can use the mkdocs executable to bootstrap your project documentation.

Proceed to open your project folder in VS Code. Before anything, make sure you have activated your virtual environment.

Now open the terminal within VS Code and run:

mkdocs new .

If you are running MkDocs from within Docker, use:

docker run --rm -it -v ${PWD}:/docs squidfunk/mkdocs-material new .

You will create a folder structure like the one illustrated below:

.
├─ docs/
│  └─ index.md
└─ mkdocs.yml

Now, to startup your new website run:

mkdocs serve

This is how your site should look like:

Configuration

Since the MkDocs site looks a little bland, the next step is to setup Material theme for an even better look.

Material Theme

In order to load material theme on your docs site, go to the mkdocs.yml file and set the following configurations and save the changes.

The result is a more cleaner and proffessional-looking static site.

Conclusion

In this article, we have covered the steps needed to setup an MkDocs site with the Material Design theme. Now you can create more seamless documentation for your commercial or open source projects.

Thanks for reading. Keep building! 🌟

References

Installing Android Studio On Ubuntu 22.04: Complete Guide

Jan — Tue, 04 Apr 2023 13:08:42 +0000

Are you new to Android Development? And do you want to learn how to setup your Integrated Development Environment (IDE) for building your projects? Then you are in the right place!

Android Studio is the official IDE for developing Android apps. It comes with powerful features that help you build your applications faster and easier.

For Linux users, this guide will take you through the nitty gritty of getting your IDE setup. Let's get started!

System Requirements

Since we are setting up on Linux, here are the system requirements as listed on the Official download page for Android Studio:

x86_64 CPU architecture; 2nd generation Intel Core or newer, or AMD processor with support for AMD Virtualization (AMD-V) and SSSE3.
Any 64-bit Linux distribution that supports Gnome, KDE, or Unity DE; GNU C Library (glibc) 2.31 or later.
A minimum 8 GB of available disk space for your IDE, Android SDK and the Android Emulator.
8 GB RAM or more.
1280 x 800 minimum screen resolution.

If your computer meets these requirements then let's get started with the installations.

Method 1:Manually Installing Android Studio (From the Official & PPA Repositories)

Installing From the Official Repository

You can install Android Studio from the official repository. To begin, open up your terminal and then update and upgrade your APT repository by running the command below:

$ sudo apt update
$ sudo apt upgrade

Then install OpenJDK, a free and open-source implementation of the Java platform, Standard Edition (Java SE). To do so run:

$ sudo apt install openjdk-18-jdk

Now you can proceed to install your IDE by downloading a zip file of the latest version of Android studio on your machine.

At the time of writing this article, the latest version of Android Studio is the Electric Eel version. Run:

$ wget https://dl.google.com/dl/android/studio/ide-zips/2022.1.1.21/android-studio-2022.1.1.21-linux.tar.gz

or you can check for the version you want from the Android Studio Download archive

After successful download, you need to unpack the downloaded zip file with:

$ tar -zxvf android-studio-2022.1.1.21-linux.tar.gz

Then move the android-studio folder to /opt/ using:

$ sudo mv android-studio /opt/
$ sudo ln -sf /opt/android-studio/bin/studio.sh /bin/android-studio

Once you have run these commands, you will write a snippet of code to allow for the Android Studio application to be available on the application menu shortcut on Ubuntu.

Using this command:

$ sudo nano /usr/share/applications/android-studio.desktop

Add the following code snippet and save:

[Desktop Entry]
Version=1.0
Type=Application
Name=Android Studio
Comment=Android Studio
Exec=bash -i "/opt/android-studio/bin/studio.sh" %f
Icon=/opt/android-studio/bin/studio.png
Categories=Development;IDE;
Terminal=false
StartupNotify=true
StartupWMClass=jetbrains-android-studio
Name[en_GB]=android-studio.desktop

From there you can open and run your android studio from the activities or on the applications menu.

Uninstalling Android Studio - Official Repository

If you installed Android Studio from the Official repository, run the following commands to uninstall the IDE:

$ sudo rm /usr/share/applications/android-studio.desktop
$ sudo rm -r /usr/bin/android-studio
$ sudo rm -rf /opt/android-studio
$ rm -rf ~/android-studio-2022.1.1.21-linux.tar.gz

This will completely uninstall all the packages that were installed.

Installing Android Studio From the PPA Repository

You can also get your IDE from the PPA repository - an Ubuntu based software repository. To begin install OpenJDK:

$ sudo apt install openjdk-18-jdk

Check to see the java version installed above:

$ java -version

Then import PPA and update your APT repository using:

$ sudo add-apt-repository ppa:maarten-fonville/android-studio
$ sudo apt update

Once complete, you can install Android Studio through:

$ sudo apt install android-studio -y

Uninstalling Android studio - PPA repository

If you need to remove Android Studio from your machine, run:

$ sudo apt autoremove android-studio --purge -y

Then remove the imported PPA using:

$ sudo add-apt-repository --remove ppa:maarten-fonville/android-studio -y

With this, Android Studio and all the installed packages will have been removed completely

Method 2: Installing Android Studio Using Snap

Another way you can use to install Android Studio is by using Snap - a package management system by Canonical. To do so, first run:

$ sudo apt install snapd

Then install OpenJDK and Android Studio using:

$ sudo apt install openjdk-18-jdk
$ sudo snap install android-studio --classic

Once done, proceed to launch Android Studio by running:

$ android-studio

Uninstalling Android Studio - Snap

Removing Android Studio installed using snap is quite easy. You simply need to run:

$ sudo snap remove android-studio

Method 3: Installing Android Studio Using JetBrains Toolbox

The third method you can use to install Android Studio is by using the Toolbox app which gives you access to developer products made by Jetbrains.

If you don't know how to install Toolbox, here is a guide on how to.

Once you have Toolbox on your machine, click to open it, then select Android Studio and click install. You will get the latest version of the IDE installed in your machine.

If you prefer to install a specific version of Android Studio, you can check the available versions and install the one you prefer.

Uninstalling Android Studio - Jetbrains Toolbox

To remove Android Studio just open the Toolbox App and click the menu button adjacent to Android Studio option to see an uninstall option.

This will remove Android Studio and all the packages that were installed with it.

With that, you can select whichever method suits you and get your IDE setup.

Bonus Tip: Using Wakatime For Your Coding Productivity!

Enhancing your productivity while coding means that you can get more done and build better software. One such plugin that can increase your productivity is Wakatime.

Wakatime is used for time tracking meaning you can manage and analyze how much time you spend coding daily. In the spirit of building in public, Wakatime can help you share your metrics on Twitter or LinkedIn.

What's more, you can include your programming metrics on your Markdown file on Github. Once you have installed Android Studio, head over to Settings/plugins and search for Wakatime.

Install it and restart your IDE, then go ahead and change the world one minute at a time!

References

Android Studio download archives
Latest version of Android Studio
Ubuntu-Server.com

Conclusion

In this guide we have covered three ways of installing the Android Studio IDE. Properly setting up your IDE allows you to develop your applications smoothly with no bumps. I hope this article has been of help to you.

Thanks for reading. Keep building! 🌟

Installing JetBrains ToolBox on Ubuntu

Jan — Tue, 21 Mar 2023 13:46:23 +0000

If you need an easier way to install JetBrains products such as IntelliJ IDEA, Android Studio, PyCharm, or PhpStorm, etc, you can do so using their Toolbox.

JetBrains developed their own tool called the JetBrains Toolbox to assist developers in installing and updating any of their products. The Toolbox is free to use and comes with the option of managing your licenses.

In this tutorial, we will focus on the installation process of Toolbox, how to install applications, how to configure it, and how to uninstall it from your machine. Let's get to it!

System requirements

Before you install JetBrains Toolbox on your machine, here are the system requirements:

Linux : 64-bit x86, glibc (Ubuntu 18.04 or newer).
You also require the following packages to start the JetBrains Toolbox: libfuse2 libxi6 libxrender1 libxtst6 mesa-utils libfontconfig libgtk-3-bin

Note: JetBrains Toolbox is packed in AppImage and requires FUSE to run.

Installing Jetbrains Toolbox

To begin installing Toolbox, go ahead and visit the official site and download the archived installer.

You can also opt to use the terminal to retrive the installer, run:

$ wget -c https://download.jetbrains.com/toolbox/jetbrains-toolbox-1.27.3.14493.tar.gz

Then proceed to extract the toolbox installer using:

$ sudo tar -xzf jetbrains-toolbox-1.27.3.14493.tar.gz -C /opt

Once complete, you can go ahead and open Jetbrains Toolbox to start installing the applications you want.

On the terminal, run:

$ /opt/jetbrains-toolbox-1.27.3.14493/jetbrains-toolbox

In some instances, you might get a failure message about a missing FUSE2. If this happens, proceed to manually install it using the:

$ sudo apt-get install -y libfuse2

After successful installation, the next step is configuring your Toolbox and installing applications.

Configuring JetBrains Toolbox and Installing Applications

Configurations

The Toolbox comes with several settings options for its users. Select the settings option and your screen should look like this:

ToolBox lets you login to your JetBrains account and manage your licences.

You can also disable the option to launch on system startup. To do so, click the settings option as shown above or press Ctrl + Comma. On the settings menu, uncheck the "Launch Toolbox App at system startup."

Also, you can toggle your theme settings by selecting between Light, System and Dark themes.

If you want to change the installation path for any applications installed using Toolbox, select the dropdown Tools then edit the "Tools install location" option to your desired path.

In addition, Toolbox lets you save on disk space. To enable this option, still under the Tools dropdown, turn off "Keep previous versions of tools to enable instant rollback."

Installing Applications

You can install different applications/Integrated Development Environments(IDEs) from the Jetbrains Toolbox.

All you have to do is go to the tools menu option which is also the home page when you launch the toolbox.

Scroll down to discover any IDEs that may be of use to you then click Install.

You can also uninstall or revert to different versions of an application, as shown in the menu options below.

How to Uninstall Jetbrains Toolbox

Suppose you want to remove Toolbox from your machine. First, you need to uninstall all applications installed in Toolbox App.

Once done, uncheck 'Run at login' in Toolbox App settings or do so using the terminal using:

$ ~/.config/autostart/jetbrains-toolbox.desktop

Next, exit the Toolbox App, and on your terminal, run the following commands:

$ rm -rf ~/.local/share/JetBrains/Toolbox
$ rm -rf ~/.local/share/applications/jetbrains-toolbox.desktop

That is it; you will have successfully uninstalled toolbox!

References

Toolbox App Support

Conclusion

In this article you have learnt how to:

Install the Jetbrains Toolbox App,
Configure the Toolbox app to your preferences,
Install Jetbrains Applications using the Toolbox,
And uninstalling Toolbox.

You can use this app to get access to latest versions of Jetbrains products including Android Studio, IntelliJ IDEA, Pycharm and many more.

With Toolbox App, you can easily revert or upgrade to different versions at the click of a button, hence you can focus on building in an updated IDE.

Thanks for reading. Keep building! 🌟

Setting up a Django Project On Ubuntu 22.04 - Beginners Guide

Jan — Mon, 06 Mar 2023 15:47:06 +0000

Django is a python-based web framework that follows the model-template-views (MTV) architectural pattern. It comes with ready-made components to use, and you can build versatile and scalable web applications with it.

But how do you setup your Django project, and if you are using Ubuntu, what are the recommended installation packages needed?

By the end of this guide you will learn how to:

Set up a virtual environment.
Install Python and Django.
Set up a Django project from scratch.
Set up Django apps.

Prerequisites

Before you begin setting up your new Django project, here are a few prerequisites that are needed. You should have:

Basic knowledge of how to use the terminal.
Knowledge of how to install software packages.

With that said, here are the steps you need to follow to set up your Django project.

Step 1 - Setting Up Your Environment

Installations

There are several installations required for you to successfully start a Django project. They include: Python, Pip and Virtualenv.

Below you will find guidelines on how to install each one of them.

Python

Since Django is a python-based web framework, the first thing you need to do is check if Python is installed on your machine.

Open up the terminal and ensure that you are the root user.

If you have previously installed python on your machine, type the following command to check the version available.

$ python3 -V

Otherwise, you can begin by installing the latest version of python. Start by updating and upgrading your APT repository:

$ sudo apt-get update
$ sudo apt-get -y upgrade

Once complete, install the latest version of python:

$ sudo apt-get install python3

Check to see the version of python your machine is currently running.

$ python3 -V

Pip

The next step is to set up pip, a Python-based package manager. To get the latest version of pip:

$ sudo apt-get install -y python3 pip

Check the version of Pip installed using this command:

$ pip3 -V

Once you have Python and Pip, you can now install your virtual environment and setup your Django project.

Virtual environment

A virtual environment is a Python tool for managing dependencies and isolating projects.

It enables local installation of Python site packages (third-party libraries) for a specific project as opposed to global installation.

To set up a virtual environment:

$ pip3 install virtualenv

After successful installation, you can check the version using:

$ virtualenv --version

Preparing Your Environment

To begin preparing your environment for your Django project, navigate to a folder that holds any/all of your projects.

For the sake of this tutorial, our projects folder is found on the desktop.

Change the directory to the project folder.

~$ cd Desktop/projects

Then create a new folder for your Django project and navigate into it. You will name your Django project folder however you please. Here we will use blogSite/.

~/Desktop/projects$ mkdir blogSite
~/Desktop/projects$ cd blogSite

Next, set up a new virtual environment. You can call your virtual environment env. To set up a virtual environment:

$ virtualenv env

Then activate the virtual environment:

$ source env/bin/activate

You will see the (env) prefixed on the path to your current directory. If you wish to deactivate the virtual environment:

(env)$ deactivate env

To know that the deactivation has worked, you will no longer see the (env) prefix on your path.

Step 2 - Installing Django and Dependency Pinning

Next,you will proceed to install Django and setup your project.

Django is a high-level Python web framework that promotes rapid development and pragmatic design.

Django comes with ready-made components to use, allowing you to focus on the development of your web applications rather than the underlying infrastructure.

To install Django:

(env)$ python3 -m pip install django

You should see this after successful installation.

Next, pin your dependencies to a requirements.txt file.

This allows you and other developers to replicate the exact conditions of your project build.

Type the following command on your terminal:

(env)$ python3 -m pip freeze > requirements.txt

Your directory should now be looking like this:

Note: To install a specific version of Django add the version number to the installation command:

(env)$ python3 -m pip install django==4.1.7

Also, if you want to install dependencies from a pre-existing project use:

(env)$ python3 -m pip install -r requirements.txt

Step 3 - Project Setup

A Django project is a high-level unit of organization for a collection of configuration apps for your website. Your Django project can have multiple apps.

In this section, you will make a skeleton Django website. As mentioned above, Django already comes with ready-made components to use.

To begin with, start a new project called myBlog. This will create a myBlog/ folder on your current directory.

(env)$ django-admin startproject myBlog

Then change your directory to the newly created project/folder by running the following command:

(env)$ cd myBlog/

Note: Do not name your projects after built-in Django/Python components such as Django.

The startproject command created:

Here is a run down of the files and folders in the myBlog/ directory/folder.

myBlog/ - acts as the container for your projects and can be renamed.
manage.py - it is a command line utility that lets you interact with Django. With manage.py you can create apps, work with databases and start the development server.
myBlog/ - this is the actual python package for your project. You will use the package name myBlog for importing anything you need in your project.
__init.py__ - it is an empty file that tells Python that this directory should be considered a Python package.
settings.py - this file contains details on database configuration, location of your project's static files and it is where you register any applications (apps) made.
urls.py - this file acts as a Table of Contents for your project. You can make URL declarations and define the site's URL-to-view mappings on this file.
asgi.py - acts as an entry point for ASGI-compatible web servers to serve your project.
wsgi.py - acts as an entry point for WSGI-compatible web servers to serve your project.

Step 4 - Powering Up the Development Server

Next, you need to learn how to power up the development server for your new myBlog project/site.

To power up your new Django project development server, run:

(env)$ python3 manage.py runserver

If your project is running successfully you will see:

You will also see a warning indicating that there are unapplied migrations.

Ignore the unapplied migrations warning and proceed to open the development server on the port http://127.0.0.1:8000/.

To exit the development server on your terminal use Ctrl + C

Step 5 - Creating Your First App

Now that you have already set up your environment and created your Django project, you can proceed to set up your first app.

A Django app is the low-level unit of your web application. You can create your app anywhere on the Python path.

However, the best practice is to have all the apps of your project in the same directory as manage.py.

This means that your app will be imported as its own top-level module rather than a submodule of your project.

Therefore, ensure you are in the same directory as manage.py then type:

(env)$ python3 manage.py startapp newsPage

This command creates a newsPage/ directory with the following structure:

Django auto-generates the basic directory structure of the newsPage app.

Most of these files and folders are named after their intended purpose.

Let us take a look at what each of these files are meant for.

newsPage/ - actual app folder.
__init__.py - this file allows Django to use code from different apps to compose the overall functionality of your web application.
admin.py- this file is where you will do the admin site configuration.
apps.py- file meant for application registration.
migrations/- folder that stores migrations files.
migrations/__init__.py - is a migration file that allows you to update your database automatically as you change your models.
models.py- file where all you will design all your models. This file contains code that allows Django to communicate with your web application's database.
views.py- this is the file that houses most of the web app's code logic.

With this, you have already built a skeleton web application with Django, the next step is to build your site's views, models and migrate your databases. For more guidance on creating views, models, and URL interlinking, read more from the Official Documentation.

References

Django official Documentation
MDN Web Docs
Real Python

Conclusion

In this article, you have learned:

How to prepare your environment and perform the necessary installations
How to set up a Django project from scratch
How to power your development server
And how to create your first Django app.

We have covered all the steps necessary to get a Django web app up and running. You can go ahead and find and project idea you like and implement it. Django is a powerful web framework for those who want to build fast.

Thanks for reading. Keep building! 🌟