Shailesh Ladumor's Posts

In this article, I show you how to set up SSH in windows10,

first of all, you have a question what is the ssh key, and why do we need it?

you can watch this video or follow an article.

Let me explain a bit more, An SSH key is a secure access credential used in the Secure Shell protocol. SSH keys use key pairs based on public key infrastructure technology, the gold standard for digital identity authentication and encryption, to provide a secure and scalable method of authentication. as you know all developers use git for pushing, fetching, and pulling their code from GitLab, GitHub, and any other tools.

So, using SSH key you can use git for your repository and get authentication from GitHub or any tool where you add ssh.

When you set up an SSH key, you create a key pair that contains a private key (saved to your local computer) and a public key.

So, Let's Set up SSH for Git on Windows

Step1: Set up your default identity

firs of all open your terminals like gitbash or cmDer.

• Now, type the command ssh-keygen and enter and command prompts you for a file to save the key in:

$ssh-keygen Generating public/private rsa key pair. Enter file in which to save the key (/c/Users/emmap1/.ssh/id_rsa):

• Press enter to accept the default key and path,/c/Users/<username>/.ssh/id_rsa. or you can specify the path and then press enter.

• Enter and re-enter a passphrase when prompted.

• final out put in your terminal is look likes,

  ssh-keygen 
  Generating public/private rsa key pair.
  Enter file in which to save the key (/c/Users/shailesh/.ssh/id_rsa):
  Created directory '/c/Users/shailesh/.ssh'.
  Enter passphrase (empty for no passphrase):
  Enter the same passphrase again:
  Your identification has been saved in /c/Users/shailesh/.ssh/id_rsa.
  Your public key has been saved in /c/Users/shailesh/.ssh/id_rsa.pub.
  The key fingerprint is: e7:94:d1:a3:02:ee:38:6e:a4:5e:26:a3:a9:f4:95:d4 shailesh@InfyOm-PC

• Let's navigate to path cd /c/Users/shailesh/.ssh/ and fire ls command for confirming file generated or not.

• ls command displays two files, one for the public key (for example id_rsa.pub) and one for the private key (for example, id_rsa) if successfully generated.

Step 2: Add SSH in Bitbucket.

• let's fire command cat id_rsa.pub on the terminal and make sure you stay on the .ssh directory.
• Now, you can see the key in the terminal. so, copy it and add it to bitbucket. click here for Github to add SSH to your account.

Step 3: Add the SSH key to the ssh-agent.

fire command $eval ssh-agent into the terminal and you get output like Agent pid 9795. 9765 PID may be different in your PC.

Step 4: Check Login in terminal

fire command ssh -T git@bitbucket.org in your terminal and you can get output like

Warning: Permanently added the RSA host key for IP address '104.192.141.1' to the list of known hosts.
authenticated via ssh key.

You can use git to connect to Bitbucket. Shell access is disabled

Recently, I have created a new package for Laravel Community. it's called Laravel PWA. first of all what is PWA? let me explain a bit more about PWA. PWA means progressive web application. PWA provides a facility to install your web application on mobile and desktop. you don't need to write lots of line code in native platform-specific code.

You can create a PWA site in a few minutes using Laravel PWA.

You can watch the video tutorial as well to install this package.

Step 1:

Install the package by the following command,

composer require ladumor/laravel-pwa

Step 2:

Add Service Provide into app.php config file in provider section. You can skip this step if you installed it in Laravel 6 and more.

Ladumor\LaravelPwa\PWAServiceProvider::class,

Step 3:

Add Facade to app.php config file in aliases section. You can skip this step if you installed it in Laravel 6 and more.

'LaravelPwa' => \Ladumor\LaravelPwa\LaravelPwa::class,

Step 4:

I think installation is done and no need to publish all the assets using the following command,

php artisan laravel-pwa:publish

Step 5:

This step is very important. you published all the assets in the previous step. now, you need to link all the assets in your main blade file. for ex app.blade.php

Add the following code in the root blade file in the header section.

<!-- PWA  -->
<meta name="theme-color" content="#6777ef"/>
<link rel="apple-touch-icon" href="{{ asset('logo.PNG') }}">
<link rel="manifest" href="{{ asset('/manifest.json') }}">

Add following code in root blade file before close the body,

<script src="{{ asset('/sw.js') }}"></script>
<script>
    if (!navigator.serviceWorker.controller) {
        navigator.serviceWorker.register("/sw.js").then(function (reg) {
            console.log("Service worker has been registered for scope: " + reg.scope);
        });
    }
</script>

You should watch this tutorial if you want to set it up manually instead of using this package.

Generally, we are using a Swagger in Laravel. it will take time if we set up swagger manually. so, In this article, I going to show you very easy steps for setup in Laravel.

You can watch the following video tutorial as well.

Steps 1:

You should download these assets from here. unzip the folder and go to the public directory. you can found the swagger directory in the side public folder. let open the swagger directory and you can see the following files.

• jquery-2.1.4.min.js
• style.css
• swagger-bundle.js
• swagger.yaml

If are you still confuse then visit this link for files.

now, Copy the swagger directory and put it in your laravel application on the same path.

Steps 2:

We need to load swagger with proper swagger UI. so, let navigate to resources/views on the downloaded source code project.

You can see the swagger directory inside the views directory. copy the swagger directory to your laravel application on the same path. I don't think you need to do anything in this view file. let's go to the next step.

Steps 3:

You need to update this swagger.yaml file. you should update the following details first. and then add APIs documentation in this file. Api document example given here. you can refer it.

info:
  description: LPT APis
  version: 1.0.0
  title: LPT Frontend API's
basePath: /api/

Steps 4:

In this step, you need to create a route for loading swagger docs. so, let's open the web.php file add the following few lines of code.

Route::get('/docs', function () {
    return view('swagger.index');
});

Now, run a command php artisan serve and open http://127.0.0.1:8000/docs or open a virtualHostDomain/docs if you have one.

You should watch this tutorial as well if you using InfyOm Generator

You can watch the following tutorial and you can continue reading this article.

Follow the Steps given here for setup push notification.

Step 1: You can quickly install Push via npm

npm install push.js --save

Step 2: Update webpack.mix.js

Add following code into webpack.mix.js for copy and publish assets like js in the public directory. you can see the example here

mix.copy('node_modules/push.js/bin/push.min.js',
    'public/assets/js/push.min.js');

I hope you know how to use laravel mix. you can watch this video tutorial if you want to know more about the laravel mix.

fire, npm run dev command and publish js.

Step 3: Add assets in blade file

Add script before closing body tag.

<script src="{{ asset('assets/js/push.min.js') }}"></script>

Step 4: Add this code where you want to show a push

// add logo in public dir and use it here
const iconPath = '{{ asset('logo.PNG') }}
 Push.create("Hello Shailesh!",{
       body: "Welcome to the Dashboard.",
       timeout: 5000,
       icon: iconPath
});

In this article, I show you how to set up react application in Laravel Framework. as you know react is a very flexible frontend library and works with together any backend framework, so let start and follow the following steps. I hope you have created the laravel application.

You can watch the following video tutorial or follow this article as well,

Step 1:

Let's go to the resource directory in laravel. now let's create react application. you should watch the following tutorial if you don't know how to create react application.

Step 2:

Merge the package.json and package-lock.json files in the root. fire npm install && npm run dev command in terminal for compile react application to js.

Step 3:

In this step, you need to set up a webpack.mix.js file. put the following code in the webpack.mix.js file.

mix.options({
  postCss: [
      require('autoprefixer'),
  ],
});

mix.setPublicPath('public');

mix.webpackConfig({
  resolve: {
      extensions: ['.js', '.vue'],
      alias: {
          '@': __dirname + 'resources'
      }
  },
  output: {
      chunkFilename: 'js/chunks/[name].js',
  },
}).react();

// used to run app using reactjs
mix.js('resources/react-app/src/index.js', 'public/js/app.js').version();
mix.copy('resources/react-app/public', 'public');

NOTE: Don't forget to change the index.js path based on your application name

Step 4:

Let's add <div id="root"></div> to your application's root blade file

Step 5:

Let's inlude <script type="text/javascript" src="{{ mix('js/app.js') }}"></script> to your application's root blade file before end the body tag.

So, the Basic setup is done. enjoy react with laravel.

Generally, we are using a Laravel One Signal package for push notification. if you are planning to use one signal in the mobile application then this package right for you.

Recently, I add a new feature UserDevice. let me explain why I added support for user Device APIs.

We need to create an API to register a device because One Signal sends a push notification using os player id. so, we need to store os_player_id in the backend from the mobile application. So, need to create an API for it.

Now. you can save your time using this package. you can Generate APIs using one artisan command,

php artisan one-signal.userDevice:publish

This command generates the following files,

• UserDeviceAPIController
• UserDeviceAPIRepository
• UserDevice (model)
• Migration So, everything is ready in minutes and delivered an API on the spot.

Also, do not forget to add the following routes to the api.php file.

use App\Http\Controllers\API\UserDeviceAPIController;

Route::post('user-device/register', [UserDeviceAPIController::class, 'registerDevice']);
Route::get('user-device/{playerId}/update-status', [UserDeviceAPIController::class, 'updateNotificationStatus'])

Today we are going to see how we can image based on resolution. We have the most common issue of loading big images in small devices take time. So, the basic solution is to use the picture element to load a different image in different devices and resolutions.

<picture>
    <source media="(min-width:900px)" srcset="infyom_logo_lg.jpg">
    <source media="(min-width:700px)" srcset="infyom_logo_md.jpg">
    <source media="(min-width:500px)" srcset="infyom_logo_sm.jpg">
    <img src="infyom_logo_xl.jpg" alt="Flowers" style="width:auto;">
</picture>