Forem: Md Anik Islam

Droplet/VPS Configuration with Nginx with Https For Node and NextJs

Md Anik Islam — Thu, 18 Apr 2024 03:57:03 +0000

In the ever-evolving landscape of web development, efficient server configuration is paramount to ensuring optimal performance and scalability of applications. With the emergence of versatile technologies like MERN (MongoDB, Express.js, React.js, Node.js) stack for JavaScript-based applications and PHP for server-side scripting, developers are empowered to create dynamic and interactive web experiences. However, the efficacy of these applications greatly relies on the underlying server infrastructure.

Enter Nginx, a high-performance web server renowned for its speed, scalability, and flexibility. Leveraging Nginx as the cornerstone of your Droplet/VPS (Virtual Private Server) configuration lays the foundation for a resilient and efficient hosting environment. This guide aims to walk you through the process of configuring Nginx to seamlessly accommodate both MERN and PHP applications on your Droplet/VPS.

Why Nginx?

Nginx's asynchronous, event-driven architecture makes it adept at handling concurrent connections with minimal resource consumption, making it an ideal choice for serving both static and dynamic content. Its robust feature set, including reverse proxying, load balancing, and SSL/TLS termination, empowers developers to optimize performance and security effortlessly.

Step 1: Get SSH Username, Password and Connect to server using terminal
If you are using vps from digital ocean then you need to first create a droplet according to your configuration and then click on your droplet and then you will find named console. After clicking on there you will find a terminal that directly connect to your server

If your using external one then open your terminal and hit

ssh username@serverip

then it take your password and give your password and login to your server.

Step 2 – Installing Nginx

sudo apt update
sudo apt install nginx

run above command to install nginx

Step 3 – Adjusting the Firewall

Before testing Nginx, the firewall software needs to be adjusted to allow access to the service. Nginx registers itself as a service with ufw upon installation, making it straightforward to allow Nginx access.

sudo ufw app list

As demonstrated by the output, there are three profiles available for Nginx:

Nginx Full: This profile opens both port 80 (normal, unencrypted web traffic) and port 443 (TLS/SSL encrypted traffic)
Nginx HTTP: This profile opens only port 80 (normal, unencrypted web traffic)
Nginx HTTPS: This profile opens only port 443 (TLS/SSL encrypted traffic)

It is recommended that you enable the most restrictive profile that will still allow the traffic you’ve configured. Right now, we will only need to allow traffic on port 80.

You can enable this by typing:

sudo ufw allow 'Nginx HTTP'

You can verify the change by typing:

sudo ufw status

Step 4 – Checking your Web Server

We can check with the systemd init system to make sure the service is running by typing:

systemctl status nginx

Output:

now hit your ip to your browser you will find nginx landing page

Step 5 — Installing Certbot

The first step to using Let’s Encrypt to obtain an SSL certificate is to install the Certbot software on your server.

Install Certbot and it’s Nginx plugin with apt:

sudo apt install certbot python3-certbot-nginx

Step 6 — Confirming Nginx’s Configuration

Certbot needs to be able to find the correct server block in your Nginx configuration for it to be able to automatically configure SSL. Specifically, it does this by looking for a server_name directive that matches the domain you request a certificate for.

To check, open the configuration file for your domain using nano or your favorite text editor:

sudo nano /etc/nginx/sites-available/example.com

Find the existing server_name line. It should look like this:

...
server_name example.com www.example.com;
...

If it does, exit your editor and move on to the next step.

If it doesn’t, update it to match. Then save the file, quit your editor, and verify the syntax of your configuration edits:

sudo nginx -t

If you get an error, reopen the server block file and check for any typos or missing characters. Once your configuration file’s syntax is correct, reload Nginx to load the new configuration:

sudo systemctl reload nginx

Step 7 — Allowing HTTPS Through the Firewall

If you have the ufw firewall enabled, as recommended by the prerequisite guides, you’ll need to adjust the settings to allow for HTTPS traffic. Luckily, Nginx registers a few profiles with ufw upon installation.

sudo ufw status

To additionally let in HTTPS traffic, allow the Nginx Full profile and delete the redundant Nginx HTTP profile allowance:

sudo ufw allow 'Nginx Full'
sudo ufw delete allow 'Nginx HTTP'

Step 8 — Obtaining an SSL Certificate
Certbot provides a variety of ways to obtain SSL certificates through plugins. The Nginx plugin will take care of reconfiguring Nginx and reloading the config whenever necessary. To use this plugin, type the following:

sudo certbot --nginx -d example.com -d www.example.com

This runs certbot with the --nginx plugin, using -d to specify the domain names we’d like the certificate to be valid for.

If this is your first time running certbot, you will be prompted to enter an email address and agree to the terms of service. After doing so, certbot will communicate with the Let’s Encrypt server, then run a challenge to verify that you control the domain you’re requesting a certificate for.

Step 8: Setting Up for MERN
Update and upgrade the packages on the droplet:

sudo apt update && sudo apt upgrade -y

Nginx is the tool that will handle all the routing to our Next.js application. Create a new Nginx configuration file for your Next.js application:

sudo nano /etc/nginx/sites-available/nextjs

Paste the following configuration, replacing server_name with your domain name or droplet IP address:

server {
  listen 80;
  server_name YOUR_IP_ADDRESS;
  location / {
    proxy_pass http://localhost:3000;
    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;
  }
}

Save and close the file. Create a symbolic link to enable the configuration:

sudo ln -s /etc/nginx/sites-available/nextjs /etc/nginx/sites-enabled/

Test the Nginx configuration for any syntax errors:

sudo nginx -t

Now clone your git repo in your server. Then run

npm install

Build the Next.js application:

npm run build

Finally, start the Next.js application:

npm start

Your Next.js application is now deployed and accessible at your domain name or droplet IP address. To keep your application running in the background and automatically restart on crashes or server reboots, you should use a process manager like PM2

Step 9: Setting Up PM2 Process Manager

We ran npm start from within our Droplet. Sometimes this command may stop running for reasons like the server restarted or it needed to install updates. We will use a tool called PM2 to make sure that our Next.js application is always running. PM2 will even restart the Next.js application if it goes down.

To install PM2 globally on your droplet:

sudo npm install -g pm2

Start the Next.js application using PM2:

pm2 start npm --name "nextjs" -- start

This command will generate a script that you can copy and paste into your terminal to enable PM2 to start on boot.

Save the current PM2 processes:

pm2 save

For NodeJS Run via PM2

pm2 start app.js --name "my-express-app"

Conclusion
In this section, I tried to complete all part related to VPS configuration for node and Next JS. Hopefully its find you good. If facing any problem, Comment section is open

Simple and Easiest Toast Notifications in Laravel: A Quick Guide

Md Anik Islam — Fri, 06 Oct 2023 18:34:39 +0000

Hi Artisan,
What's up? Hope's all are good. Today, we'll explore the easiest way to show toast notifications in Laravel. We'll be using the popular JavaScript library called Toastr to achieve this.

You can easily follow this for any laravel version. and for example i am using laravel 10.

Short Introduction of Toast:

Toast notifications are a common feature in web applications that allow you to provide non-intrusive feedback or information to users. They typically appear as small, temporary messages that slide in from the top or bottom of the screen. In Laravel, you can easily implement toast notifications to enhance user experience and provide real-time updates.

Step1 : Install a laravel Project

In first step, If you haven't installed Laravel in your system then you can run bellow command and get fresh Laravel project.



composer create-project --prefer-dist laravel/laravel laravel-toast

Step2 : Create Master Layout for Toast

Go to Resource/views path and create a simple master layout like below



<!DOCTYPE html>
<html lang="en">

<head>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>  Management Solution.</title>
    <link rel="shortcut icon" href="../img/favicon.ico">
    <!--STYLESHEET-->
    @include('layouts.css')

    @stack('ex_js')
</head>
<!--TIPS-->
<!--You may remove all ID or Class names which contain "demo-", they are only used for demonstration. -->

<body>
    <div id="container" class="effect mainnav-lg navbar-fixed mainnav-fixed">
        <!--NAVBAR-->
        <!--===================================================-->
        @include('layouts.header')
        <!--===================================================-->
        <!--END NAVBAR-->
        <div class="boxed">
            @yield('content')
            <!--===================================================-->
            <!--END CONTENT CONTAINER-->
            <!--MAIN NAVIGATION-->
            <!--===================================================-->
            @if (Auth::user()->is_super == 1)
                @include('layouts.nav')
            @else
                @include('nav')
            @endif
            <!--===================================================-->
            <!--END MAIN NAVIGATION-->
            <!--END ASIDE-->
        </div>
        <!-- FOOTER -->
        <!--===================================================-->
        <footer id="footer" style=" background-color: #A8A8A8; color: white;">
            <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
            <div class="hide-fixed pull-right pad-rgt">Currently v2.0</div>
            <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
            <!-- Remove the class name "show-fixed" and "hide-fixed" to make the content always appears. -->
            <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
            <p class="pad-lft">&#0169; 2023 Technical support by <a href="https://www.techlozi.com/" target="_blank"
                    class="btn-link">techlozi</a></p>
        </footer>
        <!--===================================================-->
        <!-- END FOOTER -->
        <!-- SCROLL TOP BUTTON -->
        <!--===================================================-->
        <button id="scroll-top" class="btn"><i class="fa fa-chevron-up"></i></button>
        <!--===================================================-->
    </div>

    @include('layouts.js')
    @include('layouts.custom_js')
    @stack('custom_js')
    @yield('scripts')

</body>

</html>

Step3 : Adding CDN Link

In Head Section of Master layout add this below css cdn of Toast



 <link href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.css" rel="stylesheet">

In end Section of Master layout add this below JS cdn of Toast



 <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js"></script>

Step4 : Toast Message Script Configuration

Adding this branch of code below JS cdn of Toast



 <script>
        @if (Session::has('message'))
            var type = "{{ Session::get('alert-type', 'info') }}"
            switch (type) {
                case 'info':

                    toastr.options.timeOut = 10000;
                    toastr.info("{{ Session::get('message') }}");
                    var audio = new Audio('audio.mp3');
                    audio.play();
                    break;
                case 'success':

                    toastr.options.timeOut = 10000;
                    toastr.success("{{ Session::get('message') }}");
                    var audio = new Audio('audio.mp3');
                    audio.play();

                    break;
                case 'warning':

                    toastr.options.timeOut = 10000;
                    toastr.warning("{{ Session::get('message') }}");
                    var audio = new Audio('audio.mp3');
                    audio.play();

                    break;
                case 'error':

                    toastr.options.timeOut = 10000;
                    toastr.error("{{ Session::get('message') }}");
                    var audio = new Audio('audio.mp3');
                    audio.play();

                    break;
            }
        @endif
    </script>

You can modify style or popup time from here. And you can add more case from here as much you need

Step5 : Handle Message From Controller

First I am creating a controller by using below command



php artisan make:controller BannerController

In this Controller i am writing a function which will update status of a banner and my code is below



   public function bannerStatus($bannerId, $status)
    {
        $banner = Bannner::find($bannerId);
        $banner->status = $status;
        $banner->save();

        $notification = array(
            'message' => 'Successfully Done',
            'alert-type' => 'success'
        );

        return redirect()->back()->with($notification);
    }

In this branch of code you will find a array name $notification and there is two key here . One is Message or Notification other one is which type of Alert it it. Alert-type must be same as master layout script code. Other wise it will fail to work.

OutPut Example

Here is some out screenshot ot toast.



   $notification = array(
            'message' => 'Successfully Done',
            'alert-type' => 'success'
        );



      $notification = array(
            'message' => 'Error Done',
            'alert-type' => 'error'
        );



      $notification = array(
            'message' => 'Waring Done',
            'alert-type' => 'warning'
        );



      $notification = array(
            'message' => 'Info Done',
            'alert-type' => 'info'
        );

How To Export Unique Barcode to Excel In Laravel

Md Anik Islam — Sun, 23 Apr 2023 19:33:26 +0000

Hi Artisan,
What's up? Hope's all are good. In this tutorial, I will give you an example to export barcode in excel in Laravel by using JavaScript.

You can easily export barcode in laravel 5, laravel 6, laravel 7, laravel 8, laravel 9 and laravel 10 version.

Step 1

In first step, If you haven't installed Laravel in your system then you can run bellow command and get fresh Laravel project.

composer create-project --prefer-dist laravel/laravel export-barcode

Step 2

Now we need a install a barcode package of laravel. there is so many barcode package we have for laravel. Among them you can use any one. In this case i am installing picqer/php-barcode-generator package for barcode generator, that way we can use it's method. So Open your terminal and run bellow command.

composer require picqer/php-barcode-generator

Step 3

In this step, we will create one route for testing example. So, let's add new route on that file.
routes/web.php

<?php
Route::view('export-barcode', 'export-barcode');

Now we need to create export-barcode.blade.php for display bar code. so let's create blade file as like bellow code:

resources/views/export-barcode.blade.php

Step 4

This is the main part of this tutorial. Here we will doing our main operation to export barcode to excel. Note that the generated barcodes are in base64 format. So whenever we need to export a barcode to excel. First need to save generate bar code to your local storage. Here is code save base64 image to local.

    @php
        $generatorPNG = new Picqer\Barcode\BarcodeGeneratorPNG();
        $somecode = time() . '.png'; //left as excersise for the reader.
        $baseImage = 'data:image/png;base64,' . base64_encode($generatorPNG->getBarcode('000005263635', $generatorPNG::TYPE_CODE_128));

        $img = str_replace('data:image/png;base64,', '', $baseImage);
        $img = str_replace(' ', '+', $img);
        $data = base64_decode($img);

        $path = public_path() . '/barcode/' . $somecode;
        file_put_contents($path, $data);
    @endphp

After Saving The image to local use that saved path of image in Rendered Table.

Step 5

Finally we need a js function which will export excel. Here is the below code of js Function.

$(function() {
            $(".exportToExcel").click(function(event) {
                console.log("Exporting XLS");
                $("#studentTable").table2excel({
                    exclude: ".excludeThisClass",
                    name: $("#studentTable").data("tableName"),
                    filename: "StudentTable.xls",
                    preserveColors: false
                });
            });
        });

Don't forget to import below CDN link.

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="https://cdn.rawgit.com/rainabba/jquery-table2excel/1.1.0/dist/jquery.table2excel.min.js"></script>

Output

Here is the snapshot of our Output.

Note: If You don't want to save all the barcode in your local storage then you can hit Ajax request that delete all the barcode image after export.