DEV Community: Andrew Irorere

How to DoS A server

Andrew Irorere — Sat, 17 Jan 2026 20:17:13 +0000

disclamer
This experiment was done in a controlled home lab on systems I own. No real-world systems were harmed. oh and educational purposes only

How It Started

Like many people learning cybersecurity, I used to think Denial of Service (DoS) attacks required massive botnets, insane bandwidth, and Hollywood-level hacking. Turns out, it doesn't. All you need is a vulnerable server and a way to exploit that vulnerability. No malware. No exploits. Just bad application design and a can-do attitude.

DoS vs DDoS

A DoS attack (Denial of Service) attack uses a single source to overwhelm a target, making it simpler to execute and ultimately block, while DDoS (Distributed Denial of Service) uses a network of compromised devices called a botnet to generate massive, distributed traffic, making it far harder to detect, mitigate, and more impactful. The key difference is distribution. DoS is one-to-one, while DDoS is many-to-one, leveraging a "distributed" network for greater power and stealth. Since I am using one machine to attack a target Dos

The Lab I Built

I set up a small, isolated lab using Oracle VirtualBox
Kali Linux → attacker machine
Ubuntu Linux → target machine

Both VMs were connected using a Host-only network, so that they could communicate with each other, so nothing was exposed to the internet for security reasons, and most importantly, everything stayed legal and safe. This was the “real” environment: two machines, communicating two roles, one goal.

The Vulnerable Server

Let's play a game. Can you spot what is wrong with the Python code below?

from http.server import BaseHTTPRequestHandler, HTTPServer
import time

a = 0

class VulnerableHTTPRequestHandler(BaseHTTPRequestHandler):
    def do_GET(self):
        global a
        time.sleep(3)
        self.send_response(200)
        self.send_header('Content-type', 'text/html')
        self.end_headers()
        self.wfile.write(bytes(f"Request processed. Count: {a}", "utf-8"))
        a += 1

def run(server_class=HTTPServer, handler_class=VulnerableHTTPRequestHandler, port=8080):
    server_address = ('', port)
    httpd = server_class(server_address, handler_class)
    print(f"Starting vulnerable server on port {port}...")
    httpd.serve_forever()

if __name__ == "__main__":
    run()

Did you see it?
time.sleep(3)

This was added to simulate “heavy processing,” and this single line would become the entire vulnerability. Why is this server vulnerable?

It is single-threaded
Each request blocks for 3 seconds
No rate limiting
No concurrency handling

This makes it an ideal target for an application-layer DoS attack.

Starting the Server

On Ubuntu, when I run the command
python3 vulnerable_server1.py

The server is running on port 8080.

which I can verify on my Kali by running:

curl http://192.168.56.103:8080

The server should respond correctly, and each request increases the counter.

The attack

On Kali, I ran this command:
ab -n 50 -c 10 http://192.168.56.103:8080/

At first glance, it didn’t look dangerous, but if you look closely, you will see that 50 total requests, 10 requests at a time, which in most development is nothing, but in the test development, almost immediately Responses slowed down, and requests started queuing. The server felt “stuck” I hadn’t flooded the network. and I hadn’t crashed the OS. I had simply asked the server to do more than it was designed to handle.

What Actually Happened

Here’s the problem, since the server is single-threaded, each requests is blocks for 3 seconds
Only one request can be processed at a time, so when 10 requests arrive simultaneously.
One request ran while the other 9 waited.d New requests piled on top. This wasn’t a bandwidth attack. It was an application-layer DoS.

Watching the Attack in Wireshark

As a Bonus and to truly understand what was happening, I opened Wireshark on my Kali Linux and captured traffic during the attack.

I applied this filter:
ip.addr == 192.168.56.103 && tcp.port == 8080

What I saw:

Repeated HTTP GET requests
Delayed responses
TCP retransmissions
Congestion builds up

In the real world, this kind of vulnerability exists in:

Internal tools
APIs
Microservices
Custom dashboards

Attackers don’t always break things. Sometimes they just wait for your code to break itself, such a vulnerability would never make it way to production, and if it did, it would be fixed or patched almost immediatialy but still this makes for a good learning exercise.

This could have been prevented by using async or multi-threaded servers, adding rate limiting and or placing a reverse proxy (like Nginx)

Conclusion

Breaking my own server was one of the most valuable lessons I’ve learned so far. It showed me how application-layer DoS really works, why design choices matter and what attack traffic actually looks like. If you’re learning cybersecurity, I highly recommend building labs like this. They’re safe, legal, and incredibly eye-opening.

Add on, I made this blog post without a plan on how to finish it I also tested out, and http spray DoS attack, but the blog was getting too long for that. If you want to check out the tool, it's on my github. I'm planning on improving it later in the coming days if I ever get the time to do that

Inspecting SSL Traffic Using FortiGate

Andrew Irorere — Sun, 04 Jan 2026 20:11:55 +0000

Secure Sockets Layer (SSL) is a critical feature in modern networks which rely heavily on encrypted communication. Today, over 90% of web traffic is encrypted using SSL/TLS, which protects sensitive information, including credentials, financial data, and personal records. While encryption provides privacy and security for users, it also introduces a major challenge for security teams as threats are now hidden inside encrypted traffic.

In the blog/article, we are going to be talking about

Why SSL traffic must be inspected
How SSL inspection works
How FortiGate performs SSL inspection
Step-by-step configuration
Security, privacy, and performance considerations

What is SSL Inspection 🧩

SSL Inspection is the process of decrypting encrypted traffic, inspecting it for threats, and re-encrypting it before forwarding it to the intended destination.

Types of SSL Inspection

Certificate

Inspect the SSL/TLS handshake
Verifies the identity of the web server
Used in web filtering

Deep Inspection

Decrypts incoming traffic to inspect it
If safe, re-encrypts the traffic and sends it to the recipients
Used with all types of security scanning

Why SSL traffic must be inspected 🤖

HTTPS offers protection by applying encryption to web traffic; however, it also introduces a potential security risk because attackers may attempt to use encrypted traffic to get around your network's normal defences. Attackers use HTTPS to bypass traditional security controls. Without SSL inspection, Malware downloads appear as normal HTTPS sessions, and phishing pages load without detection. SSL inspection allows security devices to decrypt, inspect, and re-encrypt traffic in real-time.

Moreover, Zero-Trust & Modern Security Models Require Visibility. Security models depend on continuous verification and inspection. Without SSL visibility, the security stack cannot:

Apply antivirus scanning
Enforce content filtering
Detect intrusion signatures

Client → Encrypted Traffic → FortiGate → Decrypt → Inspect → Re-Encrypt → Server

How FortiGate Performs SSL Inspection

FortiGate acts as a trusted intermediary between client and server using a controlled Man-in-the-Middle (MITM) approach.

Process

Client initiates HTTPS connection
FortiGate intercepts the handshake
FortiGate presents its own certificate to the client
FortiGate establishes a secure session with the server
Traffic is decrypted inside FortiGate
Security profiles inspect traffic
Traffic is re-encrypted and forwarded

This is possible only if client devices trust FortiGate’s CA certificate.

Certificate Warnings ⚠️

A common challenge when deploying Full SSL Inspection is the appearance of certificate warnings on client devices. These warnings occur because FortiGate dynamically generates certificates for each HTTPS site and signs them using its own internal Certificate Authority (CA). If the client device does not trust this CA, the browser interprets the connection as untrusted and displays warnings such as “Your connection is not private.” From the browser’s perspective, this looks identical to a malicious man-in-the-middle attack, even though it is a legitimate enterprise security process.

To eliminate these warnings, the FortiGate CA certificate must be exported from the firewall and installed into the Trusted Root Certification Authorities store on all client devices (Windows, macOS, mobile devices, and in some cases, individual browsers). Once the CA is trusted, browsers accept the dynamically generated certificates without errors and encrypted traffic can be inspected transparently. This step is mandatory for any stable SSL inspection deployment.

Configuration Walkthrough: FortiGate GUI

Step 1: Create SSL Inspection Profile

Security Profiles → SSL/SSH Inspection → Create New
Choose:

Full SSL Inspection for high security
Certificate Inspection for lightweight environments

Enable:

HTTPS
SMTPS
FTPS
POP3S / IMAPS (if required)

Step 2: Install FortiGate CA Certificate on Clients
System → Certificates → Export Fortinet_CA_SSL
Install certificate in:

Windows Trusted Root Certification Authorities
macOS Keychain
Mobile Device MDM
Browser trust store (if needed)

-Without this step, users will receive certificate warnings.

Step 3: Apply SSL Inspection in Firewall Policy

Policy & Objects → Firewall Policy → Edit Policy
Under Security Profiles:

Enable SSL Inspection
Select your created SSL profile
Enable AV, IPS, Web Filter, Application Control, etc.
Traffic flow now becomes fully inspectable.

Configuring SSL Inspection in Firewall Policy 🪛

Why It Matters: SSL inspection does nothing until applied to a firewall policy. This is where enforcement actually happens.

Policy Example
Source: Internal Network
Destination: Internet
Service: HTTPS
Action: Accept
Security Profiles: Enabled
SSL Inspection Profile: Full_SSL_Inspection

This ensures every HTTPS session passing through that policy is inspected.
You can also create exceptions for certain conditions, like:

Bypass inspection for banking sites
Exempt healthcare portals
Exclude sensitive internal systems

Best practices 🚔

Use hardware acceleration (CP9 / NP6 / NP7 chips)
Apply inspection only where necessary
Avoid decrypting low-risk traffic
Monitor system resources

Conclusion 🚛

Encrypted traffic is now the dominant carrier of modern cyber threats. Without SSL inspection, organisations operate blind to the majority of malicious activity on their networks.
FortiGate’s SSL inspection capabilities provide the visibility and control required to defend against modern attack techniques when implemented responsibly, securely, and efficiently.
By combining proper configuration, performance tuning, legal compliance, and best practices, security teams can fully leverage SSL inspection as a powerful defence mechanism in today’s threat landscape.

Flutter State Management for Rookies

Andrew Irorere — Tue, 11 Feb 2025 12:44:33 +0000

When it comes to state management in Flutter, I believe there are only three ways to do it: the right way, the smart way, and my way. That's what I'm here to discuss. State management is one of the most important concepts of Flutter. It defines how an app’s data changes over time and how different widgets and UI grow and interact. Before we begin, let's discuss the basics so that we are all on the same Page.

Fluter 101 😒

Flutter is an open-source cross-platform Framework think of React Native but better.

State pretty much refers to the current condition or data of an application at any given moment.

Management is the act of managing something.

I don't have any plans for Valentine's day 💔 just putting that out there.

State management in Dart and Flutter is all about managing the data that the app will render and how it will respond to user input. It’s about tracking changes to the state and updating the UI to reflect these changes. Understanding this concept is the first step towards mastering state management.

It's important to note that Flutter is declarative. Now what does that mean? It means that Flutter builds its user interface to reflect the current state of the app. When the state of the app changes (for example, the user flips a switch in the settings screen), you change the state, and that triggers a redraw of the user interface. There is no imperative changing of the UI itself (like.widget.setText) you change the state, and the UI rebuilds from scratch. Now, the Declarative state model is further classified into Ephemeral State (local state) and App State (global state) but let's not get too technical

How to Manage state 😎

~~The Right Way~~
Flutter comes with setState() for basic state updates. It is the most basic form of state management in Flutter. It's like the trusty Swiss Army knife of state management – useful for simple tasks. You would use it in a StatefulWidget by calling setState().

int _counter = 0;

void _incrementCounter() {
  setState(() {
    _counter++;
  });
}

However, for more complex apps, setState() can become unwieldy. Imagine using a Swiss Army knife to build a house – doable, but you'd probably want a proper toolbox. it's best suited for simple and localized state not meant to be shared across widgets.

The Smart way 🤓

There are several techniques for managing State in Flutter Each of them having significant strengths and weaknesses some of the most effective ways of state management approaches in Flutter include:

Provider 🪛: A simple and flexible package that makes state accessible throughout your widget tree. This is a mixture of dependency injection (DI) and state management, built with widgets for widgets. It’s a powerful and flexible way to manage state in Flutter. Think of it like having a shared whiteboard where everyone can see and update the state.

📝sidebar: Dependency Injection (DI) is a design pattern in programming that helps you write more modular, testable, and maintainable code. Think of it as instead of a class creating its own dependencies (like a car building its engine), it receives those dependencies from the outside (like the engine being delivered to the car factory).

The Provider wraps the InheritedWidget and hence makes state changes easier. It is one of the most suggested and prevalent approaches. Mostly used with medium to large apps for sharing app state in multiple widgets.

BLoC (Business Logic Component) 🧱: It’s a library that allows for predictable state management. It separates the business logic from the UI, where the state changes are managed through streams. making your code cleaner and easier to test. It's like having a dedicated team handling the data, while the UI team focuses on displaying it.

This is mostly used in large-scale apps where one wants a clean separation of concerns and has to deal with complex state transitions.

Riverpod 🤖: A compile-safe and testable alternative to Provider. Think of it as Provider 2.0, it's an advanced version of Provider. In some sense, it’s designed to overcome some limitations of Provider while adding better flexibility and testability.

Perfect for complex applications that require a robust and scalable state management solution.

GetX ❎: It provides high performance and is used when the app requires a large UI update. it is very simple and easy and offers state management, dependency injection, and route management together in just one package.

Best for small and medium apps. Use if you need a really fast and easy solution with just a bit of boilerplate.

Implementing State Management 👽

Once you’ve chosen a state management technique, the next step is to implement it in your app. This involves creating a state object, updating the state, and listening for state changes. For example, if you’re using the Provider technique, you would create a ChangeNotifierProvider and use the Consumer widget to listen for changes

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

// Model to hold the counter value
class CounterModel extends ChangeNotifier {
  int _count = 0;
  int get count => _count;

  void increment() {
    _count++;
    notifyListeners(); // Important: Notify listeners of the change
  }
}

void main() {
  runApp(
    ChangeNotifierProvider(
      create: (context) => CounterModel(), // Create the model
      child: MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: CounterScreen(),
    );
  }
}

class CounterScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Provider Counter')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'Count:',
              style: TextStyle(fontSize: 24),
            ),
            // Consumer rebuilds only when the count changes
            Consumer<CounterModel>(
              builder: (context, counter, child) {
                return Text(
                  '${counter.count}',
                  style: TextStyle(fontSize: 48, fontWeight: FontWeight.bold),
                );
              },
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          // Access the model and increment
          Provider.of<CounterModel>(context, listen: false).increment();
        },
        child: Icon(Icons.add),
      ),
    );
  }
}

Testing your State Management 🧪

After implementing state management, it’s important to test it to ensure it’s working as expected. This involves creating unit tests, widget tests, and integration tests. Testing is a crucial part of the development process, ensuring that your code works correctly and helping to prevent bugs and errors.


void main() {
  test('should increment counter', () {
    final myModel = MyModel();
    myModel.increment();
    expect(myModel.counter, 1);
  });
}

Choosing a Flutter State Management Approach 🚛

Choosing the right state management approach depends on several factors:

The complexity of an App: Is your app complex? If it is simple, then setState will do. For medium to higher-complexity apps, though, you need a stronger method, such as Bloc or Riverpod.
Scalability: Think about how your approach will scale when your app grows. Provider and Riverpod are highly scalable.
Ease of use: Now, if you are on the search for something easy to implement and fast, then comes into play GetX with its simplicity.
Community support: It helps to have the approach that has the community — behind with good documentation. Provider is very well documented, and it has a large community due to being a part of the Flutter ecosystem.

Some Mobile Development Jokes (Because Why Not?) 🃏

Why did the Flutter developer bring a ladder to the project meeting? Because they heard the app needed to be cross-platform!
What's the difference between a good programmer and a bad programmer? The good one worries about the code, and the bad one worries about the deployment. (And the Flutter developer worries about both, while also trying to figure out why the layout is breaking on Android)

Conclusion 💁🏽‍♂️

State management might seem daunting at first, but it's a crucial skill for any Flutter developer. It allows you to create more efficient, scalable, and maintainable apps. While it can be challenging to grasp at first, with practice and understanding, you can become proficient in it. By understanding the basics and exploring different solutions, you can tame the widget zoo and build robust, performant apps. Remember, the key to mastering state management is understanding the concept, choosing the right technique, implementing it correctly, testing it thoroughly, and optimizing it for the best performance.

PS: What's your Valentine plan if any?

Why is Python so Slow?

Andrew Irorere — Fri, 05 Apr 2024 20:36:11 +0000

Why is Python so slow, I know a lot of people expect me to shit all over Python but that's not what this post is all about sure I could talk about how stupid it's for having indentation instead of curly braces, or the ugly, built-in global functions. and don't even get me started on all the multiple Python versions. but I'm not even going to mention it. cause at the end of the day Python is still a beloved programming language for its readability, vast libraries, and beginner-friendly syntax.

However, what most developers don't know is that Python can take a backseat to languages like C++ when it comes to raw speed. But why exactly is this the case? Well, that's why you are here.

Context
Before talking about why Python is so slow, I feel it's important to know just how slow Python is Compared to other programming languages. An easy way would be to write a function that counts from one to one billion and track how long each language takes to complete the task. let's say we decide to use C++ and Python for this. well assuming all parameters are the same it would take 2.6 seconds for the C++ code and 1 minute 53 seconds for the Python code approximately 50 times slower. There's

But why exactly is this the case? Let's dive into the three main reasons:

1 Interpretation vs Compilation

Unlike compiled languages that are converted directly into machine code, Python is interpreted. This means the code is executed line by line instead of translating into machine code before executing, adding an extra layer of processing compared to pre-compiled instructions. There are plenty of tests out there but this paints a clear picture

Benefits:
Faster development cycle: Changes in the code are reflected immediately without recompiling.
Portability: Interpreted code can run on any machine with the interpreter installed, regardless of the underlying architecture.

Drawbacks:
Generally slower: The translation overhead adds extra processing time compared to pre-compiled machine code.
Limited control: Less control over memory management and hardware interaction compared to compiled languages.

2 Dynamic Typing

Python is dynamically typed, meaning variable data types are determined at runtime. While this offers flexibility, it requires extra checks during execution to ensure data compatibility whereas Statically typed languages, where types are declared upfront, can be optimized more efficiently.

Benefits of Dynamic Typing:

Rapid Prototyping: You can experiment with different data types without worrying about type declarations, allowing for quicker exploration during development.

Drawbacks of Dynamic Typing:

Potential Performance Overhead: Runtime type checks can add a slight overhead compared to statically typed languages where types are known beforehand.

3 Global Interpreter Lock (GIL)

Python's GIL ensures only one thread can execute Python bytecode at a time. This prevents race conditions (multiple threads trying to modify data simultaneously) but limits true parallel processing capabilities.

What is the GIL?

Imagine a playground with a single swing. The GIL is like that swing – only one person(thread) can be on it (executing Python bytecode) at a time. Even if you have a fancy playground with multiple swings (multiple CPU cores), the GIL restricts threads to take turns on a single one.

Impact of the GIL:

Limits True Parallelism: Python programs can't fully use multi-core processors for CPU-bound tasks because only one thread can execute Python bytecode at a time.

Conclusion

Now, before you completely write off Python for performance-critical tasks, here's the truth of the matter

Speed Isn't Always King. Often, development speed and programmer productivity outweigh raw execution time. Python's ease of use can lead to faster development cycles. while optimizations and Libraries techniques like profiling (identifying bottlenecks) and using optimized libraries like NumPy for numerical computing can significantly improve Python's performance.
Also in the case of multiprocessing, While the GIL limits true multithreading, Python offers multiprocessing, where separate processes can leverage multiple cores for tasks that can be broken down independently.

Extras ✨
As some of you could have guessed I'm pretty new to this writing not coding and I write about whatever idea pops into my head I'm pretty sure this is probably my third blog post ever so I would appreciate some feedback. Just make sure they are constructive nothing about my height or the fact I'm still single

The 9 types of Programmers in 2024

Andrew Irorere — Sat, 30 Mar 2024 20:58:01 +0000

Ah, programmers. The backbone of the digital age, and the unseen weavers of our online world. An offshoot of the Great Ape family closely related to humans usually distinguished by their bad postures, anti-social tendency and their ability to solve any problem using Google, just don't ask them to fix your printer. Within this vast tribe, there lurks a delightful diversity, each easily identifiable coding styles and personalities.

The Full-stack Developer

Fueled by copious amounts of cold brew and an ever-growing stack of hoodies, this programmer is typically a back-end developer who learnt how to centre a div. He now prides himself on being a master of both Frontend and backend and everything in between. Their workspace? A cluttered coffee shop where the only constant is the frantic clatter of their keyboard.

The Tech Bros and Tech Baes

This programmer is the archetype that launched a thousand memes. They embody a certain brand of bravado, often sporting expensive gadgets and the latest tech apparel like the Apple Vision Pro, Big curve monitors, Standing Desk and mechanical keyboards. often the first one to use the newest and most trending piece of tech in the market. They might drop tech buzzwords liberally and have an inflated sense of their importance. But, beneath the bravado often lies a genuine passion for technology.

The Tech Hater

This is a type of programmer who knows how unreliable & dangerous some technology can be and feels like AI is someday going to take their job. They mostly use Linux and spend a significant amount of time building software that the average developer has never heard of you will never find much about them online cause they are mostly security conscious and go to great lengths to hide their digital footprint can be found using 5 VPNs at a time and they usually have a surprising ability in Hacking.

The DevOps

This is a programmer who appears to have no particular skills in the sense that no one knows much about what they do but they are usually in every team and are mostly your boss all we know is that this programmer thrives in chaos. They can troubleshoot server crashes with ninja-like reflexes and automate entire workflows with a single script. maybe that's why they are always so smug.

The Introvert

This is the Hollywood cliche programmer variant and most times it's mostly spot on this is the type of programmer with little to no social skills and pretty much spends their entire free time coding and playing video games and is usually blessed with exceptional coding. In the 1990s people like this were bullied at school for being nerds but now thanks to the magic of the internet they have high-paying jobs and girlfriends who love them and not because they are now rich.

The Codefluencer

Its natural habitat is not a code editor like VsCode or an open-source platform like GitHub but a social media platform most likely Twitter after spending a day learning how to display Hello World in HTML this type of programmer thinks they are the best in the world and tries to makes the world a better place by posting memes and hot takes all day long and they probably will end up with a higher paying job than you as a "developer Associate" because he masters the act of virtue-signalling. not to be mistaken for

The AI-Powered Programmer

Over the past few years, Artificial Intelligence has completely changed how things are done in the modern world and no one knows this more than the AI-powered programmer most of them are even all for it they use the best and latest AI tools available like GitHub-copilot, Chat GPT, Gemini and so on. And with that, they can do their job five times faster.

The 10x Developer

There's a legend whispered among programmers of the mythical 10x developer. This elusive creature is a rare breed said to be ten times more productive than the average dev, churning out flawless code at lightning speed! Some say they're a myth, others pretend to be them but their natural problem-solving ability and their knowledge of codebase transcends beyond that of normal devs.

The Ancient Coder

The last of its kind some say there are only about 900 left in the world imagine a developer that is so old they saw the fall of the Roman empire, this particular type of developer is usually older than the internet and has Long silver hair with a big white beard like Gandalf the grey only codes in C or Assembly their favourite IDE is VIM and their Depth of knowledge transcends that of normal human; which is rumoured to have been discovered through psychedelics that are no longer available today.

Conclusion

so what do you think of these types of developers and how many have you meant in person? If you feel like I missed one let me know in the comments.

How to PWA you App like a pro

Andrew Irorere — Sat, 23 Mar 2024 21:24:32 +0000

Hello gang welcome to the place where you are currently reading this so I'm going to be talking about how to turn your React or Next.js app into a PWA which as I'm sure you know stands for Progressive web app.

Progressive Web Apps (PWAs) have become a game-changer in the world of web development. They offer the best of both worlds: the accessibility of a website and the capabilities of a native mobile app.

What is a Progressive Web App?

some of you might be wondering what's a PWA? well, google that sh*t what do you think this is? introduction to Computer Science instead here are some of the reasons why you should PWA your website

Reliable: They work offline and in low network conditions.
Fast: They load quickly and respond faster to user interactions smoothly.
Engaging: They provide a rich, app-like experience.
Discoverable: They can be easily indexed by search engines.

Steps to Transform Your Next.js App into a PWA

Some Prerequisites:

A Next.js Project
next-pwa Installed
A Manifest.json file
Configured next.config.js
Service Worker

Creating a Next.js project

Now create a Next.js project I believe in you.

Install the PWA dependency:

Some libraries simplify the PWA setup process for Next.js. A popular option is next-pwa. You can install it using npm, yarn or whatever you think makes your life easier.
yarn add next-pwa

Create a manifest file:

The manifest file provides information about your PWA, including its name, icons, and theme colour. You can create a manifest.json file in your project's root directory with details like this:

{ "short_name": "My PWA", "name": "My Progressive Web App", "icons": [ { "src": "/icons/icon-72x72.png", "sizes": "72x72", "type": "image/png" }, // Add icons for different sizes ], "start_url": "/", "display": "standalone", "theme_color": "#007bff", "background_color": "#fafafa" }
you can also add a description and pay attention to the image sizes

Configure next.config.js

in your Next.js config file, import and configure next-pwa.

Note strict mode might be optional. After running next build, this will generate two files in your public: workbox-*.js and sw.js, which will automatically be served statically.

**If you didn't use the next-pwa commands then you will have to register the service worker manually which is a drag *

Extras

Add an Offline Access Page (Optional):

For a better user experience offline, you can create a custom page (/offline.html) that displays when the network is unavailable.

Conclusion

Now you have a working PWA app once deployed you can validate your PWA with Next.js using dev tools in the lighthouse. you can also add push notifications but that's for another blog maybe😉;

About the Author
I'm Andrey and I wrote this blog because I remember trying to do this myself some years ago and all the resources I could find were either outdated or specific to react.js this is my first Blog post ever so tell me what you think.

Hello world

Andrew Irorere — Sun, 03 Jan 2021 12:07:41 +0000

Currently looking for a paying job.
I'm mainly a front-end javascript developer