How to setup passowordless Login In laravelLaravel

How to setup passowordless Login In laravelLaravel
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
How to Setup Global Git Ignore in windowLaravel

How to Setup Global Git Ignore in windowLaravel
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.
How to setup and enable https with SSL on wamp server virtual hostPHP

How to setup and enable https with SSL on wamp server virtual hostPHP
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
Stisla Templates with JQuery DatatablesLaravel

Stisla Templates with JQuery DatatablesLaravel
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
How to implement Google Analytics into Gatsby SiteGatsby

How to implement Google Analytics into Gatsby SiteGatsby
We have recently developed a site into the gatsby. We want to add Google Analytics to the website.
So, this is the way we implemented Google Analytics in the Gatsby site.
Use Gatsby Google GTag Plugin
Gatsby has a plugin gatsby-plugin-google-gtag that be used to easily add Google Global Site Tag to your Gatsby site.
Install the package by running the following command:
npm i gatsby-plugin-google-gtag --save
Configuration
Once the installation is complete, you can now add this plugin to your gatsby-config.js:
Configure trackingIds and other options. Add this into the plugins array. Like,
module.exports = {
// ...
plugins: [
{
resolve: `gatsby-plugin-google-gtag`,
options: {
// You can add multiple tracking ids and a pageview event will be fired for all of them.
trackingIds: [
"GA-TRACKING_ID", // Google Analytics / GA
"AW-CONVERSION_ID", // Google Ads / Adwords / AW
"DC-FLOODIGHT_ID", // Marketing Platform advertising products (Display & Video 360, Search Ads 360, and Campaign Manager)
],
// This object gets passed directly to the gtag config command
// This config will be shared across all trackingIds
gtagConfig: {
optimize_id: "OPT_CONTAINER_ID",
anonymize_ip: true,
cookie_expires: 0,
},
// This object is used for configuration specific to this plugin
pluginConfig: {
// Puts tracking script in the head instead of the body
head: false,
// Setting this parameter is also optional
respectDNT: true,
// Avoids sending pageview hits from custom paths
exclude: ["/preview/**", "/do-not-track/me/too/"],
},
},
},
],
}
This plugin automatically sends a “pageview” event to all products given as “trackingIds” on every Gatsby's route change.
If you want to call a custom event you have access to window.gtag where you can call an event for all products.
Check out this code.
typeof window !== "undefined" && window.gtag("event", "click", { ...data })
NOTE: This plugin only works in production mode! To test your Global Site Tag is installed and
You need to run the following command for firing events correctly.
gatsby build && gatsby serve
If you need to exclude any path from the tracking system, you can add one or more to this optional array.
How to load dynamic blog in Gatsby SiteGatsby

How to load dynamic blog in Gatsby SiteGatsby
We have recently developed a site into the gatsby.
We have a blog site and hosted it on a different domain but now we want to move to one place at our main site. now, we have challenges for displaying dynamic blogs on the gatsby site.
Finally, I found that gatsby provides support to render dynamic blogs as a static page. when build created that time fetch the blogs from the server and create a static page for all the blogs.
Gatsby is a very good platform and manages such a kind of thing easily.
So, I will show you how to create static pages from the API response into the Gatsby site.
Here are the steps you need to follow correctly.
Steps 1
Create a one blog file where you want to load a blog in your design.
For an ex. I created a file `blog/index.js` inside the component directory and the code looks like this,
Steps 2
Open a file `gatsby-node.js`
Declare the const for the API URL at the beginning of the file.
const blogURL = 'http://blog-api.com/api/posts';We need to create an instance of the `node-fetch` for fetching a data from API server.
const fetch = require(`node-fetch`);
Import the path for a resolve the page while creating a static page.
const path = require('path');
See the example how to create a static page from APIs. code look's like,
exports.createPages = (async ({graphql, actions}) => { const blogs = await fetch(blogURL); blogs.data.forEach((blog) => { createPage({ path: 'blog/' + blog.slug, component: path.resolve(`./src/components/blog/index.js`), context: { // Data passed to context is available // in page queries as GraphQL variables. slug: blog.slug, blog: blog, }, }) })
Now we are done, and you can access blogpage via slug.
How to implement Mailchimp into Gatsby SiteGatsby

How to implement Mailchimp into Gatsby SiteGatsby
We are recently developed a site into the gatsby. basically contact us feature is common in all website. and we are implementing Mailchimp because it's a very popular platform in email market. So, I will show you how to setup a Mailchimp in the Gatsby site. ## Using gatsby-source-mailchimp Use your Mailchimp API key to download your campaigns into Gatsby’s GraphQL data layer! Install the package by running the following command: `npm i gatsby-source-mailchimp --save` ### How to configure Once the installation is complete, you can now add this plugin to your gatsby-config.js, like so: Configure mailchimp Key and add this {resolve: `gatsby-source-mailchimp`} into the plugins array. code looks like
``` module.exports = { // ... plugins: [ { resolve: 'gatsby-source-mailchimp', options: { // Avoid including your key directly in your file. // Instead, opt for adding them to .env files for extra // security ;) key: 'asd712jdas90122jdas90122jkadsd1-usXX', rootURL: 'https://usXX.api.mailchimp.com/3.0', }, }, ], // ... } ```
Above is the minimal configuration required to have it work. By default, This plugin was made out of a specific necessity, so it doesn't cover all of Mailchimp’s data sources, focusing only on campaigns. this plugin are provide few options. you can refer here. ## Using `.env` variables to hide your key If you don’t want to attach your API key to the repo, you can easily store it in .env files by doing the following:
``` // In your .env file MAILCHIMP_KEY = 'asd712jdas90122jdas90122jkadsd1-usXX'; ``` ``` // In your gatsby-config.js file require('dotenv').config({ path: `.env.${process.env.NODE_ENV}`, }); module.exports = { // ... plugins: [ { resolve: 'gatsby-source-mailchimp', options: { key: process.env.MAILCHIMP_KEY, rootURL: 'https://usXX.api.mailchimp.com/3.0', // ... }, }, ], // ... }; ```
How create a sitemap for your Gatsby siteGatsby

How create a sitemap for your Gatsby siteGatsby
So, I will show you how to set a sitemap on the Gatsby site.
Install the package by running the following command: npm install gatsby-plugin-sitemap
Configure siteUrl and add this {resolve: `gatsby-plugin-sitemap`} into the plugins array. code looks like
module.exports = { siteMetadata: { title: `InfyOm Technologies`, description: `InfyOm Technologies`, keyword: `InfyOm Technologies`, author: `@gatsbyjs`, siteUrl: `http://infyom.com` }, flags: { PRESERVE_WEBPACK_CACHE: true, }, plugins: [ {resolve: `gatsby-plugin-sitemap`}, ],}
Above is the minimal configuration required to have it work. By default, the generated sitemap will include all of your site’s pages.
- output (string) The file path and name. Defaults to /sitemap.xml.
- exclude (array of strings) An array of paths to exclude from the sitemap.
module.exports = { siteMetadata: { title: `InfyOm Technologies`, description: `InfyOm Technologies`, keyword: `InfyOm Technologies`, author: `@gatsbyjs`, siteUrl: `http://infyom.com` }, flags: { PRESERVE_WEBPACK_CACHE: true, }, plugins: [ { resolve: `gatsby-plugin-sitemap`, options: { output: `/some-other-sitemap.xml`, exclude: [`/category/*`, `/path/to/page`], } }, ], }
now we are done and open sitemap using your domain. for ex. https://xxx.com/sitemap.xml