InfyOm Blog

latest-post

Last week, we run into a problem for one of the large Gatsby + ReactJS + Laravel projects in hosting which is hosted with Apache Webserver on Amazon AWS EC2. The problem we were facing was, for some reason, when we reload the Gatsby website, it was giving a 404 error page.

If you open a home page and then a normal visit then the website will fully function, but if you reload the page then it gives an error. And we found it happens when we are using Dynamic routing of React Route in Gatsby as per show in Gatsby documentation here.

Also, what we found, if we test the website build with gatsby serve then it works fine. But while using Apache, it behaves differently and we found that this problem has been faced by lots of people over the internet.

So what we came up with is, we used gatsby serve with an apache proxy. Here is how we did it,

Step 1 - Setup Project

As a first step, clone the project on the server and run a command, gatsby build to create a gatsby build.

Step 2 - Setup PM2 for Gatsby Serve

The next step that we need to do is run gatsby serve. But as you know, we can not run this command directly via console, because as you exit from the console, the command will be terminated.

So we will be using pm2 package, a NodeJS utility that is used to run nodejs apps.

For that, we will need to install pm2 globally. Run the following command to install it,

npm install pm2 -g

You can find other installation ways here if you need.

Once the installation has been done, let's run the gatsby serve command via pm2. For that run the following command from the gatsby project folder,

pm2 start gatsby --name my-web-app -- serve

where my-web-app you can replace with the name of your app.

Once, it's running, try to test it, if it's working correctly by opening the URL http://your-ip-address:9000/. Make sure, port 9000 is opened on your server for traffic.

Step 3 - Configure Apache

Once, gatsby serve is working and tested. The next step is to configure apache to proxy all port 80 traffic to port 9000.

For that, edit your apache conf file (or virtual host conf file), and add the following lines (or configure it to something like the following),

<VirtualHost *:80>
        ServerName my-web-app.infyom.com

        ServerAdmin webmaster@infyom.com

        ProxyRequests On
        ProxyPass / http://localhost:9000/
        ProxyPassReverse / http://localhost:9000/

        ErrorLog ${APACHE_LOG_DIR}/my-web-app.infyom.com.error.log
        CustomLog ${APACHE_LOG_DIR}/my-web-app.log combined

        ......
        # any other options below as per your need
        ......
</VirtualHost>

The next step you need to do is restart your apache server by,

sudo service apache2 restart

And then you can just open the URL https://my-web-app.infyom.com and it should work fine.

Bonus

New Deployment

Whenever you deploy a new code, you again need to run gatsby build and then pm2 restart my-web-app. Then only it will take new changes.

Troubleshooting

Sometimes, we found that we need to restart apache as well after the new deployment. so if you run into any trouble, then make sure to restart apache as well and it should solve the problem.

I hope it may help you to resolve your 404 problem.

July 16, 20213 minutesuserMitul Golakiya

Posts

post

People nowadays are becoming more intelligent, so better to protect our application's content/data from those who are calling themself hackers.
One of the best examples is the data URLs from AWS buckets. it's not a good idea to store sensitive data into a public AWS Bucket, as the URL is accessible by the people.

Of Course, you can store profile avatars and others data to the public bucket's that not contains any confidential information. so that's fine. 
But when it's about confidential information like PAN CARD Details, AADHAR Card Details, Bank Informations we Must Recommend using AWS Protected Bucket.

In this tutorial, we are going to show that how we can prevent that kind of case, Or how we can integrate AWS Protected Bucket in our Laravel Application.
 
The following code will help you to generate a pre-signed AWS URL that will prevent our data, that URL is non guessable and it will expire within some minutes/hours specified by us.

So let's start with some code :

            $s3 = \Storage::disk(config('filesystems.s3_protected_disk'));
    $client = $s3->getDriver()->getAdapter()->getClient();
    $expiry = "+1 minutes";
    $command = $client->getCommand('GetObject', [
        'Bucket' => \Config::get('filesystems.disks. s3_protected_disk.bucket'),
        'Key'    => 'Path to your file',
    ]);
    $request = $client->createPresignedRequest($command, $expiry);
	    return (string) $request->getUri();

So here we have created an s3 instance and it's stored on the $s3 variable, we have specified the expiry time as 1 minute so the given URL for data will be expired within a minute.
Also, we have to specify the bucket name and path to our protected file to generate AWS pre-signed URL.

it will return the pre-signed URL and its looks like as the following URL.

             https://pre-signed.s3.au-west-2.amazonaws.com/image.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=xxxxxxxx%2F20180210%2Feu-west-2%2Fs3%2Faws4_request&X-Amz-Date=20210210T171315Z&X-Amz-Expires=60&X-Amz-Signature=xxxxxxxx&X-Amz-SignedHeaders=host

Hope this helps.


July 16, 20212 minutesauthorVishal Ribdiya
post

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']);

If you are a good Eye listener then you should watch the video tutorial

July 08, 20211 minuteauthorShailesh Ladumor
post

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.

The <picture> element will be for the art direction of responsive design.

The element contains two tags.

  • <source>
  • <img>

So, the browser will look for the first <source> element where the media query matches the current width, and then it will display the image. The <picture> element is required as the last child of the <picture> element.

Let me show you an example of how to display a different image in different widths.

Here is a Code example,

<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>
June 18, 20211 minuteauthorShailesh Ladumor
post

Basically, we set up email/username and password login in all our projects. but, sometimes we need to implement s passwordless login in laravel application,

First of all, what is passwordless login? passwordless login is an authentication method that allows the user to log in without entering a password.

In this article, I show you how to set up passwordless login laravel step by step.

Step 1:

one great laravel package Laravel Passwordless Login provides the ability to log in without a password. 

This package provides a temporary signed URL link that logs in a user, What it does not provide is a way of actually sending the link to the route to the user. This is because I don't want to make any assumptions about how you communicate with your users.

Step 2:

Open the terminal and go to the project directory and fire the following command to install

composer require grosv/laravel-passwordless-login

Step 3:

Configure the following variables in your env file

LPL_USER_MODEL=App\User
LPL_REMEMBER_LOGIN=false
LPL_LOGIN_ROUTE=/magic-login
LPL_LOGIN_ROUTE_NAME=magic-login
LPL_LOGIN_ROUTE_EXPIRES=30
LPL_REDIRECT_ON_LOGIN=/
LPL_USER_GUARD=web
LPL_USE_ONCE=false
LPL_INVALID_SIGNATURE_MESSAGE="Expired or Invalid Link"

Step 4:

Create one function in your login controller. it looks like

use App\User;
use Grosv\LaravelPasswordlessLogin\LoginUrl;

function sendLoginLink(\Request $request)
{
    $user = User::where('email','=', $request->get('email))->first();

    $generator = new LoginUrl($user);
    $url = $generator->generate();

    //OR Use a Facade
    $url = PasswordlessLogin::forUser($user)->generate();

    $data['url'] = $generator->generate();
    $data['user'] = $user;

    Mail::to($user->email)->send(new UserLoginMail($data));
        
    return back();
}

Step 5:

Set following route in your web.php

Route::post('/user/login', [LoginController::class, 'sendLoginLink'])->name('userLogin');


Step 6:

Create one mailable. you can refer a doc if not familiar.  also, fire the following command for create a mailable

php artisan make:mail UserLoginMail

Step 7:

Create a Email UI as per your requirement.

Video tutorial available as well here 



April 02, 20212 minutesauthorShailesh Ladumor
post

Lots of developers have a question How do I create a global gitignore file? so, In this article, I show how to set up a global git ignore.

Reviewing pull requests, I often see contributors sneakily adding editor configuration to the repository’s .gitignore file. If everyone would commit their environment-specific .gitignore rules, we’d have a long list to maintain! My repository doesn’t care about your editor configuration. There’s a better solution to this: a personal, global .gitignore file for all your repositories. Here’s how you can set one up. create a .gitignore file for your global rules.

You need to set up your global core.excludesfile configuration file to point to this global ignore file. So, let's start step by step

Step1:

Create a file .gitignore on your profile C:\Users\{username} for example C:\Users\Shailesh

Step 2:

Now you can set a  .gitignore  path with a three-way. we need to tell to git this my global git ignore file. 

First Way:  Using Windows git bash

Let's open Windows git bash and fire the following command,

git config --global core.excludesFile '~/.gitignore'


Second Way:  Using Windows cmd

Let's open Windows cmd and fire the following command,

git config --global core.excludesFile "%USERPROFILE%\.gitignore"


Third Way:  Using Windows PowerShell

Let's open Windows PowerShell and fire the following command,

git config --global core.excludesFile "$Env:USERPROFILE\.gitignore"


 So, you can easily set the .gitignore global file. You can also see here video tutorial here as well. 




March 06, 20211 minuteauthorShailesh Ladumor
post

Recently,  I've started working on one project where we need to set up a virtual host with HTTPS because I need to run that project with expose and Shopify in my local development machine. I've wamp 3.2.3 on my local machine.

I spend a lot of time for setup it. so, I thought I should write one article for step by step guide. So, I show you in this article how to setup HTTPS for a local machine.

Step 1 - Install Wamp

Install wamp server if not installed in your local machine. you can download the latest version of the wampserver from here. wampserver is available in 32 bit and 64 bit. make sure you select the correct version of the wampserver based on your operating system (window)'s version.

Step 2 - Install OpenSSL

OpenSSL is an open-source command-line tool that is used to generate the SSL certificate and private key. OpenSSL is available in both versions 32 and 64 bit. download the latest version of OpenSSL from here.


I hope you successfully installed OpenSSL on your machine. let's take the next step

Step 3 - Create a Private key

Open your terminal as an Administrator otherwise you will get a permission denied error. also, you can provide permission to the OpenSSL directory and run the terminal on normal mode.

Now, let go to where we installed OpenSSL

cd C:\Program Files\OpenSSL-Win64\bin

Let's create a private key which is 2048 bits encryption.  fire one by one the following two commands to create it.

openssl genrsa -aes256 -out private.key 2048
openssl rsa -in private.key -out private.key


Your private.key is successfully generated here C:\Program Files\OpenSSL-Win64\bin 

Step 4 - Create an SSL Certificate

Let's create a certificate using the following command,

openssl req -new -x509 -nodes -sha1 -key private.key -out certificate.crt -days 36500

You need to enter a detail looks like


You can verify here 

Step 5 - Move both Private Key and a Certificate

Open a directory D:\wamp64\bin\apache\apache2.4.46\conf (Based on where your wamp is installed) and create a `key` directory.

Now, move both files to the `key` directory.

Step 6 - Configure Your httpd.conf File

Open your `D:\wamp64\bin\apache\apache2.4.46\conf\httpd.conf` (the drive should be where your wamp is installed) and un-comment the following 3 lines one by one.

LoadModule ssl_module modules/mod_ssl.so
Include conf/extra/httpd-ssl.conf
LoadModule socache_shmcb_module modules/mod_socache_shmcb.so

Step 7 Configure Your httpd-ssl.conf File

Open your `D:\wamp64\bin\apache\apache2.4.46\conf\extra\httpd-ssl.conf` (the drive should be where your wamp is installed) and change the all following lines.

DocumentRoot "${INSTALL_DIR}/www"
ServerName localhost:443
ServerAdmin admin@example.com
SSLCertificateKeyFile "${SRVROOT}/conf/key/private.key"
SSLCertificateFile "${SRVROOT}/conf/key/certificate.crt"

Make sure, these following all lines are set or not. if not, add it as well.

SSLSessionCache "shmcb:${SRVROOT}/logs/ssl_scache(512000)"
CustomLog "${SRVROOT}/logs/ssl_request.log" \
          "%t %h %{SSL_PROTOCOL}x %{SSL_CIPHER}x \"%r\" %b"

Step 8 Configure a Virtual Host

Hope you have created a virtual host. if not, create a virtual host using virtual host manager which is provided by wamp.

Open an `D:\wamp64\bin\apache\apache2.4.46\conf\extra\httpd-vhosts.conf` and update your virtual host

Change the  port *:80 to *:443

add following lines into the VirtualHost.

SSLEngine on
SSLCertificateFile "${SRVROOT}/conf/key/certificate.crt"
SSLCertificateKeyFile "${SRVROOT}/conf/key/private.key"

Now, the code of VirtualHost looks like, 

Now, we are done. Let's restart a wamp server.

If you see a green WAMP icon everything should be right. If the icon is orange there is a problem with your syntax somewhere. 

Open terminal and go to the `D:\wamp64\bin\apache\apache2.4.46\bin` and run `httpd -t` in the command prompt and if there are any syntax errors they will be listed.

if fine then open `https://ladumor.test` on the browser

January 30, 20213 minutesauthorShailesh Ladumor
post

In our daily life, we are going through lots of packages, and some of us don't know how to build our own package into Laravel.

We are going to perform the core steps to create your own package in laravel. In this tutorial we are going to build zoom package, so we will perform steps related to it.

Setup Fresh Laravel Repo 

Setup fresh laravel repo, and then create directories within it. 

for e.g Create infyomlabs/zoom-api directory into root.


Now create src directory into zoom-api

Run Composer init Into src Directory

After hitting composer init it will ask some information from you, as you can see in below image I have entered some of information. you can just hit enter if you do not want to add other information.


Add your config file (Optional)

Create directory config into src directory and add your config.php file there from where you can manage your env variables. 


Add Service Provider

Create your service provider from where you can do lots of actions. like you can publish config/routes/ migrations files from there. here we are publishing the zoom config file. 


Add your class (Which contains all functions) 

Here we have added a Zoom class which will be contained all zoom functions. 

Update Composer.json 


Finally, Test it in your existing project

Put the following code to your main composer.json (in your project's root). and hit composer update

  "repositories": [
        {
            "type": "path",
            "url": "infyomlabs/zoom-api",
            "options": {
                "symlink": true
            }
        }
    ],
    "license": "MIT",
    "require": {
        "infyomlabs/zoom-api": "dev-develop"
    },


January 27, 20211 minuteauthorVishal Ribdiya
post

Today we are going to see how we can generate a data table with one of the most popular a stisla theme.

We can actually do that in minutes with the package that we Recently developed called stisla-templates.

Our team made a great effort into this package and developed it with a new feature. this template package has Jquery Datatable support. So, anyone can easily generate CRUD(scaffold) with a Data table. 

Let's see step by step, how we can do that.

Install Packages


Follow the installation steps given in our official documentation of Laravel InfyOm generator and stisla-templates if not installed.

Now, you have to perform the following steps.

composer require yajra/laravel-datatables-oracle:"~9.0"

this package handles the query and frontend stuff.

Register provider and facade on your `config/app.php` file.



Now clear your cache and regenerate it using the following command,

php artisan config:cache

We are done with installation and configuration.

Use Generate Scaffold with Datatable

Now I going to add an option  jqueryDT, at last, to use JQuery Datatables while generating scaffold. the command looks like

php artisan infyom:scaffold Post --jqueryDT

Enter all required inputs and generate scaffold of Post.
All views are created inside the posts directory in the resource. also, the `post.js` file created inside the js directory in assets that are located inside the resource.
Fire the following command for compile and publish the `post.js`

npm run dev

Now, datable is ready for use. you can watch the video tutorial here

January 24, 20211 minuteauthorShailesh Ladumor