Mehedi Hasan's BLog

Monday, June 27, 2022

How to install Nginx and apache HTTP server on Ubuntu

Nginx is an open source HTTP web server that is often used as reverse proxy or HTTP cache. Nginx is popular for high-performance, speed, stability and low resource consumption.

In this article, we will walk through installing and setting up NginX server on Ubuntu. Follow these steps to install and setup NginX on your ubuntu.

Requirement

You need to be logged in non-root user with sudo permission.

Installing Nginx

Nginx is available Ubuntu's default repository, so you can directly install with below command.

sudo apt-get update
sudo apt-get install nginx

After installing it, open your browser and run your server IP address. If you see this page, then you have successfully installed Nginx on your Ubuntu. This default page placed at /var/www/html/ location.

Configure Nginx

Check ufw application list with below command.

sudo ufw app list

Add Nginx to use port 80.

sudo ufw allow 'Nginx HTTP'

If you want to check Nginx server status, then you can run following command.

sudo systemctl status nginx

Add websites to Nginx

When using multiple websites, you need to add your websites to Nginx configuration. For that first create a new Nginx configration file.

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

And put the site details in it.

server {
    listen 80;
    listen [::]:80;

    root /var/www/html/website;
    index index.html index.htm index.nginx-debian.html;

    server_name website www.website.com;

    location / {
            try_files $uri $uri/ =404;
    }
}

Now create a website folder /var/www/html/website. And also give 755 permission.

sudo mkdir /var/www/html/website
sudo chmod -R 7555 /var/www/html/website

Now create simple page for website homepage.

sudo nano /var/www/html/website/index.html

And put any HTML code to check.

<!DOCTYPE html>
<html>
<head>
    <title>Hello World!</title>
</head>
<body>
    <h1>Hello World!</h1>
    <p>Welcome to Website.com</p>
</body>
</html>

Save this file. And now restart the Nginx server.

sudo systemctl restart nginx

Now open your and open your website. you should get your page.

Apache is open-source and most widely used web server in the world. It provides dynamic modules, and powerful support to website.

In this article, we will go through on how to install Apache web server in your Ubuntu 20.04 system.

Prerequisites:

You should have non-root user account logged in with sudo privileges to install Apache server.

Install apache2 server

Apache is already included in Ubuntu's repository, So you can directly install apache server from the Terminal command.

First update the repository index with bellow command.

sudo apt-get update

Install Apache server:

sudo apt-get install apache2

Configure apache server

First check the Apache in ufw application list.

sudo ufw app list

And allow the Apache server

sudo ufw allow 'Apache'

You can also check the ufw status

sudo ufw status

Apache server status

You can check the apache server status with the command:

sudo systemctl status apache2

Start the Apache server

sudo service apache2 start

Or stop the server

sudo service apache2 stop

This way, you can also restart the server

sudo service apache2 restart

This way you can setup your Apache to your server. If you have any suggestions or query, please let us know in the bellow comment section.

Sunday, June 26, 2022

How to install SSL certificate on Ubuntu server

SSL certificate is becoming mandatory for web application. All modern web browsers are blocking request and ask user permission to proceed.

In this article, I will share you how you can install SSL certificate using Terminal access.

After you logged in to server, First generate CSR using openssl command.

openssl req -new -newkey rsa:2048 -nodes -keyout yourdomain.key -out yourdomain.csr

This will ask few question through wizard. Answer them and proceed for next step.

Now we need to configure Apache server to use .key and .csr certificate files from home directory. Apache main configuration file located at /etc/apache2/sites-available/000-default.conf file. Open the file using nano editor and change file.

<VirtualHost *:443>
    ServerAdmin admin@yourdomain.com
    DocumentRoot /var/www/html
    ServerName Domain name (Ex - test.com)
    ServerAlias www.yourdomain (www.test.com)
    SSLEngine on
    SSLCertificateFile /etc/apache2/ssl/c09fdeafb99483d9.crt (path from crt file which generate from godaddy (.crt file))
    SSLCertificateKeyFile /etc/apache2/ssl/bsstgulm.key (path from key file when generate the csr for domain)
    SSLCACertificateFile /etc/apache2/ssl/gd_bundle-g2-g1.crt path from crt file which generate from godaddy (.crt file))
    <Directory /var/www/html>
        Options Indexes FollowSymLinks MultiViews
        AllowOverride All
        Require all granted
    </Directory>
</VirtualHost>

<VirtualHost *:80>
       ServerName Domain name (Ex - test.com)
    ServerAlias www.yourdomain.com (www.test.com)
    Redirect permanent / https://www.yourdomain.com
</VirtualHost>

In Terminal go to this /etc/apache2/ path and run the below command:

apache2ctl configtest
a2enmod ssl

Lastly you will need to restart Apache server.

sudo service apache2 restart

Now your domain will be ssl certificate installed. I hope this article will help you.

Link: https://hackthestuff.com/article/how-to-install-ssl-certificate-on-ubuntu-server

Sunday, May 8, 2022

Remove git file from gitignor cached command

1. git rm --cached <file>

2. git rm -r --cached <folder

Tuesday, April 19, 2022

Vue Js Reset Password With Laravel API

In this article, we will discuss “How to make Vue Js Reset Password With Laravel API”. In our previous article on this series, you will learn Laravel JWT Authentication and Vue Js application setup with Vue Auth and Laravel JWT Auth. I will recommend you to read out both of the previous parts for better understanding. You can skip those if you are looking only for the specific User Reset Password functionality using Laravel API’s.

Handle Password Reset Request

We are using our “AuthController” to handle password reset functionality. Add the following traits to our Authentication Controller.

Illuminate\Foundation\Auth\SendsPasswordResetEmails;
Illuminate\Foundation\Auth\ResetsPasswords;

After that, you need to add the following function which handles the notification mail. End user receives a mail on his/her email. Where they click on the reset link, then the user clicks and redirect to our application to reset the password.

/**
 * Send password reset link. 
 */
public function sendPasswordResetLink(Request $request)

    return $this->sendResetLinkEmail($request);

Note that, sendResetLinkEmail method does not return JSON response for our API. Because it’s defined for web base functionality so we need to override the response for our API.

The response is manage by sendResetLinkResponse and sendResetLinkFailedResponse function. You can found these functions in the SendsPasswordResetEmails trait.

Add the following function in your authentication controller.

/**
 * Get the response for a successful password reset link.
 *
 * @param  \Illuminate\Http\Request  $request
 * @param  string  $response
 * @return \Illuminate\Http\RedirectResponse|\Illuminate\Http\JsonResponse
 */
protected function sendResetLinkResponse(Request $request, $response)

    return response()->json([
        'message' => 'Password reset email sent.',
        'data' => $response
    ]);


/**
 * Get the response for a failed password reset link.
 *
 * @param  \Illuminate\Http\Request  $request
 * @param  string  $response
 * @return \Illuminate\Http\RedirectResponse|\Illuminate\Http\JsonResponse
 */
protected function sendResetLinkFailedResponse(Request $request, $response)

    return response()->json(['message' => 'Email could not be sent to this email address.']);

Custom Email Notification

You need to use the following artisan command to create a custom notification.

php artisan make:notification MailResetPasswordNotification

You will found the newly generated notification class at “app/Notifications”.

We need to extend the “Illuminate\Auth\Notifications\ResetPassword” and override the “toMail” function. After updating all the code notification class looks like below, you can update your “MailResetPasswordNotification.php” with following code snippet.

<?php

namespace App\Notifications;

use Illuminate\Bus\Queueable;
use Illuminate\Notifications\Notification;
use Illuminate\Contracts\Queue\ShouldQueue;
use Illuminate\Notifications\Messages\MailMessage;

use Illuminate\Auth\Notifications\ResetPassword;

class MailResetPasswordNotification extends ResetPassword

    use Queueable;

    /**
     * Create a new notification instance.
     *
     * @return void
     */
    public function __construct($token)
    
        parent::__construct($token)
    

    /**
     * Get the notification's delivery channels.
     *
     * @param  mixed  $notifiable
     * @return array
     */
    public function via($notifiable)
    
        return ['mail'];
    

    /**
     * Get the mail representation of the notification.
     *
     * @param  mixed  $notifiable
     * @return \Illuminate\Notifications\Messages\MailMessage
     */
    public function toMail($notifiable)
    
        $link = url( "/reset-password/".$this->token );
        return ( new MailMessage )
            ->subject( 'Reset Password Notification' )
            ->line( "Hello! You are receiving this email because we received a password reset request for your account." )
            ->action( 'Reset Password', $link )
            ->line( "This password reset link will expire in ".config('auth.passwords.users.expire')." minutes" )
            ->line( "If you did not request a password reset, no further action is required." );    

    /**
     * Get the array representation of the notification.
     *
     * @param  mixed  $notifiable
     * @return array
     */
    public function toArray($notifiable)
    
        return [
            //
        ];

In this notification class, I’m using the ResetPassword trait. Here, I override the toMail function where we use our Vue Js app URL to handle the reset password form. In this URL we are sending a unique token. A token is mandatory to add in this mail otherwise the notification sending is totally meaningless.

To finalize our notification, we need to update our User Model. Please check the below mention code snippet, and add in your User Model.

/**
 * Override the mail body for reset password notification mail.
 */
public function sendPasswordResetNotification($token)

    $this->notify(new \App\Notifications\MailResetPasswordNotification($token));

Create API Routes

Now, we need to create routes which handle notification mail and update password. So open the “routes/api.php” and update your routes.

Route::prefix('v1')->group(function () 
    Route::prefix('auth')->group(function () 
        ...
        // Send reset password mail
        Route::post('reset-password', 'AuthController@sendPasswordResetLink');
        
        // handle reset password form process
        Route::post('reset/password', 'AuthController@callResetPassword');
        ...
    );
);

Reset Password

As per the route, which handles the reset password process. I’m creating a “callResetPassword” method in the AuthController and make sure this function can be accessed by unauthenticated users. So the user can easily process the reset password request.

/**
 * Handle reset password 
 */
public function callResetPassword(Request $request)

    return $this->reset($request);

This function calls the reset method, this method sets the new password, save the user, set a different remember token for the user. But, we are making this functionality for the Vue Js and using JWT authentication in our API so we don’t need to store a remember token. Check the following resetPassword method and add this in your controller.

/**
 * Reset the given user's password.
 *
 * @param  \Illuminate\Contracts\Auth\CanResetPassword  $user
 * @param  string  $password
 * @return void
 */
protected function resetPassword($user, $password)

    $user->password = Hash::make($password);
    $user->save();

    event(new PasswordReset($user));

If you face issues to use PasswordReset and Hash in your controller. Then add the following code snippet in your AuthController before the start of your controller class.

use Hash;
use Illuminate\Auth\Events\PasswordReset;

After that, we need to manage the response. Because as per our API, we need a JSON response. But, the default method response is not in JSON format so we need to override the response method for our API’s.

Add the following functions in your AuthController to override the reset password response.

/**
 * Get the response for a successful password reset.
 *
 * @param  \Illuminate\Http\Request  $request
 * @param  string  $response
 * @return \Illuminate\Http\RedirectResponse|\Illuminate\Http\JsonResponse
 */
protected function sendResetResponse(Request $request, $response)

    return response()->json(['message' => 'Password reset successfully.']);


/**
 * Get the response for a failed password reset.
 *
 * @param  \Illuminate\Http\Request  $request
 * @param  string  $response
 * @return \Illuminate\Http\RedirectResponse|\Illuminate\Http\JsonResponse
 */
protected function sendResetFailedResponse(Request $request, $response)

    return response()->json(['message' => 'Failed, Invalid Token.']);

Vue Js Application Route

Here I’m creating two routes, first for a reset link request form and second for processing a reset password form. So open your “resources/js/router.js” and add the following routes.

const routes = [
  ...
   
    path: '/reset-password', 
    name: 'reset-password', 
    component: ForgotPassword, 
    meta:  
      auth:false 
     
  ,
   
    path: '/reset-password/:token', 
    name: 'reset-password-form', 
    component: ResetPasswordForm, 
    meta:  
      auth:false 
     
  
  ...
]

Create Forget Password Reset Link From

As per the first route, I’m creating a component “ForgotPassword.vue” at “resources/js/page” directory. In this component, we create a form where the user fills there registered email id and request the reset link.

<template>
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-6">
        <div class="card card-default">
          <div class="card-header">Reset Password</div>
          <div class="card-body">
            <form autocomplete="off" @submit.prevent="requestResetPassword" method="post">
              <div class="form-group">
                  <label for="email">E-mail</label>
                  <input type="email" id="email" class="form-control" placeholder="user@example.com" v-model="email" required>
              </div>
              <button type="submit" class="btn btn-primary">Send Password Reset Link</button>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default 
    data() 
      return 
        email: null,
        has_error: false
      
    ,
    methods: 
        requestResetPassword() 
            this.$http.post("/auth/reset-password", email: this.email).then(result => 
                this.response = result.data;
                console.log(result.data);
            , error => 
                console.error(error);
            );
        
    

</script>

In the above ForgotPassword.vue component, I’m using the API which sends an email to the users who want to reset the password. The user needs to click on the link which redirects a user to our second route. Where the user has to enter the new password for reset.

I’m using mailtrap to test email notifications. It’s easy to add in your Laravel application. You just need to create an account on mailtrap then add your mailtrap credentials in your “.env” file. After this, you will receive all your emails on your mailtrap inbox.

You can learn more on Laravel Mailable here.

As per the screenshot, when you click on the Reset Password button then user redirect to our application where he/she able to reset there password.

Create Forget Password Request Form

As per the second route, I’m creating a component “ResetPasswordForm.vue” at “resources/js/page” directory. In this component, we create a form where the user fills there new password then submit the form.

<template>
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-6">
        <div class="card card-default">
          <div class="card-header">New Password</div>
          <div class="card-body">
            <!-- <ul v-if="errors">
              <li v-for="error in errors" v-bind:key="error"> msg </li>
            </ul> -->
            <form autocomplete="off" @submit.prevent="resetPassword" method="post">
              <div class="form-group">
                  <label for="email">E-mail</label>
                  <input type="email" id="email" class="form-control" placeholder="user@example.com" v-model="email" required>
              </div>
              <div class="form-group">
                  <label for="email">Password</label>
                  <input type="password" id="password" class="form-control" placeholder="" v-model="password" required>
              </div>
              <div class="form-group">
                  <label for="email">Confirm Password</label>
                  <input type="password" id="password_confirmation" class="form-control" placeholder="" v-model="password_confirmation" required>
              </div>
              <button type="submit" class="btn btn-primary">Update</button>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default 
    data() 
      return 
        token: null,
        email: null,
        password: null,
        password_confirmation: null,
        has_error: false
      
    ,
    methods: 
        resetPassword() 
            this.$http.post("/auth/reset/password/", 
                token: this.$route.params.token,
                email: this.email,
                password: this.password,
                password_confirmation: this.password_confirmation
            )
            .then(result => 
                // console.log(result.data);
                this.$router.push(name: 'login')
            , error => 
                console.error(error);
            );
        
    

</script>

As per our email notification mail, you see URL contains the unique token. And we send this token with our form parameters to the server using API. After that our API handle this request and update the user password.

Conclusion

In this article, we are discussing “Vue Js Reset Password With Laravel API”. I’m trying to explain each of the steps which require to implements Reset Password feature in Vue Laravel application. Hope this article will helps you in your development. We will discuss more on Laravel and Vue Js in our future articles. Please feel free to add comments if any query or you can send your feedback 😉

https://medium.com/@CodeBriefly/vue-js-reset-password-with-laravel-api-part-3-737b7f3e04ab#:~:text=Handle%20Password%20Reset%20Request&text=Illuminate%5CFoundation%5CAuth%5CResetsPasswords,application%20to%20reset%20the%20password.

Monday, April 11, 2022

NVM Cheat Sheet

Instructions for installing the Node Version Manager on Mac or Ubuntu. The nvm tool can be used to choose a specific version of NodeJs/npm.

Install `nvm`

$ curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.2/install.sh | bash

See https://github.com/creationix/nvm#install-script.

Tips And Tricks

$ nvm ls-remote                 # lists all of the available versions of NodeJs & iojs
$ nvm ls                        # list locally installed version
$ nvm install 0.12.3            # install the version 0.12.3 (see ls-remote for available options)
$ nvm use 0.12.3                # switch to and use the installed 0.12.3 version
$ nvm which 0.12.2              # the path to the installed node version
$ nvm current                   # what is the current installed nvm version
$ nvm alias default 0.10.32     # set the default node to the installed 0.10.32 version
$ nvm --help                    # the help documents

Mehedi Hasan's BLog

Monday, June 27, 2022

How to install Nginx and apache HTTP server on Ubuntu

Requirement

Installing Nginx

Configure Nginx

Add websites to Nginx

Prerequisites:

Install apache2 server

Configure apache server

Apache server status

Sunday, June 26, 2022

How to install SSL certificate on Ubuntu server

Sunday, May 8, 2022

Remove git file from gitignor cached command

Tuesday, April 19, 2022

Vue Js Reset Password With Laravel API

Handle Password Reset Request

Custom Email Notification

Create API Routes

Reset Password

Vue Js Application Route

Create Forget Password Reset Link From

Create Forget Password Request Form

Conclusion

Monday, April 11, 2022

NVM Cheat Sheet

Install `nvm`

Tips And Tricks

PostgreSQL (postgre) Setup on macOS 12 (MacBook Pro 2016) Without Homebrew setup process

Search This Blog

Monday, June 27, 2022

Requirement

Installing Nginx

Configure Nginx

Add websites to Nginx

Prerequisites:

Install apache2 server

Configure apache server

Apache server status

Sunday, June 26, 2022

Sunday, May 8, 2022

Tuesday, April 19, 2022

Handle Password Reset Request

Custom Email Notification

Create API Routes

Reset Password

Vue Js Application Route

Create Forget Password Reset Link From

Create Forget Password Request Form

Conclusion

Monday, April 11, 2022

Install nvm

Tips And Tricks

Install `nvm`