DEV Community: Stephen Omoregie

The Day I Became Certified as a Full Stack Software Developer: Bragging Rights Article Haha

Stephen Omoregie — Fri, 13 Sep 2024 19:30:25 +0000

Officially a Certified Full Stack Software Developer.....yaaaay!

Thanks to African Leadership Experience (alx_africa ) for giving me and thousands of other Africans the platform to grow as part of the professionals that will build a new workforce of hardworking, innovative and competent Software Engineers who will build the future of Tech Solutions in Africa and the world.

Cheers to my peers, great friends turned family and the amazing staff of ALX who in one way or the other held our hands, inspired our hearts and believed in our potentials to achieve great things even if it requires us to do hard things.

The discipline was not "beans" 😂, we had to put in serious 70-100hrs a week, learning concepts and being tested on them, solidifying our problem-solving skills, learning soft skills like teamwork, communication, writing, learning how to research and debug personal code and code written by others!

You can check out my GitHub which is a perfect testimonial of how we were trained on diverse technology to creating full stack solutions: https://github.com/Cre8steveDev

Oh, I like writing too, and I was able to discover my passion for the technical writing niche too:
https://dev.to/cre8stevedev

And if you'll like a sneak-peak of my portfolio, where I highlight some of my projects😁:
https://cre8stevedev.me/

Beyond my passion for seeing my code come to life in solving a problem, I equally believe in maximizing developer experience and productivity, this lead me to building open source projects:

Yes, I've been a busy and resourceful bee - passion cannot be silenced by circumstance 😊.

Checkout the sections below for a throwback to some weird projects I built from the early stage of my learning with basic HTML, CSS and JavaScript - they look funny now, but man, was I so proud of them then.🤣🤣

But today, I'm signing out as a Full stack Software Developer with demonstrable proficiency across Web and Mobile Development using: JavaScript (React, NextJS, React Native-Expo, Node-ExpressJs), Python (Flask) and Databases (MongoDB, PostgreSQL).

Thank you, thank you, thank you!!! And hey, if you have an open role in your team, I'd be more than happy to join you in building the future!

Throwback to the early stages of my learning. Don't even try to laugh 🤣 😂

Ofcourse, these will not impress anybody, nor is that the idea. But maybe it might inspire someone out there to keep building, keep learning...one day you'll look back and be proud of your growth.

Project Starter Kit: Neon Postgres Database + ExpressJs + TypeScript and TypeORM + CLI Tool

Stephen Omoregie — Wed, 28 Aug 2024 19:30:45 +0000

This is a submission for the Neon Open Source Starter Kit Challenge : Ultimate Starter Kit

My Kit

This starter kit implements major CRUD Operations that you can leverage for quickly scaffolding your own models and database operations for any Back-end Project you're undertaking. From entity definition (Models), relationship, database configuration and initial setup with Jest - just write your test and hit npm run test.

Whether you're a beginner looking for a quick start to work with the powerful combination of TypeScript + TypeORM + Neon Postgres + ExpressJs or an experienced developer, this is the Swiss knife of all starter kits.

Link to Kit on GitHub

https://github.com/Cre8steveDev/Neon_Postgres_Express_TypeScript_TypeORM_Starter_Kit/
You can find the Kit here on GitHub with a detailed guide on how to use it. The Code base is properly documented to also serve as a reference guide to boost your productivity.

CLI Tool (Npm Package)

https://www.npmjs.com/package/neon-express-typeorm
If you prefer to use the command line to quickly bootstrap your project, choosing the full kit or a basic setup, then you're welcome to use the cli tool.

npm i -g neon-express-typeorm

My Journey in Setting Up This Kit

I've recently taken up writing guides/reusable code snippets for the tech stack and tools I use and explore. I've found this to be quite helpful in improving the time spent in finding a reference for future projects that implement/use the same features/tools.

It was fun creating this Starter Kit for ExpressJS + TypeScript + to explore the features offered by the Neon team's PostgreSQL Database using TypeORM. This meant, I had to spend a lot of time researching on the TypeORM documentation to ensure I follow best practice in delivering this kit to the Open Source community.

The phrase "Versioning your database like Code" has stuck in my mind since I read up on the features offered by Neon for their Postgres Database. Phew! Now, the interns won't push breaking changes to the Production Database haha. Just kidding.

You can find a Code documentation/debugging tips to see some errors I encountered in the early stage of setting up the Kit and the solutions I researched to fix it - in case you encounter same.

Otherwise, the starter kit has been tested and ready for you to craft magic! Future update, an interactive command line tool to customize the kit based on your project needs.

Till then, Happy Coding!

Practical Guide to Set Up Multiple NodeJS Apps on AWS EC2 Instance with Automatic Deployment using GitHub Actions (Screenshots)

Stephen Omoregie — Sat, 24 Aug 2024 09:38:20 +0000

Introduction

First of all, this is a verrrrrryyyyy loooooooooonnng epistle. Feel free to skim through to get the gist, and then come back again when you need to use it for a project.

In this guide, I'll be as detailed as possible guiding you step by step on setting up your EC2 Instance, your code repository up to testing your deployment. Bookmark! Let's go!

Setting Up an EC2 Instance on AWS.

Navigate to the EC2 dashboard.

Click on "Launch Instance" to create a new EC2 instance.

Choose an Amazon Machine Image (AMI) (We'll use an Ubuntu Server AMI for this setup).

Select an instance type based on your resource needs (e.g., t2.micro for testing or t2.small/medium for production).

Create a key-value pair (use RSA) and store the file in a secure location on your PC. You'll be needing it for SSH Access later.

Select appropriate network settings for your instance.
You can choose to allow access to your instance from anywhere (this is not recommended though - use your IP Address, or add a custom IP address from whence you can ssh into the instance).

Allow SSH access (port 22) from your IP address.
Allow HTTP (port 80) and HTTPS (port 443) from anywhere.

Set up storage as needed for your project: Free-tier eligible instances can get up to 30GB storage. So let's just stick with 8GB for now.

Advanced details? There's a bunch of stuff under that section. You can read up on that to know if you would want to modify any of the default settings.

Review (Some weird JSON stuff, haha) and then Launch your Instance

Click on Connect To Your Instance for the Next Steps

Take note of your public IP and username (ubuntu), you can use the ssh command to get into your instance via your PC:

ssh -i /path/to/your-key-pair.pem ubuntu@your-instance-public-ip

Or just use the browser-based console by clicking on Connect To Instance

Browser-based Console. Yaaaaay! We're in.

Setting Up the Environment

We'll make the most of the web console provided to us on the AWS platform to access our launched instance.

*Update the system packages *

sudo apt update && sudo apt upgrade -y

Install Node.js and Node Package Manager (npm)

curl -fsSL https://deb.nodesource.com/setup_lts.x | sudo -E bash -
sudo apt-get install -y nodejs

*Install Git for Version control - I mean, why not! *

sudo apt install git -y

Install PM2 globally (A process manager for managing multiple Nodejs application on the same machine).

sudo npm install pm2@latest -g

Install and enable Nginix for reverse proxying

sudo apt install nginx -y
sudo systemctl start nginx
sudo systemctl enable nginx

Create a directory on the home (~) path where we'll house our different app source code.

mkdir ~/apps
cd ~/apps

The steps above will help us prepare our instance with the necessary software to run the Node.js applications and set up a reverse proxy for routing requests. Now, to the next step

Configuring Nginx as a Reverse Proxy

Remember, web requests are sent over HTTP/HTTPS which connect to your port 80/8080/443. With your node applications running on other non-web-ports, we'll need a web server like Nginix that will "forward" all HTTP requests that hits our server to the appropriate ports where the application we want to interact with is running - this is a better approach than exposing your other ports directly to the internet.

Create a new Nginix Configuration file
Let's create a file where we'll store the configuration for proxying all requests to our applications using the server name (your domain or you can use your instance's Public IP Address in the meantime).

sudo nano /etc/nginx/sites-available/nodejs-apps

server {
    listen 80;

    # This server block will server our apps on the same domain 
    # If you have multiple apps serving multiple domains you can 
    # create a new server block for that domain and the set up is 
    # pretty much the same.

    server_name 00.00.99.40; # Your domain or public IP here

    location /app1 {
        proxy_pass http://localhost:3001/;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }

    location /app2 {
        proxy_pass http://localhost:3002/;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
}

Paste the configuration above and modify accordingly. You can delete the default configuration file in /etc/nginx/sites-enabled/default so that it doesn't take precedence over your configuration or modify it accordingly.

Note: make sure the trailing / after the http://localhost:3001/ remains. This instructs nginx to strip off the /app1 and /app2 for example when forwarding the route to your node server.

Enable the new configuration file

sudo ln -s /etc/nginx/sites-available/nodejs-apps /etc/nginx/sites-enabled/

Test the configuration to ensure the your settings are valid.

sudo nginx -t
sudo systemctl reload nginx
systemctl status nginx

And we're all set. Let's get our code in here.

Set up GitHub repositories and clone your applications

For each of your Node.js applications, create a separate GitHub repository if you haven't already. I have created a very simple NodeJS Application that we'll be deploying for testing purposes.

You can find them here:

Navigate to the apps directory we created earlier in ~apps

cd ~/apps

Clone each of your repositories (First add your SSH Keys on Github)
Generate an ssh key to set up SSH Authentication for your ec2 instance on Github.

ssh-keygen -t rsa -b 4096 -C "your_email@example.com"
cat ~/.ssh/id_rsa.pub

Just hit enter for the prompts. Copy the code displayed by the cat command, and add it to your SSH Keys on github.

git clone git@github.com:Cre8steveDev/Deploying_Multiple_Node_App_001.git
git clone git@github.com:Cre8steveDev/Deploying_Multiple_Node_App_002.git

For each application, navigate to its directory and install dependencies

cd Deploying_Multiple_Node_App_001
npm install
cd ../Deploying_Multiple_Node_App_001
npm install
# If you're deploying more apps, do the same for all

Create a .env file for each application if needed, to store environment-specific variables. In our case, we're storing the PORT number in the .env, so we'll do that for each of the cloned directory:

echo "PORT=3001" > .env
# and the appropriate port for the others

Test each application to ensure it runs correctly (If you're following the sample server code provided, you can build the project with):

npm run build # Convert typescript to js 
npm run start # Run the server from the dist directory

Set up PM2 to manage your Node.js applications

Create a PM2 ecosystem file to manage all your applications

cd ~/apps
pm2 ecosystem generate nodejs-apps

Open the generated ecosystem.config.js using your favourite editor: nano or vim or emacs - no vscode here haha

Here's an example configuration for serving both our applications. It's quite explanatory.

module.exports = {
  apps: [
    {
      name: "Node_App_001",
      script: "./Deploying_Multiple_Node_App_001/dist/index.js",
      env: {
        NODE_ENV: "production",
        PORT: 3001
      }
    },
    {
      name: "Node_App_002",
      script: "./Deploying_Multiple_Node_App_001/dist/index.js",
      env: {
        NODE_ENV: "production",
        PORT: 3002
      }
    },
  ]
};

Now, start all your applications using PM2 command, on the ~/apps directory

pm2 start ecosystem.config.js

Set up PM2 to start on system boot

pm2 startup systemd

Follow the instructions provided by the command to complete the setup - basically, copy the bash command, that is displayed, paste and hit enter.

Save the current PM2 process list

pm2 save

This step ensures that your Node.js applications are managed efficiently and will restart automatically if the EC2 instance reboots.

Set up automatic deployment using GitHub Actions

Step 1: In each of your GitHub repositories, create a new directory for GitHub Actions - You can do this via your code editor (Not on your server. Your local machine - where you work on your codebase ):

mkdir -p .github/workflows

bash
Create a deployment workflow file in each repository

nano .github/workflows/deploy.yml
# You can use your editor of course.

Step 3: Add the following content to the deploy.yml file (Make sure to customize for each application/repository - paying special attention to the last 5 lines where you define the name of the directory for each application and the command to run after each pull of new updates from GitHub). The file below is for the App 01. modify accordingly for all the repository you intend to setup GitHub actions on.

name: Deploy to EC2 for Application Server 01

on:
  push:
    branches: [main]

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - name: Deploy to EC2 for Application Server 01
        env:
          PRIVATE_KEY: ${{ secrets.EC2_PRIVATE_KEY }}
          HOST: ${{ secrets.EC2_HOST }}
          USER: ubuntu
        run: |
          echo "$PRIVATE_KEY" > private_key && chmod 600 private_key
          ssh -o StrictHostKeyChecking=no -i private_key ${USER}@${HOST} '
            cd ~/apps/Deploying_Multiple_Node_App_001 &&
            git pull origin main &&
            npm install && npm run build &&
            pm2 stop Node_App_001 || pm2 delete Node_App_001;  pm2 start npm --name "Node_App_001" -- start && pm2 save
          '

pm2 restart Node_App_001 the Node_App_001 is the name of the app we created in the ecosystem.config.js, remember?

The secrets.EC2_PRIVATE_KEY is the key-pair .pem file we created earlier when we launched our instance. Remember, I asked you to keep it secure - If you didn't, you can create a new key-value pair on your instance console and add it on github. DO NOT Paste it directly in the deploy.yml file.

In your GitHub repository settings, go to "Secrets and variables" > "Actions" and add two new secrets:

EC2_PRIVATE_KEY: The content of your EC2 instance's private key file (copy and paste everything in the value field)
EC2_HOST: Your EC2 instance's public IP address or domain name

View the actions tab on the individual repositories to confirm

Now push these new configuration to GitHub. This step sets up automatic deployment for your applications whenever you push changes to the main branch of your GitHub repositories. The script within the run of your deploy.yml will restart the appropriate node process of your app and restart it - make sure you update it accordingly for your use case.

Update your codebase with new code, commit and push to the individual repository and check it out on your EC2 Instance to confirm that it pulled the new changes

Check the status of the github action on github

Checkout both apps running live (I will delete the instance after this tutorial - but you can see that they're being served based on the url `/app1` and `/app2`).

Take a break!

Phew! If you've made it this far, wow! If you've not had any errors, wow! wow! Haha, but I've made sure every step is covered to the letter.

Set up SSL/TLS for your domain using Let's Encrypt and Certbot

sudo apt install certbot python3-certbot-nginx -y
sudo certbot --nginx -d your-domain.com

Unfortunately, I do not have an active/free domain to show screenshots for this step. However, the process is quite easy. Just use your domain, follow the prompt and the ssl certificate will be generated for you (You'll have to renew every 90 days or so - or you can set up a script to help with that).

After generating the ssl certificate, update your nginx configuration , basically telling nginx to redirect every http call to https. This is what it would look like:

server {
    listen 80;
    server_name your_domain.com;  # Replace with your domain or IP
    return 301 https://$server_name$request_uri;  # Redirect HTTP to HTTPS
}

server {
    listen 443 ssl;
    server_name your_domain.com;  # Replace with your domain or IP

    ssl_certificate /path/to/your/fullchain.pem;  # Path to your SSL certificate
    ssl_certificate_key /path/to/your/privkey.pem;  # Path to your SSL private key

    # Additional recommended SSL settings
    ssl_protocols TLSv1.2 TLSv1.3;
    ssl_prefer_server_ciphers on;
    ssl_ciphers ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES128-GCM-SHA256:ECDHE-ECDSA-AES256-GCM-SHA384:ECDHE-RSA-AES256-GCM-SHA384:ECDHE-ECDSA-CHACHA20-POLY1305:ECDHE-RSA-CHACHA20-POLY1305:DHE-RSA-AES128-GCM-SHA256:DHE-RSA-AES256-GCM-SHA384;

    location /app1 {
        proxy_pass http://localhost:3001/;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
        #return 200 'Nginx is handling /app1 correctly';
    }

    location /app2 {
        proxy_pass http://localhost:3002/;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
}

Test the configuration to ensure the your settings are valid.

sudo nginx -t
sudo systemctl reload nginx
systemctl status nginx

And that's a wrap!

Conclusion

Thanks for reading through. I hope you find the guide helpful as you explore this adventurous ride in deploying your projects on your own VPS (AWS EC2 instance in this case) - the same idea can be implemented on any self-hosted server too. Cheers, and have fun building!

Additional Resources:

PM2 Documentation - https://www.npmjs.com/package/pm2
Github Actions Workflow - https://docs.github.com/en/actions/writing-workflows
Register for AWS Free Tier Services - https://aws.amazon.com/free/
Nginix Documentation: https://nginx.org/en/docs/beginners_guide.html

Take Note

Free Tier Limits: The AWS Free Tier offers 750 hours of t2.micro or t3.micro instances each month for the first 12 months after you sign up. This means you can run one instance continuously for the entire month without incurring charges, or you can run multiple instances as long as the total running hours do not exceed 750 (This is fine for your prototyping/hosting side projects. Hence this guide to maximize your ec2 resource).
Instance Types: Only specific instance types (t2.micro and t3.micro) qualify for the Free Tier. If you use a different instance type, you will incur charges.
Region Availability: Ensure that the instance types you want to use are available in your selected AWS region, as Free Tier eligibility can vary by region.

Practical Guide to Send Emails from NodeJS/Express App using Gmail and Nodemailer (Screenshots and Code)

Stephen Omoregie — Sat, 17 Aug 2024 10:58:50 +0000

Errrm....so no long story on today's article. Leggo!

What You'll need.

An App Password from your Google Account
A NodeJS/Express App Set Up (Do I need to say this? haha).
Packages: Nodemailer, Handlebars

Why bother? Well, you get access to free 500 sending limits per day. You can choose to upgrade to the Google Workspace account for about 2000 per day as your application grows.

Creating an App Password from Your Google Account.

Open your Google account settings (Manage Google Account), and select the security tab. Ensure you have 2-Step-Verification active, as you'll need this to be able to create an app password.

Scroll down to the screen and select App Passwords. Note: I had a weird experience not seeing that option when I was working on mine, so you can visit https://myaccount.google.com/apppasswords to open the App Password page.

If you have previously created any app Password (Note: App password is not related to your gmail/google account password - you can think of it as a token that allows you sign up from other applications e.g your nodejs server).

Enter a name (anything works, you won't use it elsewhere), then click on Create. This will open a modal with your 16-digit code - copy it and store in your .env file.

That's all.

Example .env File for configuration

GOOGLE_APP_PASSWORD="your-app-password-here"
GOOGLE_USER="your-email-address@gmail.com"
GOOGLE_SENDER_MAIL="your-email-address@gmail.com"

Install the Required Dependencies

npm install nodemailer handlebars

If you're using typescript, you should also install the types for the libraries

npm install @types/nodemailer

Quick Gist about Handlebars

It's a package that allows you create dynamic html files by providing placeholders for values that will be replaced when you compile it. Below is a simple example of a handlebar template for sending an OTP Code to a user.

<!--project_root/html/OTPEmail.hbs-->

<html lang='en'>
  <head>
    <meta charset='UTF-8' />
    <meta name='viewport' content='width=device-width, initial-scale=1.0' />
    <title>Your Title</title>
    <style>
      body { font-family: Arial, sans-serif; line-height: 1.6; color: #333;
      max-width: 600px; margin: 0 auto; padding: 20px; } .container {
      background-color: #f9f9f9; border-radius: 5px; padding: 20px; margin-top:
      20px; } .logo { text-align: center; margin-bottom: 20px; } .logo img {
      max-width: 150px; } h1 { color: #33CC66; } .otp { font-size: 24px;
      font-weight: bold; text-align: center; margin: 20px 0; padding: 20px;
      background-color: #33CC66; color: "white"; border-radius: 10px; } .footer
      { margin-top: 20px; text-align: center; font-size: 12px; color: #888; }
    </style>
  </head>
  <body>
    <div class='container'>
      <div class='logo'>
         <img src='https://yourwebsite.com/logo.png' alt='Joobz Logo' />
      </div>
      <h1>Welcome to Your_App!</h1>

      <!-- NOTE: USE DOUBLE CURLY BRACES TO WRAP THE VARIABLE. Dev.to is not letting me do so and remove this comment -->
      <p>Hello {username},</p>
      <p>To complete your registration,
        please use the following One-Time Password (OTP) to verify your email
        address:</p>

     <!-- NOTE: USE DOUBLE CURLY BRACES TO WRAP THE VARIABLE. Dev.to is not letting me do so  and remove this comment-->
      <div class='otp'>{otpCode}</div>
      <p>This OTP is valid for the next 5 minutes. If you didn't request this
        verification, please ignore this email.</p>
      <p>If you have any questions or need assistance, please don't hesitate to
        contact our support team.</p>
      <p>Best regards,<br />The Joobz Team</p>
    </div>
    <div class='footer'>
      <p>This is an automated message, please do not reply to this email.</p>
      <p>&copy; 2024 Your App. All rights reserved.</p>
    </div>
  </body>
</html>

The dynamic values are wrapped inside double curly braces - username and otpCode. They will be replaced when the code runs.

Setting Up Reusable Functions For Loading the Template, Configuring Nodemailer and Sending Mails.

You'll likely be sending more than one type of email to your users, and you'll also likely have many handlebar templates to use within your html directory.

So the codes below will help us handle that scenario. We'll be creating everything inside the utils/handleSendEmail.ts file in your project root so we can export it as the default and use anywhere. (You can adjust based on your project structure.

Import your environment variables and other required packages

import * as Handlebars from 'handlebars';
import { readFileSync } from 'fs';
import * as path from 'path';
import { GOOGLE_APP_PASSWORD, GOOGLE_SENDER_MAIL, GOOGLE_USER } from '../config';
import * as nodemailer from 'nodemailer';

First, let's define the main function that will call the other utility functions

Set up a function that will load your html template and convert it to html string

/**
 * main - Default export function 
 * @param template - Provide the name of the template stored in the html directory. Do not include the .hbs extension
 * @param recipient - Email Address of recipient.
 * @param subject - Subject of the Email
 * @param data - Data that will be compiled into your handlebars template (based on the placeholders).
 * @returns - HTML String or Empty string on error.
 */
async function main(template: string, recipient: string, subject: string, data: any) {
  const html = await readHtmlTemplate(template, data);

  if (html === '') {
    console.log('UNABLE TO READ TEMPLATE FILE');
    return;
  }
  sendEmailMessage(recipient, subject, html);
}

export default main;

Utility function that will load your html template and convert it to html string

const readHtmlTemplate = async (templatename: string, data: any) => {
  try {
    // Adjust based on your project file structure
    const templatePath = path.join(__dirname, '..',
      'html', `${templatename}.hbs`);
    const htmlSource = readFileSync(templatePath, 'utf-8');
    const template = Handlebars.compile(htmlSource);
    const html = template(data);

    return html;
  } catch (error) {
    console.log('ERROR READING TEMPLATE: ', error);
    return '';
  }
};

Utility Function that sets up the transporter object and sends the mail using the parameters passed in the main driver function (First function above).

const sendEmailMessage = async (recipient: string, subject: string, html: string) => {
  // Define transporter
const transporter = nodemailer.createTransport({
  service: 'gmail',
  secure: false, //To use TLS
  auth: { user: GOOGLE_USER, pass: GOOGLE_APP_PASSWORD,},
});

  // Define Mail Options
  const mailOptions = {
    from: GOOGLE_SENDER_MAIL,
    to: recipient,
    subject: subject,
    html: html,
  };

  //   Send Mail with the transporter
  transporter.sendMail(mailOptions, (error, info) => {
    if (error) {
      console.error('Error sending email: ', error);
    } else {
      console.log('Email sent: ', info.response);
    }
  });
};

And that's it. Remember to export the main function as teh default export for the module.

export default main;

Now, to use the function, all you have to do is, import it wherever you need it, and pass the required parameters.
Example:


import { Request, Response } from 'express';
import { User } from '../models/User'; 
import { generateOTP } from '../utils/otpGenerator';
import handleSendEmail from '../utils/emailService'; 

export const registerUser = async (req: Request, res: Response) => {
  try {
    const { fullName, email, password } = req.body;

    // Check if user already exists
    const existingUser = await User.findOne({ email });
    if (existingUser) {
      return res.status(400).json({ message: 'User already exists' });
    }
    // Create new user
    // ofcourse you'll hash your password first
    const newUser = new User({fullName, email, password});

    // Generate OTP
    const randomOTP = generateOTP();
    newUser.otp = randomOTP;
    newUser.otpExpires = new Date(Date.now() + 5 * 60 * 1000); // OTP expires in 5 minutes

    // Save user
    await newUser.save();

    // Send OTP to user via Email
    await handleSendEmail('OTPEmail', email, 'Verify OTP ✅', {
      username: fullName.split(' ')[0],
      otpCode: randomOTP,
    });

    res.status(201).json({ 
      message: 'User registered successfully. Please check your email for OTP verification.',
      userId: newUser._id
    });
  } catch (error) {
    console.error('Registration error:', error);
    res.status(500).json({ message: 'Error registering user' });
  }
};

Code in Action (As Used in my project)

Conclusion

Phew, that's a lot. I Hope you find the guide useful, simple and straight-forward in setting up Gmail and Node Mailer for your project.

Happy Coding guys, and till the next article. Keep learning.
Let's connect on twitter: https://x.com/Cre8steveDev

Cre8steveDev

Practical Guide to Implementing Functional SEO in NextJS App Router: Static & Dynamic Metadata

Stephen Omoregie — Tue, 30 Jul 2024 18:55:18 +0000

Drum Roll...

First off, no need doing the ReactJS vs NextJS banter. If you're thinking about optimizing your website/web app for:

Search Engines - Crawling and indexing - so your site and content can rank on page search
Building dynamic metadata so you can get that fancy link description and image preview when you share your links ...then you already know that NextJS is your best bet.

Let's not even get started about Pages Router vs App Router, I personally love the amazing features that come with using the App Router structure. From easy file-based routing, more flexible routing patterns for dynamic segments and catch-all routes to server actions and all that. So, this guide will only be treating how to implement SEO with the App Router.

Getting Started

First, let's bootstrap a new NextJS project, if you haven't already. Follow the prompts and set your preference (I don't skip accepting Typescript - so should you 😜)

npx create-next-app@latest

Open the code editor and start the development server.

npm run dev

Metadata

import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./globals.css";

const inter = Inter({ subsets: ["latin"] });

export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body className={inter.className}>{children}</body>
    </html>
  );
}

The code snippet above shows the default RootLayout component found in the layout.tsx file which serves as the global layout which all pages and sub-pages will inherit any UI from - this also means, the metadata object you're exporting from this component will be shared by all other pages unless you explicitly export a metadata object from individual pages (page.tsx or page.jsx).

You can define and export a variable named metadata using Metadata type (for static details) or a function named generateMetadata (this function is especially helpful for loading dynamic data which can then be used to create metadata object for dynamic pages).
Metadata can be defined in layout files and overridden in nested pages.
NextJS automatically generates appropriate tags for each page based on your metadata.

What does a full-blown Metadata object look like?

export const metadata = {
  title: 'My Awesome Website',
  description: 'Discover amazing content and services on My Awesome Website',

  // Basic metadata
  applicationName: 'My Awesome App',
  authors: [{ name: 'Stephen Omoregie', url: 'https://cre8stevedev.me' }],
  generator: 'Next.js',
  keywords: ['next.js', 'react', 'javascript'],
  referrer: 'origin-when-cross-origin',
  themeColor: '#4285f4',
  colorScheme: 'dark',
  viewport: 'width=device-width, initial-scale=1',
  creator: 'Stephen Omoregie',
  publisher: 'Cre8steve Dev',

  // Open Graph metadata
  openGraph: {
    title: 'My Awesome Website',
    description: 'Discover amazing content and services',
    url: 'https://cre8stevedev.me',
    siteName: 'My Awesome Website',
    images: [
      {
        url: 'https://myawesomewebsite.com/og-image.jpg',
        width: 1200, // This is the recommended size in pixels
        height: 630,
        alt: 'My Awesome Website og-image',
      },
    ],
    locale: 'en_US',
    type: 'website',
  },

  // Twitter metadata
  twitter: {
    card: 'summary_large_image',
    title: 'My Awesome Website',
    description: 'Discover amazing content and services',
    creator: '@cre8stevedev',
    images: ['https://myawesomewebsite.com/twitter-image.jpg'],
  },

  // Verification for search engines
  // You can get these values from the respective
  // search engines when you submit your site for 
  // indexing
  verification: {
    google: 'google-site-verification=1234567890',
    yandex: 'yandex-verification=1234567890',
    yahoo: 'yahoo-site-verification=1234567890',
  },

  // Alternate languages
  alternates: {
    canonical: 'https://myawesomewebsite.com',
    languages: {
      'en-US': 'https://myawesomewebsite.com/en-US',
      'es-ES': 'https://myawesomewebsite.com/es-ES',
    },
  },

  // Icons
  icons: {
    icon: '/favicon.ico',
    shortcut: '/favicon-16x16.png',
    apple: '/apple-touch-icon.png',
    other: [
      {
        rel: 'apple-touch-icon-precomposed',
        url: '/apple-touch-icon-precomposed.png',
      },
    ],
  },

  // Manifest
  manifest: '/site.webmanifest',

  // App-specific metadata
  appleWebApp: {
    capable: true,
    title: 'My Awesome App',
    statusBarStyle: 'black-translucent',
  },

  // Robots directives
  robots: {
    index: true,
    follow: true,
    nocache: true,
    googleBot: {
      index: true,
      follow: true,
      noimageindex: true,
      'max-video-preview': -1,
      'max-image-preview': 'large',
      'max-snippet': -1,
    },
  },

  // Format detection
  formatDetection: {
    email: false,
    address: false,
    telephone: false,
  },
};

Don't run, don't run! No, you don't have to use all these properties for your page. They're just to serve as a reference for creating your own metadata object that meets your need. It's safe to say many of the properties are quite self-explanatory. The OpenGraph object uses the OpenGraph protocol that allows your app have link-image-description previews for social sharing. There's also an object property for twitter-specific metatada.

Let's Dive Right In - How To use It In your Project

Remember, if you have static metadata that you want nested pages to share, just place the metadata object in the top-most component (in this case that would be the layout.tsx file in the route structure. example.

my-nextjs-project/
│
├── app/
│   ├── (auth)/
│   │   ├── signin/
│   │   │   └── page.tsx
│   │   ├── signup/
│   │   │   └── page.tsx
│   │   └── layout.tsx
│   │
│   ├── about/
│   │   └── page.tsx
│   ├── api/
│   │   ├── post/
│   │   │   ├── [slug]/
│   │           └── route.ts
│   ├── layout.tsx
│   ├── robots.ts
│   ├── sitemap.ts
│   └── page.tsx
├── public/
│   ├── favicon.ico
│   └── ...
│
├── components/
│   └── ...
│
├── lib/
│   └── customMetaDataGenerator.ts
│
├── styles/
│   └── globals.css
│
├── package.json
├── next.config.js
├── tsconfig.json
└── README.md

Take note of the project structure above, we'll be making reference to it to understand the placement of your files/configurations.

Creating a Reusable Metadata Function

Let's create a utility function that will take an object of properties which we can pass customized values to generate metadata on any page. We'll call this custom function and assign it to the 'metadata' variable object which will be exported from the page.

// File location: @/lib/customMetaDataGenerator.ts
import { Metadata } from 'next';

interface PageSEOProps {
  title: string;
  description?: string;
  canonicalUrl?: string;
  ogType?: string;
  ogImage?: string;
  twitterCard?: string;
  keywords?: string[];
}

export function customMetaDataGenerator({
  title,
  description = "Join the vibrant community that's bringing Nigerians together like never before...",
  canonicalUrl = 'https://naijarium.vercel.app',
  ogType = 'website',
  keywords = [
    "an array", "of default", "keywords"
  ],
  ogImage = 'https://url-to-your-image-this-is-a-default-value-for-optional-parameter',
  twitterCard = 'summary_large_image',
}: PageSEOProps): Metadata {

  // Create Site Title
  const siteTitle = 'Your Website Name';
  const fullTitle = `${title} | ${siteTitle}`;

  return {
    title: fullTitle,
    description,
    keywords: keywords.join(', '),
    openGraph: {
      title: fullTitle,
      description,
      type: ogType,
      url: canonicalUrl,
      images: [
        {
          url: ogImage,
        },
      ],
    },
    twitter: {
      card: twitterCard,
      title: fullTitle,
      description,
      images: [ogImage],
    },
    alternates: {
      canonical: canonicalUrl,
    },
  };
}

Using the custom function in your root layout

// @/app/layout.tsx 
import { customMetaDataGenerator } from '@/lib/customMetaDataGenerator';

// Define Metadata for the general site layout
// We're relying on the default parameters defined in the function, 
// That's why we're only passing `title` in the object
export const metadata: Metadata = customMetaDataGenerator({
  title: 'Social Media Forum for Nigerians',
});

...
// The rest of your layout.tsx code follows.

You can equally do this in all your page.tsx for the individual routes - This is helpful if you have static data - For instance a multi-page website with static data. But what if you're implementing this for dynamic websites - portfolio with different projects, blog, e-commerce, etc. Then you need to be able to generate data specific to the requested resource and build the metadata on the server.

Generating Dynamic Metadata

Note, the idea of having metadata that search engines can use, is that it has to run on the server. So, if your page.tsx is a client component with the 'use client' directive, then the next best thing is to place the metadata generation function in the layout.tsx for that route segment, that generate the metadata on the server and return your client component.

When you export a function named generateMetadata in your page.tsx or layout.tsx, for instance, a dynamic route that takes a slug as a params; this function will be automatically called by NextJS on the server and will also have access to the parameter(s) for that route. So, you can use the slug to fetch data for the dynamic resource and build your metadata object that will be returned for that page.

Here's an example of creating dynamic metadata for a url:
https://naijarium.vercel.app/post/how-to-become-a-full-stack-dev

// @/app/post/[slug]/layout.tsx
import { customMetaDataGenerator } from '@/lib/customMetaDataGenerator';

import { Metadata } from 'next';
import { fetchSinglePost } from '@/lib/fetchSinglePost';

type Props = {
  params: { slug: string };
  children: React.ReactNode;
};

// This function will be called and it will generate 
// The metadata object for the page when the route is visited

export async function generateMetadata({ params }: Props): Promise<Metadata> {
  // Fetch the post data using the slug
  // Implement your own custom data fetch logic
  // That returns the resource
  const post = await fetchSinglePost(params.slug);

  if (!post) {
    return customMetaDataGenerator({
      title: 'Post Not Found | Naijarium',
    });
  }

  // Generate the metadata using the fetched post data
  return customMetaDataGenerator({
    title: post.title!,
    description: ` Created by: ${post.author_username} - ${post.content).slice(0, 150)} + "...Read More`,
    ogImage: post.image,
    keywords: post.keywords,
    canonicalUrl: `https://your-website.com/post/${post.slug}`
  });
}

// Export the layout component that returns the nested page (s)
export default function Layout({ children }: Props) {
  return <>{children}</>;
}

Robots and SiteMaps

Metadata for your site is great and are helpful for a number of things too. But if you need your page to be indexed and crawled by search engines, then you also need two important files - robots.txt and sitemap.xml.

robots.ts

Generates a robot.txt file
Controls search engine crawling
Defines which pages should be indexed or not
can block specific web crawlers or allow all.

sitemap.ts

Generates a sitemap.xml file
Lists all important pages on your website
Help search engines understand your site structure
Can include information about page updates, importance and frequency.

The beauty here is that, NextJS automatically handles the creation of the robots.txt and sitemap.xml files if you place the robots.ts and sitemap.ts files in the app directory, thus improving your site's SEO without manual management.

Example robots.ts file:

import { MetadataRoute } from 'next';

export default function robots(): MetadataRoute.Robots {
  return {
    rules: {
      userAgent: '*', // allow all crawlers
      allow: '/', // allow crawling all pages
      disallow: ['/api/', '/api'], // don't crawl api routes
    },
    sitemap: 'https://your-website.com/sitemap.xml',
  };
}

Example sitemap.ts file

import getAllPosts from '@/actions/getAllPosts';
import { MetadataRoute } from 'next';

export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
  const baseUrl = 'https://your-website.com';
  const posts = await getAllPosts();

  const postEntries = posts.map((post) => ({
    url: `${baseUrl}/blog/${post.slug}`,
    lastModified: new Date(post.updatedAt!),
    changeFrequency: 'weekly' as const,
    priority: 0.8,
  }));

  return [
    {
      url: baseUrl,
      lastModified: new Date(),
      changeFrequency: 'daily',
      priority: 1,
    },
    ...postEntries,
  ];
}

What's happening here? Now, you can manually list out the pages in your site that you want to build into your sitemap, but if you have a dynamic website (like a blog or e-commerce); you might want to generate the links for the pages based on the resources you have.

You just have to return an array of SiteMap types. This information will be used by the search engines to understand the structure of your web site/app.

A teeny-bitsy bit of a last step

The next-sitemap package is a tool for Next.js applications that:

Automatically generates sitemap(s) and robots.txt files
Supports both static and dynamic sitemaps
Allows for custom configuration
Can generate sitemaps for large-scale applications
Can be integrated into the build process

How to Use it?

Create a next-sitemap.config.ts file in the root of your project, and include the content below.

module.exports = {
  siteUrl: 'https://your-website-url.com',
  generateRobotsTxt: true,
};

Update your script object in package.json to include

{
  "name": "your-project-name",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "postbuild": "next-sitemap"
  },
//  ...other configurations here
}

Conclusion and Errrm..... See ya

Phew! Now you're up and running, you can inspect your website on the developer tools or share a link to your site to see that link previews have kicked in (after deployment of course, not localhost link).

Have fun building, and feel free to reference this guide whenever you need to implement SEO on your NextJS App.

Note: There are many other things required to help your page rank faster too, from page load speed, responsiveness, and relevance of content. But, at least NextJS offers you the option of using the flexibility of ReactJS Components-based UI building, without sacrificing on your site's 'crawlability' by search engines.

Happy Coding, and cheers from Steve!

Additional Resources:

Development Made Easy for Lazy and Productive Devs - Get Code Snippets for Full or Basic Props for Native or Expo Components

Stephen Omoregie — Tue, 09 Jul 2024 17:39:11 +0000

While building my project (Quotix), which I'm using to learn and apply my knowledge in Mobile Development using Expo (React Native Framework), I sometimes have to:

Jump back again to the docs
Search for a particular component
Take note of the props that suit my needs
Hop back to the IDE

Phew! I'm thrilled to share that I've just published my first VSCode extension on the Marketplace (React Native and Expo Code Snippets). 🎉

Motivation

As a newcomer to React Native with Expo, I found it tiring to constantly switch between my editor and the documentation to check component props. This inspired me to create an extension that streamlines this process.

The Game Changer for me!

With my extension, developers can simply type _exp or _rn to access a list of code snippets, including basic and full props for components (React Native or Expo-specific). It's a fantastic way to enhance productivity and keep the development flow uninterrupted. 💡💻

With more than 70+ (and counting) snippets for many of the components, or implementations for (ContextApi, Location, Camera, Permissions), now you can speed up your development process. No need to try to remember the props; just type _rn or _exp for IntelliSense to trigger the component you want, and you pick out what you need and toss out what you don't.

Get the Extension Now and Try it out

https://marketplace.visualstudio.com/items?itemName=Cre8steveDev.react-native-and-expo-code-snippets&ssr=false#review-details

If you're a React Native or Expo Developer, you will find this extension useful, as I have too.

Wanna Try building your Own Extension?

If you're feeling adventurous and would like to create productivity-aiding tools for your development environment. It's quite easy.

Install the Yeoman and VSCode Extension Generator

npm install -g yo generator-code

Generate the extension project

yo code

Follow the prompt to choose the type of project you want to work on.

Define your snippets in the snippets.code-snippets file using the snippet language, kindda like json (you can look up the repository for the extension to get an idea of how it's done and the general project structure @ https://github.com/Cre8steveDev/React-Native-and-Expo-Code-Snippets

Learning Resource:

Heads and Hands On Learning: My Mobile Development Journey with React Native (Expo) Begins

Stephen Omoregie — Sat, 06 Jul 2024 08:01:12 +0000

I was almost getting lost in Tutorial Hell learning Mobile Development with React Native documentation and tutorials, so I decided it was time to put theory into practice. 😁

npx create-expo-app@latest quotix -t

I'm thrilled to share my first hands-on mobile app project: Quotix.

Tech Stack:

Expo: A powerful React Native framework for cross-platform app development
Firebase: Handling authentication and database needs
Custom UI/UX: Designing the interface myself to push my boundaries and see how I can use my Graphic Design Skills in building User Interfaces.

Key Learning So Far:

React Structure (JSX, State, Hooks, Events): It's fascinating to see the structural similarities between React for web and React Native. This knowledge transfer is incredibly valuable.
Rethinking CSS : While tools like Nativewind exist, I chose to work with vanilla CSS using Stylesheet.create({}). This approach is helping me keep my CSS separate from JSX and gain a deeper understanding of mobile styling nuances.
Expo's File-Based Routing: This feature is a game-changer, making navigation setup much more intuitive.

The journey from web to mobile development has been both challenging and rewarding. It's exciting to see how transferable skills can accelerate the learning process in new domains - ALL HAIL JAVASCRIPT!!!! 🤣 (My curiosity for Mobile development was actually triggered by Python's Kivy, but damn! I ran away o).

I'm eager to continue this journey, refining my skills and working towards building high-grade, production-ready mobile applications.

What's your experience with mobile app development? Any tips for a newcomer to the field?

My Own Tip:

If you're learning, just start building. Break things and have an opportunity to learn certain little things you wouldn't have figured out from following 'perfect tutorials' - plus you sharpen your debugging and problem-solving skills too.

Building a MERN Stack Application for My Portfolio Project - Medikall: Lessons and Wins

Stephen Omoregie — Wed, 22 May 2024 10:41:52 +0000

*Say Hello To Medikall! *

My project, Medikall, is an MVP for a Hospital Appointment Booking System which is hosted online to help ease appointment booking by patients as well as offer a means to collect information about the patient's complaints ahead of time before their schedule day to see a doctor - this collection is collected by an AI chat bot. Users also have the option to use the AI chat feature on the platform to make inquiries about health and lifestyle advice to help them stay fit.

Building this project was A requirement for passing the Foundation stage of my training as a Full Stack Software Engineer under the training of the prestigious ALX Software Engineering Program under scholarship of MasterCard Foundation.

Using my problem solving skills and knowledge gained from my training, I was able to research, plan and design the solution I intended to make for the identified problem - streamlining appointment booking by providing a web interface for potential patients to book for consultation. For this, I chose to use the MERN Stack (with Typescript). It was an exciting experience working and learning about best practices as I worked on the Front-end and Back-end Logic as well as Database design using MongoDB.

The motivation behind this was borne out of my experience having been around some General Practice Clinics in the past. It was a common sight to see sick people struggling to get booked for an appointment for non-emergency cases, but they experience great inconvenience due to the analogue process of registration and assignment to a medical professional, which often leaves the patient fatigued and burned out long before their turn to see the doctor. So, I thought to build something that can be a viable solution that offers scalability for facilities that adopt it as, well as convenience for patients who patronize such facilities.

Learning Points

I must say, the most exciting part of building this project, apart from the UI and integrating the AI, was learning how to use Typescript to enjoy writing Javascript that has achieved gnosis haha. Learning about types, interfaces, union types, enums, type safety, easy code completion.

I have made a fan-boy promise to only write JavaScript this way going forward.

While this was just an MVP, there are still many potentials for expansion and much more learning opportunties to made the project solve all the problems it is aimed at. I hope to work on it on the side, while I continue my learning in the Backend Specialization Stage of my training.

Cheers!

A Little BS Guide for Building a Program for Making API Calls and Parsing JSON Data Using C Programming Language

Stephen Omoregie — Fri, 03 May 2024 18:57:15 +0000

Before you even start reading, I mean WTF do you want to learn how to do this using this old-ass C programming language? I mean you can do this with like 10 lines max with such silly languages like python and javascript! But no, we like problem!

Then again, why did I create a guide for it at all. Okay, Okay, you caught me. Why do programmers do anything at all?

So get ready as we smash some stack and leak some memories, yaaaaaay!

Introduction

The goal of this guide, is to provide a kind of template you can use if maybe you have "a gun to your head" and someone asks you to make a request to an API, parse the JSON response, and then print particular values to the terminal, or save it to a file. And that you must do it with C.

We'll need two external C libraries that has to be installed on your computer. Using the package manager for your OS (I'm using Ubuntu).

Libcurl - for making network request from your program.
Jansson - For parsing JSON like strings. Because ofcourse, the response from our request url is kindda a string as expected.

sudo apt-get update
sudo apt-get install libcurl4-gnutls-dev
sudo apt-get install libjansson-dev

What's the Plan here?

Okay, so we want to build a program that presents the user with a prompt of certain choices. When the user picks an option, we make a GET request to the Quotable API (https://api.quotable.io/random), we then parse the response and print the output to the terminal. If the user, wants the quotes saved to a file, we'll do that also.

User is Prompted:

Result Printed on Terminal:

Project Structure

I mean, even if it's a very primitive program, we still have to maintain a modular structure for our own sanity. I mean we're not savages! The image below shows the project structure. i.e Files we'll be creating for our program

quotes_main.c: This will be the entry point of the program where we define the loop that gives the user a prompt. We're also using a custom function from utilities.c (print_initial_ui()) to print the intro text.

#include "quotes.h"

/**
 * quotes_main.c
 * @argc: Commmand line count
 * @argv: Command line arguments
 * Return - EXIT SUCCESS OR EXIT_FAILURE
 */

int main(int argc, char const **argv)
{
    int continue_prog = 1;
    char *temp = NULL;

    while (continue_prog)
    {
        print_initial_ui();
        char user_option = 'x';

        // Retrieve User's choice
        scanf(" %c", &user_option);
        printf("\n");

        system("clear");
        // Match the choice to an action
        switch (user_option)
        {
        case '1':
            printf("Loading quotes...\n");
            handle_single_quote();
            break;

        case '2':
            handle_custom_number_quotes();
            break;

        case '3':
            handle_custom_number_quotes_to_file();
            break;

        default:
            continue_prog = 0;
            break;
        }
    }
    printf("\n");
    return 0;
}

quotes.h: We have to include the necessary header files we'll be needing for our little project, a type definition, as well as function prototypes for the custom functions we'll be passing around.

#ifndef QUOTES_H
#define QUOTES_H

/**
 * Standard Library Imports
 */
#define _POSIX_C_SOURCE 200809L
#include <stdio.h>
#include <strings.h>
#include <string.h>
#include <stdlib.h>
#include <stddef.h>

typedef struct
{
    char *data;
    size_t len;
} string;

#include <curl/curl.h>
#include <jansson.h>

/**
 * HeaderFile for Write Function and others
 */
size_t write_callback(char *ptr, size_t size, size_t nmemb, void *data_struct);

void print_fake_app_loading(void);
void print_initial_ui(void);
char *parse_result(char *result);

void handle_single_quote();
void handle_custom_number_quotes();
void handle_custom_number_quotes_to_file();

int write_to_file(char *file_name, char *content);

#endif /**Quotes Header File*/

handle_single_quote.c: Due to the flow of our program, we have an option where the user may select to see just one quote. So we're creating a function to handle that scenario.

This is the heart of the program, here, we're using functions and types from the curl header file (from installing libcurl) to perform the necessary actions.

#include "quotes.h"

/**
 * handle_single_quote - handles the request and returns the data string
 * Return - a String of the data retrieved and parsed
 */

void handle_single_quote()
{
    CURL *curl;
    CURLcode response;
    char *sendOUtData;

    string data_struct;
    data_struct.data = malloc(1);
    data_struct.len = 0;

    // Initializ curl on the variable
    curl = curl_easy_init();

    if (curl)
    {
        curl_easy_setopt(curl, CURLOPT_URL, "https://api.quotable.io/random");
        curl_easy_setopt(curl, CURLOPT_WRITEFUNCTION, write_callback);
        curl_easy_setopt(curl, CURLOPT_WRITEDATA, &data_struct);

        response = curl_easy_perform(curl);

        sendOUtData = parse_result(data_struct.data);

        system("clear");
        printf("\n***********************************");
        printf("\n%s\n", sendOUtData);
        printf("***********************************\n");

        free(sendOUtData);
        sendOUtData = NULL;

        curl_easy_cleanup(curl);
        return;
    }
    printf("\n\nSorry, an error occured");
    return;
}

Here's a breakdown of what's happening in the code above. This same set up applies to making any kind of get request from your C program.

CURL *curl;: First, we declare a variable for our curl request using the CURL type. You'll initialize this variable to serve as the handler for your requests.
CURLcode response;: When we perform a request, this variable will hold the status of that request. For proper error handling, you may want to test:

if (response != CURLE_OK){
   // Means something went wrong so you handle it
}

We didn't do that in our code snippet above, but you should know it.

char *sendOUtData;: Here we're creating a char pointer to hold the string that will be returned after we parse the api response.
Next we define a struct that we'll pass as an argument (a pointer to the variable) when setting up options for the curl request. This can be a char pointer if you want, provided you pass an its address to set option.

string data_struct;
data_struct.data = malloc(1);
data_struct.len = 0;

curl = curl_easy_init();: Initialize the handler variable you defined earlier on. Note that this initialization will be used throughout that request cycle, so all options set on that handler will be the same. If you are doing this within a loop, and you want to change maybe the url, then you also have to initialize the handler within a loop and then be able to pass different setup options. If the initialization fails, it returns a NULL value, so you have to check if curl, before setting other options and performing the request.
Setting the options for the request to the url:

curl_easy_setopt(curl, CURLOPT_URL, "https://api.quotable.io/random");
curl_easy_setopt(curl, CURLOPT_WRITEFUNCTION, write_callback);
curl_easy_setopt(curl, CURLOPT_WRITEDATA, &data_struct);

response = curl_easy_perform(curl);

By default, the curl handler will make a GET Request to the provided url. To make POST requests, kindly read up about it using man libcurl.

Line 1: using the curl_easy_setopt(....) function, you pass in the handler as the first argument, then CURLOPT_URL (These are predefined Macros from the curl header file), and the url you want to make a request to.

Line 2: Here we're passing a function pointer (not calling the function) alongside the MACRO CURLOPT_WRITEFUNCTION that marks our write_callback as the function to call to perform write operation of the response.

Line 3: For the next set option function, using the CURLOPT_WRITEDATA macro, we pass in a pointer to our struct defined earlier (remember I said this doesn't have to be a struct). It just needs to be a pointer to somewhere you want to store your string.

Line 4: Lastly, you call the curl_easy_perform(curl) passing the curl handler you initialized earlier. This function will perform the request for you based on the options you have set up using curl_easy_setopt(....) earlier. And then return a response code to the variable response. At this point, you can print out the response which would now be stored in data_struct since that's where we passed a pointer to.

sendOUtData = parse_result(data_struct.data); : This is useful for us because of what we're trying to achieve in our program. We have defined a function to parse the result and extract some strings from it. You'll see the definition below.
curl_easy_cleanup(curl);: This last line is very important. You call this function and pass in your curl handler to help you clean up all allocations that was done in processing your request. If you might also free any memory you allocated (for example sendOutData which will be gotten from the allocation made within parse_result(...)).
parse_result.c: I've documented the code so that it's much easier for you to follow and see what's going on. Just read through it and you'll understand.

#include "quotes.h"

/**
 * parse the result to be pretty
 * @result: JSON Looking result
 * Return - Prettified string
 */

char *parse_result(char *result)
{
    // using tyese types from the jansson header file, create a variable
    // to hold the error (if any) when parsing your json string
    json_error_t error;

    // The root will hold the processed string when we call json_loads and pass in our char pointer (result parameter)
    json_t *root, *content, *author;

    // Create variables that will hold the key:value from the parsed json
    // and other variables we might need
    char *content_str, *author_str, *cleaned_result, *pad_string = "Quote by: ";

    // call json loads, pass in the json string from result, and a pointer
    // to the error variable declared earlier
    // If an error occurs, root will hold a NULL value so we can print the error and exit the program
    root = json_loads(result, 0, &error);
    if (!root)
    {
        fprintf(stderr, "error: on line %d: %s\n", error.line, error.text);
        printf("Try again\n");
        exit(EXIT_FAILURE);
    }

    // Now you can retreive the key value of the 'variable' in the json string
    // you want to retrieve. In our case, the quotable api returns the quote itself
    // as content and the author as autho

    content = json_object_get(root, "content");
    author = json_object_get(root, "author");

    // If an error occurs, we handle it and return NULL back
    if (!json_is_string(content) || !json_is_string(author))
    {
        fprintf(stderr, "error: content or author is not a string\n");
        json_decref(root);
        return NULL;
    }

    // Here we pick out the value from the key:value string retreived
    // earlier in content and author variable above

    content_str = (char *)json_string_value(content);
    author_str = (char *)json_string_value(author);

    // We're allocating memory for a variable to hold the string the way we want it
    // This is not necessary. you can already print out the content_str
    // and author_str if that's what you want

    cleaned_result = malloc(strlen(content_str) + strlen(author_str) + 4 + strlen(pad_string));
    if (!cleaned_result)
    {
        fprintf(stderr, "error: could not allocate memory for cleaned_result\n");
        printf("Try again\n");
        json_decref(root);
        return NULL;
    }
    // Construct the cleaned result
    sprintf(cleaned_result, "%s\n\n%s%s", content_str, pad_string, author_str);

    // Clean up json handler. This is important to help free any used memory
    json_decref(root);

    // Here we are returning the cleaned result to the place where
    // the function was called. Since it was allocated for with malloc
    // we also have to free it after using where it returned to.
    return cleaned_result;
}

Conclusion

With the code snippets you've seen so far, you should already have a good idea of how the program works, and how you can use this guide to set up making network request from your C programs.

When compiling your code, make sure to link the two libraries (if you're using gcc):

gcc *.c -l curl -l jansson -o quotes

You can access the source code on github so see how the other functionalities of the program are coded.
SOURCE CODE HERE

To learn more about how you can make POST Requests, send data, or set headers, you can use the online man pages (CLICK HERE)

Also, make sure to handle errors, with more robust error handling when writing C programs as well as free any allocated memories to prevent memory leaks. (Though, there seems to be some memory leak issues with the libcurl library).

Cheers and happy coding!

Building a Full Stack Web Application using Flask (Python Web Framework) - Part Two

Stephen Omoregie — Thu, 11 Apr 2024 12:03:15 +0000

Hey Pythonistas! Last time (Part One) we learnt some really interesting concepts about Flask and how we can build simple yet powerful web applications using the python micro web framework - Flask. We talked about Setting up the development environment, project structure, templates, defining routes, setting up blueprints, etc.

Today, we'll continue with the last part of the tutorial where we'll be covering the following topics:

Handling Form Submissions/File Uploads
Downloading Files
Connecting with a Database for Data Insertion and Retrieval using MongoDB
User Authentication and Authorization with Flask-Login

On your marks, get set, leggo!

Handling Form Submissions/File Uploads

Remember that we imported the request module from flask in our file? The request 'object' contains a bunch of attributes/methods that you can use to retrieve information from the request coming in from the client. When it comes to form/file handling, we'll need request.form to access form data and request.files to access files uploaded via the form.

Let's see an example of a simple form template for our project and learn some 'strange things' you might see.

# update templates/register.html
{% extends 'base.html' %}


{% block css %}
<link rel="stylesheet" href="{{url_for("static", filename="css/register.css")}}">
{% endblock css %}

{% block js %}
<script src="{{url_for("static", filename="js/register.js")}}" defer></script>
{% endblock js %}

{% block body_content %}
<main class="main-container">
    <h1 class="main-header">Register an Account with Us</h1>
    <p class="main-subtitle">Register here with us!</p>

    <form action="/register" method="post" enctype="multipart/form-data">
        <input type="text" name="username" id="username" required placeholder="Username"/>
        <input type="email" name="email" id="email" required placeholder="Email Address"/>
        <input type="password" name="password" id="password" required placeholder="Password" />
        <input type="file" name="picture" id="picture" accept=".png .jpg .jpeg" required>   
        <button>Register Now</button>
    </form>
</main>
{% endblock body_content %}

Also, let's update the route we defined for the /register endpoint in auth_blueprint.py to handle form submission as well as file being uploaded by the user.

from flask import Blueprint, request, render_template
from flask import redirect

auth_views = Blueprint("auth", __name__)

@auth_views.route("/register", strict_slashes=False, methods=["GET", "POST"])
def register():
    # Define application logic for homepage
    if request.method == "POST":
        uploaded_file = request.files['picture']
        username = request.form.get("username")
        email = request.form.get("email")
        password = request.form.get("password")

        # Save the uploaded file to a directory on your server
        # Preferably outside the application root or as you desire
        uploaded_file.save(f"/tmp/{uploaded_file.filename}")

        # Implement database logic to register user

        return render_template("login.html")

    # Render template for GET requests
    return render_template("register.html")

Hold on! Hold on! Before you start screaming WTF! Hehe... flask has an extension for handling forms called Flask-WTF - No pun intended 😜 Let me explain what's going on in the update we just made

<form action="/register" method="post" enctype="multipart/form-data">: When sending a form that has file upload, it's important that you include the enctype attribute on your form tag to specify that your form also includes file upload. We've also specified the url the form would send our data to and specified post as the request method (which is the default form behaviour anyways)
if request.method == "POST":: Remember, we defined our route for /register to listen for both POST and GET requests, so we need a conditional statement to handle it accordingly. You can choose to separate the logic for POST and GET requests by defining them separately. e.g @auth_views.get("/register",.....) or @auth_views.post("/register", ....)
uploaded_file = request.files['picture']: Take note that it is important that your form child elements should have unique names as that would be needed in retrieving their values in your application. request.files is a dictionary and we're using the bracket notation to access the key based on the name we gave the file input element in our html. This dictionary holds all file uploads in your form - if multiple files exists, so you access individual ones by their name. uploaded_file becomes a FileObject which you can carry out different file operations on and in our case we're saving it to the /tmp directory in our server. You can choose to save it directly in your working directory too as you deem fit by providing the relative or absolute directory path.
username = request.form.get("username"): Getting all other form data follow the same method. request.form is a dictionary containing all the form fields that were sent from when your site user submitted the form. You can either use the .get() or [] to retrieve each field data by name.

Ideally, after collecting the form data, you will carry out your database operation for creating a new user or trying to authenticate the user. More on that shortly.

Sending Files as Download from your Application

I figured it would make sense to learn how easy it is to create a download route in your application if your project demands such. You can have dynamic download routes where you receive the filename as path of the route and dynamically send that file to the user or have a static download file download (example for a resume on your portfolio website.

Update the main_blueprint.py file to include the download route function. Make sure to import this: from flask import send_from_directory

@main_views.get("/download/<str:filename>", strict_slashes=False)
def download(filename):
    # Using the send_from_directory function you can send a file
    # By providing the absolute path to the file
    # Note the /tmp/ is just for practice purpose.
    # You decide which directory you want to store your files at
    return send_from_directory(f"/tmp/Tutorial/{filename}")

Side note: Flask allows you use extensions like Flask-WTF for more robust form handling and validation capabilities. But then again, there's no harm in doing your own form validation. Hehehe...yes write some bugs!!!!!

Connecting with a Database (MongoDB)

Thing is, if you intend to persist data in your application, for serving dynamic data, you need a database. Let's do a little exploring on how to connect to your MongoDB database, a popular NoSQL database of choice for web applications.

Installation and Setup: First off, let's install the PyMongo library, which is the official python driver for connecting to a MongoDB Database. To make things easier, just create an account/database on MongoDB Atlas and get your connection string. You don't have to install mongodb on your local machine.

pip3 install pymongo

Make sure to save your Connection string as an environment variable and use the python-dotenv library to load it to your application as it contains sensitive data. But for the purpose of this project, I'll just put dummy string so you can see what and what goes where.

Create a file database.py in the models directory and paste the code below into it. Let's explain what's going on! Leggo.

# models/database.py
from pymongo.mongo_client import MongoClient
from pymongo.server_api import ServerApi

client = MongoClient("mongodb+srv://[USERNAME]:[PASSWORD]@[YOUR_HOST:PORT]/?retryWrites=true&w=majority", server_api=ServerApi('1'))

# Access a database from the client 
db = client["YOUR_DATABASE_NAME"]
user = db["COLLECTION_TO_ACCESS"] # Example Users

# Define Class to use to map Mongodb Data for user login
class User:
    """Class Definition to handle Flask login for user"""
    def __init__(self, username, id):
        self.username = username
        self.id = id

    @staticmethod 
    def is_authenticated():
        return True

    @staticmethod
    def is_active():
        return True

    @staticmethod
    def is_anonymous():
        return False

    def get_id(self):
        return self.id

from pymongo.mongo_client import MongoClient: First we import the MongoClient class from pymongo.mongo_client. as well as the ServerApi class which we'll pass when instantiating the MongoClient
client = MongoClient(connection_string, server_api=ServerApi('1')): from this client returned by the MongoClient connection, you can access a specific database as well as Collection (e.g User)
An important part of this file is the definition of the User class (it can be named anything). The reason for doing this is that our Authentication extension Flask-Login cannot work directly with MongoDB, it needs you to create a model for your user with which to help you manage authentication and authorization on your application. While you can inherit from the UserMixin class from flask_login, let's just keep things simple by creating our own simple class. This class you're creating must have all the methods as seen in our class definition above. They're used by Flask-Login to manage user authentication for you.

Configuring Flask Login on your App
We're almost done with the hard part. Now we just need to configure flask_login to wrap around our application. Let's update the app.py in the root of our project directory.

# app.py

from flask import Flask
from blueprints.main_blueprint import main_views
from blueprints.auth_blueprint import auth_views

from flask_login import LoginManager
from models.database import db, user, User
from bson import ObjectId

# create an instance of the flask application
app = Flask(__name__)

app.register_blueprint(main_views)
app.register_blueprint(auth_views)

login = LoginManager(app)
login.login_view = "/login"

# setup the login user loader
@login.user_loader #3
def load_user(id):
    """Confirm user exists in database then use else return None"""
    cur_user = user.find_one({"_id": ObjectId(id)})

    if cur_user is None:
        return None

    # Create a user instance from the retrieved user
    return User(cur_user.get("username"), str(cur_user.get("_id")))

Here's some explanation about what's going on with the addition to our code.

login = LoginManager(app)
You import LoginManager from flask_login and pass your app to instantiate the LoginManager and assign it to any variable, but let's call ours login.

login.login_view = "/login"
On this line, you define the route/url you want the app to redirect users to when they try to access a protected route that they are not authorized to visit. In our example, when users try to access protected routes, they will be redirected to the login page.

@login.user_loader
We need to create a login decorator for a function that will be called when our flask-login manager needs to load a user. This function will retrieve the user's id from the class we defined earlier using the user's id. If it does not exist, it returns none and the user is redirected to a login page. Make sure to create a secret key for your app. Flask-login uses cookies to sign each session, so it needs a secret key to sign the cookies We import the user collection we defined as user in the models/database.py

Since we're retrieving the user from the database using the id retrieved from cookies, we need to create an ObjectId from the id string as that's the type MongoDb is expecting to match the filter. We therefore import ObjectId from bson module.

If a match is found from the database, then we Create an instance of the User class we defined earlier that Flask-Login will be using and return the class instance from the function. Don't sweat it, that's all you need to know.

Take note that the variable user refers to our connection to the 'Users' Collection in MongoDB, while User refers to the class we defined for Flask-Login to be able to verify authenticated/authorized users.

Next Step, we need to implement the register and login logic on our /login and /registerroute in the auth_blueprints.py file. Update the file in blueprints/auth_blueprints.py with the code below (specifically the /login route). I've documented the code to help you understand what's going on and why.

# Update file blueprints/auth_blueprints
from flask import Blueprint, request, render_template, redirect, flash
from flask_login import login_required, logout_user, current_user, login_user
from werkzeug.security import generate_password_hash, check_password_hash


auth_views = Blueprint("auth", __name__)

# Create routes on this blueprint instance
@auth_views.route("/register", strict_slashes=False, methods=["GET", "POST"])
def register():
    # Define application logic for homepage
    if request.method == "POST":
        uploaded_file = request.files['picture']
        username = request.form.get("username")
        email = request.form.get("email")
        password = request.form.get("password")

        # Save the uploaded file to a directory on your server
        # Preferably in a folder you define in your app directory
        # example in static/profile_pic/
        uploaded_file.save(f"/static/profile_pic/{uploaded_file.filename}")

        # Implement database logic to register user
        # Create a dictionary of your user details to insert into the MongoDB Collection for a new User 
        new_user = {
            "username": username,
            "email": email,
            "password": generate_password_hash(password),
            "profile_pic": f"/static/profile_pic/{uploaded_file.filename}"
        }
        try:
            # Retrieve the user collection from database as defined in models/database.py
            from models.database import user

            # Check if the email/username already exists in db
            check_email = user.find_one({"email": request.form.get("email")})
            check_username = user.find_one({"username": request.form.get("username")})

            if check_email or check_username:
                flash("Credentials Already in use!", "error")
                return redirect("/register")

            new_user = user.insert_one(new_user)
            return redirect("/login")

        # If any error occurs, we can catch it
        except Exception as e:
            print(e)
            flash("Error occured during registration. Try again!", "error")
            return redirect("/register"),

    # When it's a GET request we sent the html form
    return render_template("register.html")


@auth_views.route("/login", strict_slashes=False, methods=["GET", "POST"])
def login():
    # Define application logic for profile page
    # If a user alredy exists and tries to be funny by
    # manually entering the /login route, they should be 
    # redirected to the index page 
    if current_user.is_authenticated:
        return redirect("/")

    if request.method == "POST":
        # Enter logic for processing registration
        from models.database import user, User

        # Get username and password from the form
        username = request.form.get("username")
        user_password = request.form.get("password")

        # Retrieve user from the database with username
        find_user = user.find_one({"username": username})

        # Return an error if user not in database
        if find_user == None:
            flash("Invalid Login Credentials!", "error")
            return redirect("/login")

        # Compare the user's password with the password returned from db

        is_valid_password = check_password_hash(find_user.get("password"), user_password)

        # If password does not match, redirect user to login again
        if not is_valid_password:
            flash("Invalid Login Credentials!", "error")
            return redirect("/login")

        # At this point all is well; so instantiate the User class 
        # This is to enable the Flask-Login Extension kick in
        log_user = User(find_user.get("username"), str(find_user.get("_id")))

        # use the login_user function imported from flask_login
        login_user(log_user)

        # Then return the user to the index page after sucess
        return redirect("/")

        # Make sure to do proper error handling with try/except
        # I don't want to make the code too bulky

    # for Get request to the route, we sent the html form
    return render_template("login.html")


# Create Sign Out Route which we'll create a button for
@auth_views.route("/logout", strict_slashes=False)
@login_required
def logout():
    # We wrap the logout function with @login_required decorator
    # So that only logged in users should be able to 'log out'
    logout_user()
    return redirect("/")

Cool, that's a lot of code! Let's quickly explain some of the things not properly covered in the documentation within the code.

The new functions we've imported

from ..., flash
from flask_login import login_required, logout_user, current_user, login_user
from werkzeug.security import generate_password_hash, check_password_hash

flash: This function allows us to send a message from one page to the next page. This allows us to do things like sending a notification to our page when maybe a registration/login attempt fails or is successful. You can access the message (string) within your template by using the function:

{% with messages = get_flashed_messages(with_categories=true) %}
    {% if messages %}
        <ul class=flashes>
        {% for category, message in messages %}
            {% if loop.first %}
                <li class="{{ category }}" style="color: white;">{{ message }}</li>
            {% endif %}
        {% endfor %}
        </ul>
    {% endif %}
{% endwith %}

login_required, logout_user, current_user, login_user:

login_required: You use it as a decorator for the routes you want to protect i.e routes that can only be accessed or used by logged in users. Just as we did for the /logout and /profile routes.
logout_user: You can call this function within your designated logout route. This will clear the cookies used to verify the user on every request by flask-login.
current_user: After a user logs in, the User instance created by the user is loaded here so you can use if for conditional rendering in your templates or within your route.
login_user: This function is used to login the user. It receives an instance of the User Class earlier defined.

from werkzeug.security import generate_password_hash, check_password_hash: Werkzeug module has tons of utility functions, classes and stuff that you can use within your flask application. We're using two functions here, to hash our password before saving it to the database. Since we're storing a hashed value to the database, we also need to compare what the user enters with the hashed value stored in database to see if they match. If it does, then you login the user.

Conditionally rendering elements within your templates.

Currently, visiting any page, you would find Sign In, Sign Up, Profile and Sign Out links all visible. But we need to make sure that Sign In should be shown to users who are not logged in, while the other three (excluding sign in) are visible only to users who are logged in.

So let's update our header tag in the templates/base.html file. Update only the Header Section as in our example for this project:

<!-- Preceeding parts remain the same -->

<header class="header-container">
    <a href="/"><h2 class="header-title">Flask Project</h2></a>
    <nav class="navigation-container">
        <ul>
            <a href="/login"><li class="link">Sign In</li></a>
            {% if current_user.is_authenticated %}
            <a href="/register"><li class="link">Sign Up</li></a>
            <a href="/profile"><li class="link">Profile</li></a>
            <a href="/logout"><li class="link">Sign Out</li></a>
            {% endif %}
        </ul>
    </nav>
</header>

<!-- Other parts remain the same -->

{% if current_user.is_authenticated %}: This block is used to conditionally render portions of the page to the user. you don't have to import current_user into the template, as it is globally available to all your templates. You check if it is authenticated, remember, the is_authenticated() method defined in your class returns True for authenticated users. Make sure to close the block with {% endif %}

Conclusion

Phew! This has been a very long, and truly exciting writing project. with a touch of weird GIFs haha. I hope you enjoy it and learn something from it too.

Remember, this project is just a skeleton project to give you the surface comfort with using the Flask Microframework to build your full stack applications and integration with MongoDB. Enjoy and have fun! Happy Coding from Stephen!

Additional Resources:

Building a Full Stack Web Application using Flask (Python Web Framework) - Part One

Stephen Omoregie — Mon, 08 Apr 2024 10:58:12 +0000

Python is pretty much a jack-of-all-trades programming language, with a simple syntax that makes it easily understood even for beginners. So, using its web framework (Flask) for building web applications is just as exciting and has an easier learning curve.

As a Fullstack Web developer, you will be responsible for handling both the front-end and back-end aspects of any project you're working on. This includes building user interfaces (templates), back-end logic, data modelling/persisting data in a database, third-party API integrations, or even building your own API services for others to consume.

Introduction

In this comprehensive guide, we'll be looking at how Flask helps simplify this seemingly complex skill set that is required for being a full-stack developer. We'll touch on topics like project structure, dependencies/third-party packages, Blueprints for writing modular code, file handling, database connection using MongoDB (PyMongo), User Registration/Authentication and Authorization.

Let's begin! 😎

Setting Up the Development Environment

I'll assume you already have python installed on your machine; I mean, if not, why not! (Download Here)

Installing Flask and Dependencies It's always advisable to run your project using virtual environments (example, the venv module), this will help isolate project dependencies specific to your project.

First of all, create a directory/folder for your project, let's call it Tutorial.

# Step 1: Create a new virtual environment
$ cd Tutorial/
$ python3 -m venv myenv

# Step 2: Activate the virtual environment
$ source myenv/bin/activate

Note: For terminal based commands, we'll stick with the linux version now, though it'll also be similar for Windows OS.

Now with the virtual environment activated, let's install some dependencies we'll be needing for the project.

(myvenv)Tutorial$ pip3 install flask pymongo flask-login

Project Structure

While Flask is not so strict on how you MUST write your code and structure your project, it helps to have an organized structure for better code maintainability and scalability. For this project, here's a structure that I'll recommend we follow:

Tutorial/
├── app.py
└── blueprints/
│   └── main_blueprint.py
├── models/
│   └── models.py
├── myvenv/
├── static/
│   └── css/
│   └── js/
│   └── images/
├── templates/
│   └── index.html
│   └── base.html
├── requirements.txt

app.py: This file will be at the root of our project directory. This file will serve as the entry point of our application. We'll instantiate the flask app in this file and other configurations.
templates: This directory will be where we store our html files that will be rendered when a page route is requested. Flask comes with built-in support for Jinja templating system which allows us to build pages with dynamic contents.
static: This directory will house the static assets needed by the application, such as css, images, javascript files. These assets will be served as needed.
blueprints: To make sure our app.py file is not crowded with many routes and other configurations, we'll be separating our routes into different files and using Blueprints will help us create routes in a separate file/directory and register them on our app.
models: In this directory, we'll create the model for our user for authentication. Or any type of model you need for your specific use case. In the file models.py, we'll be connecting to our database as well as creating a class needed by Flask-login to help with Authentication / Authorization on our app.

Running a Test Server

Flask has a built-in development server for easy testing and debugging of your application. Before we start the server, create a file app.py at the root of your project directory with the content below:

# File: Tutorial/app.py
from flask import Flask

# create an instance of the flask application
app = Flask(__name__)

# Create a route on your app
@app.route("/", strict_slashes=False, methods=["GET"])
def index():
    return "<h1>This is the Home Page</h1>"

A little bit about what's going on up there

At first, we import the Flask class from the flask package. Then we create an instance of our application and save it to the variable app, we also pass a special variable __name__ to the Flask class initialization. The __name__ argument is used to determine the root path of the application so it can find resource files relative to the location of the script. This is necessary for Flask to know where to look for resources such as templates and static files.

Next, we create a route decorator with a rule "/" that matches when our site is visited on www.example.com/ or www.example.com (the index page), we specify strict_slashes=False, this is to allow a more flexible url such that /about/ and /about will be treated as the same. We also specify the HTTP Request method that the route will respond to; the methods variable receives an array of string(s) (HTTP Methods like "GET", "POST", "PUT", "DELETE").

Just under the route decorator, a function is defined index which will handle the logic that determines what will be returned when the index url is requested. This can be something as simple as an HTML string (as in our example), or you can return JSON data or render a template to view.

Running the Development Server

# At the root of your project run the code
# below to start your development server
(myvenv) Tutorial$ flask run --port 5100 --debug
 * Debug mode: on
WARNING: This is a development server. Do not use it in a production deployment. Use a production WSGI server instead.
 * Running on http://127.0.0.1:5100
Press CTRL+C to quit
 * Restarting with stat
 * Debugger is active!
 * Debugger PIN: 139-345-994

(myvenv) Tutorial$ flask run --port 5100 --debug

With the entry point of our application being app.py, the above command will run our application on port localhost:5100 with debug mode activate. Debug mode ensures that our application restarts whenever we make changes to the files. Meaning you don't have to kill the server and relaunch again whenever you make a change.

Testing out our web server from the terminal.

(myvenv) Tutorial$ curl localhost:5100; echo "";
<h1>This is the Home Page</h1>
(myvenv) Tutorial$

Yaay! You just took the first step in launching a functional web server using flask. You can also visit the url localhost:5100 and your server will be there to answer!

Writing Modular Code with Blueprints

Blueprints are a fundamental concept in Flask especially for structuring larger applications. They are helpful in organizing your codebase by grouping related views, templates and static files into reusable modules. This promotes maintainability, readability and separation of concerns.

We'll create two blueprints for this project. In the file main_blueprint.py and auth_blueprint.py and subsequently register the blueprints on the app instance in app.py.

# File: blueprint/main_blueprint.py
from flask import Blueprint, request

main_views = Blueprint("main", __name__)

# Create routes on this blueprint instance
@main_views.get("/", strict_slashes=False)
def index():
    # Define application logic for homepage
    return "<h1>This is the Home Page</h1>"


@main_views.get("/profile/<string:username>", strict_slashes=False)
def profile(username):
    # Define application logic for profile page
    return f"<h1>Welcome {username}! This is your profile</h1>"

# File: blueprint/auth_blueprint.py
from flask import Blueprint, request

auth_views = Blueprint("auth", __name__)

# Create routes on this blueprint instance
@auth_views.route("/register", strict_slashes=False, methods=["GET", "POST"])
def register():
    # Define application logic for homepage
    if request.method == "POST":
        # Enter logic for processing registration
        return "<h1>After Registration</h1>"

    return "<h1>This is the Register Page</h1>"


@auth_views.route("/login", strict_slashes=False, methods=["GET", "POST"])
def login():
    # Define application logic for profile page
    if request.method == "POST":
        # Enter logic for processing login
        return "<h1>After Login</h1>"

    return "<h1>Here goes the Login Page</h1>"

Now we have to register these blueprints on the app. Let's modify the app.py file.

from flask import Flask
from blueprints.main_blueprint import main_views
from blueprints.auth_blueprint import auth_views

# create an instance of the flask application
app = Flask(__name__)

app.register_blueprint(main_views)
app.register_blueprint(auth_views)

With the code part covered, let's try to understand what's going on in the code snippets.

auth_views = Blueprint("auth", __name__): Here we create an instance of the Blueprint class and store it in auth_views variable. The first parameter is the name of the blueprint, this will be used to reference the functions defined for various routes with the url_for() function. Example url_for("auth.login"), we also pass the __name__ variable to register the location of the specific blueprint.
@auth_views.route('/register', methods=["GET", "POST"]): When defining routes, you can choose to specifically use the .get or .post or .put or .delete to restrict a function to respond to a specific HTTP request method. But using the .route method on the view, you can specify an array of methods you want the function to respond to, just like we've done with the /login and /register routes.
from flask import Blueprint, request: Whether you're within a blueprint or app instance file, you would need access to the request module, to allow you get access to the request object coming in from the user accessing your application. You can use dir(request) within one of your route functions to see what you have access to, eg. the method, the url params, the form, files, etc. More on this later.

So far, we've been sending simple HTML Strings directly from our views, next step, we'll talk about rendering static html template with or without dynamic data.

Working with Templates (Jinja)

While it may be tempting to just write the html as strings in your function, I mean, who doesn't like the lazy way out.

No!! You will not do that! Not on my watch! Haha.
Templates offer us many great tools to create the visible part of our web application which the users will be interacting with. Our templates will be good ol' html code, but extended with the Jinja templating engine, which will allow us do things like, extending an html (as base), dynamically loading assets according to page, variables, creating DOM elements with loops, conditional rendering of elements, etc.

Here's an example of home page for our project. To focus more on the learning of templating system, we'll put part of the base.html and index.html here. You can find the source code for this project on GitHub @ Flask_App_Tutorial

The base.html template will serve as a layout that all other child templates will inherit/extend. More on this later.

<!-- templates/base.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flask App</title>
    <link rel="stylesheet" href="{{url_for('static', filename='css/base.css')}}">
    <script src="{{url_for('static', filename='js/base.js')}}" defer></script>
    {% block css %}{% endblock css %}
    {% block js %}{% endblock js %}
</head>
<body>
    <header class="header-container">
        <a href="/"><h2 class="header-title">Flask Project</h2></a>
        <nav class="navigation-container">
            <ul>
                <a href="/login"><li class="link">Sign In</li></a>
                <a href="/register"><li class="link">Sign Up</li></a>
                <a href="/profile"><li class="link">Profile</li></a>
                <a href="/logout"><li class="link">Sign Out</li></a>
            </ul>
        </nav>
    </header>
    <!--Here other html files that extend this base template will come here 
    provided the names match, as with this example body_content-->
    {% block body_content %}{% endblock body_content %}

    <!--You can create multiple block contents that will be rendered when the 
    template that extends this template with matching block name will 
    rendered in the block place-->

    <footer class="footer-container">
        <p class="footer-details">Happy Coding! Feel free to use this project as a boilerplate for your other projects</p>
    </footer>
</body>
</html>

<!-- templates/index.html -->
{% extends 'base.html' %}

{% block css %}
<link rel="stylesheet" href="{{url_for("static", filename="css/index.css")}}">
{% endblock css %}

{% block js %}
<script src="{{url_for("static", filename="js/index.js")}}" defer></script>
{% endblock js %}

{% block body_content %}
<main class="main-container">
    <h1 class="main-header">Welcome to the Home Page!</h1>
    <p class="main-subtitle">Our little project is for learning building apps with Flask!</p>

</main>
{% endblock body_content %}

Now, let's wrap our head around what's happening in the above, it must look very different from the normal HTML you know, but let's touch some of the points.

Sure, here's a quick explanation of the templating syntax used in our Flask application:

{{ ... }}: This is used to insert the value of a Python expression into the HTML. For example, {{ url_for('static', filename='css/base.css') }} calls the url_for function with the arguments 'static' and filename='css/base.css', and inserts the result into the HTML. It is also used for inserting the values of a variable dynamically into your html file(s).
{% ... %}: This is used to execute Python statements. For example, {% block css %}{% endblock css %} defines a block that can be filled in by a child template. The block statement is a control statement in the Jinja template engine (which Flask uses). It defines a block that child templates can override. For conditional blocks, you have something like {%if variable == "value" %} Do this or that {% endif %}
{% block ... %}{% endblock ... %}: This defines a block in the template. Blocks are sections that child templates can override. In your template, you have defined two blocks: css and js for additional CSS and JavaScript files respectively, and body_content for the main content of the page.
{{ url_for('static', filename='...') }}: This is a Flask function that generates a URL for a static file. Flask automatically serves static files from the /static/ directory in your application's root directory. The url_for function generates the correct URL to these files, regardless of how your application is deployed.

This is a Jinja template that extends base.html. Here's a breakdown of the syntax:

{% extends 'base.html' %}: This line tells Jinja that this template "extends" base.html. That means it starts with the content of base.html, and then fills in or replaces blocks defined in base.html.
{% block css %}...{% endblock css %}: This block is used to add additional CSS files specific to this page. The link tag within this block is used to link the index.css file from the static directory.
{% block js %}...{% endblock js %}: Similar to the CSS block, this block is used to add JavaScript files specific to this page. The script tag within this block is used to link the index.js file from the static directory.
{% block body_content %}...{% endblock body_content %}: This block is used to define the main content of the page. The HTML within this block will replace the body_content block in base.html.

Try your hands on this; practice makes great! More resources on this at the end of this guide.

Let's call it a wraps this time, we'll continue with the remaining parts of this guide where we'll learn about:

Handling Form Submissions/File Uploads
Downloading Files
Connecting with a Database for Data Insertion and Retrieval using MongoDB
User Authentication and Authorization with Flask-Login

Resources:

Source Code: https://github.com/Cre8steveDev/Flask_App_Tutorial
Flask Documentation: https://flask.palletsprojects.com/en/3.0.x/
Jinja Templating Documentation: https://jinja.palletsprojects.com/en/3.1.x/
PART TWO PUBLISHED HERE

What Happens When You Type www.google.com in Your Browser and Press Enter.

Stephen Omoregie — Mon, 18 Mar 2024 10:36:10 +0000

Introduction

For many people who access the internet using their browsers, it's just as simple as entering the web address (url) on the browser and then pressing enter to get access to the information we seek. But, let's take a pause and wonder, what actually happens behind the scene when you type a web address into your browser and hit the enter key?

Aloooot! Yeeeees, a whole lot happens, but it happens so fast that the average internet user doesn't even think about it. This action that may seem simple actually sets off a complex chain of events that involves various technologies communicating and working together to bring you the information you need.

Now that the question has been put forth, this post will take you on a ride into the exciting world of the web stack and explain what unfolds when you enter "www.google.com" and press enter.

Let's start by exploring several key players involved in this process.

DNS (Domain Name System) Request

There are hundreds of millions of websites on the internet today, if not billions. These websites are hosted on servers/computers that have their own identity called IP Address - a unique numerical label assigned to every device on the internet. IP Addresses often look something like: 154.243.002.118; you can agree that memorizing these numbers can be a lot of work and it will be easy to mix up one website address from another when they're all in number formats like this.

The DNS acts like the information operator for a phonebook where websites are listed by names (like www.google.com) instead of numbers (Ip address). When you type in "www.google.com", your browser really can't understand this name, so it initiates a DNS request to a DNS server, asking it to translate "www.google.com" into an IP address of the target computer and then your request is processed further.

TCP/IP (Transmission Control Protocol/Internet Protocol)

You can think of TCP/IP as the language spoken on the internet. Once the DNS server translates "www.google.com" to an IP address (let's assuming it's 142.250.874.196), your browser can now communicate with the Google server. TCP/IP establishes a connection and breaks down the data you're requesting (the Google webpage) into smaller packets. These packets are then individually sent over the internet.

Firewall

Firewalls act as digital security guards, monitoring incoming and outgoing traffic on your computer. Before the data packets reach your browser, the might pass through a firewall that checks for any suspicious activity or malicious content. Firewalls are a great security measure that helps to ensure your computer's safety by clocking harmful traffic.

HTTPS/SSL

HTTPS is the more modern and enhanced version of HTTP, a protocol for communicating between computers. It stands for Hypertext Transfer Protocol Secure". When you see "HTTPS" at the beginning of a web address, it indicates a secure connection. This security comes from a technology called SSL (Secure Sockets Layer) or its successor, TLS (Transport Layer Security). When you request "https://www.google.com", HTTPS scrambles the data being exchanged between your browser and the Google server. This makes it very difficult for anyone eavesdropping on the communication to steal sensitive information like passwords or credit card details.

Load Balancers

Think of a load balancer as a traffic director during rush hour. With millions of users potentially trying to access a website like Google or Facebook simultaneously, a single server would be overwhelmed. The load balancer steps in, strategically distributing incoming traffic across a pool of web servers (often referred to as a server farm). This ensures that no single server gets overloaded, and users experience a smooth and responsive website.

Here are some real-world examples of load balancers:

HAProxy: A free and open-source software load balancer known for its performance and ease of use. Many companies, including Netflix, use HAProxy to manage their high traffic websites.
AWS Elastic Load Balancer (ELB): A cloud-based load balancing service offered by Amazon Web Services (AWS). This service allows companies to easily scale their web applications according to traffic demands.

Web Servers

Imagine a web server as a tireless waiter in a busy restaurant. When you request a webpage, the web server acts like the waiter, receiving your order (the request for a specific webpage) and fetching the necessary ingredients (HTML files, CSS styles, JavaScript code) from the kitchen (storage location). The web server then assembles these ingredients on a plate (prepares the webpage) and sends it back to you (your browser) for you to enjoy (view the webpage).

Here are some popular web server options:

Apache HTTP Server: One of the most widely used web servers globally, known for its reliability and flexibility. It powers millions of websites, including popular platforms like Wikipedia and eCommerce giant Amazon.
Nginx (pronounced Engine-X): Another popular choice, known for its efficiency and handling high traffic websites well. Many content delivery networks (CDNs) utilize Nginx for its speed and scalability.

Application Servers

While web servers primarily deal with static content, application servers take things a step further. Imagine an application server as a skilled chef in a restaurant kitchen. It receives instructions (requests) from the web server (waiter) and interacts with the pantry (database) to gather ingredients (data). The application server then prepares a customized dish (dynamic content) based on the specific recipe (user request). This dynamic content could be anything from personalized search results to displaying your shopping cart items on an e-commerce website.

Databases

The database is the heart of many dynamic websites, storing all the information that makes them function. In Google's case, the database might hold information about webpages you've visited, search history, or even emails (if you use Gmail). When the application server needs data to fulfill your request, it retrieves it from the database.

Conclusion

The web stack functions like a symphony orchestra, with various technologies working in harmony to deliver a seamless web experience. The next time you type in a web address and hit enter, take a moment to appreciate the intricate dance behind the scenes that brings the vast world of the web to life.

That concludes our exciting exploration of what happens behind the scenes when you type "https://www.google.com" and press enter.

DEV Community: Stephen Omoregie

The Day I Became Certified as a Full Stack Software Developer: Bragging Rights Article Haha

Officially a Certified Full Stack Software Developer.....yaaaay!

Project Starter Kit: Neon Postgres Database + ExpressJs + TypeScript and TypeORM + CLI Tool

My Kit

Link to Kit on GitHub

CLI Tool (Npm Package)

My Journey in Setting Up This Kit

Practical Guide to Set Up Multiple NodeJS Apps on AWS EC2 Instance with Automatic Deployment using GitHub Actions (Screenshots)

Introduction

Setting Up an EC2 Instance on AWS.

Setting Up the Environment

Configuring Nginx as a Reverse Proxy

Set up GitHub repositories and clone your applications

Set up PM2 to manage your Node.js applications

Set up automatic deployment using GitHub Actions

Checkout both apps running live (I will delete the instance after this tutorial - but you can see that they're being served based on the url /app1 and /app2).

Take a break!

Set up SSL/TLS for your domain using Let's Encrypt and Certbot

Conclusion

Additional Resources:

Take Note

Practical Guide to Send Emails from NodeJS/Express App using Gmail and Nodemailer (Screenshots and Code)

What You'll need.

Creating an App Password from Your Google Account.

Example .env File for configuration

Install the Required Dependencies

Quick Gist about Handlebars

Setting Up Reusable Functions For Loading the Template, Configuring Nodemailer and Sending Mails.

Code in Action (As Used in my project)

Conclusion

Cre8steveDev

Practical Guide to Implementing Functional SEO in NextJS App Router: Static & Dynamic Metadata

Drum Roll...

Getting Started

Metadata

What does a full-blown Metadata object look like?

Let's Dive Right In - How To use It In your Project

Creating a Reusable Metadata Function

Using the custom function in your root layout

Generating Dynamic Metadata

Robots and SiteMaps

A teeny-bitsy bit of a last step

How to Use it?

Conclusion and Errrm..... See ya

Development Made Easy for Lazy and Productive Devs - Get Code Snippets for Full or Basic Props for Native or Expo Components

Motivation

The Game Changer for me!

Get the Extension Now and Try it out

Wanna Try building your Own Extension?

Heads and Hands On Learning: My Mobile Development Journey with React Native (Expo) Begins

Tech Stack:

Key Learning So Far:

My Own Tip:

Building a MERN Stack Application for My Portfolio Project - Medikall: Lessons and Wins

Learning Points

A Little BS Guide for Building a Program for Making API Calls and Parsing JSON Data Using C Programming Language

Introduction

What's the Plan here?

Project Structure

Conclusion

Building a Full Stack Web Application using Flask (Python Web Framework) - Part Two

Handling Form Submissions/File Uploads

Sending Files as Download from your Application

Connecting with a Database (MongoDB)

Conditionally rendering elements within your templates.

Conclusion

Building a Full Stack Web Application using Flask (Python Web Framework) - Part One

Introduction

Setting Up the Development Environment

Project Structure

Running a Test Server

A little bit about what's going on up there

Running the Development Server

Testing out our web server from the terminal.

Writing Modular Code with Blueprints

Working with Templates (Jinja)

What Happens When You Type www.google.com in Your Browser and Press Enter.

Introduction

DNS (Domain Name System) Request

Checkout both apps running live (I will delete the instance after this tutorial - but you can see that they're being served based on the url `/app1` and `/app2`).