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
[Livewire](https://laravel-livewire.com/docs/2.x/quickstart) is a very awesome thing that I have ever seen, the old school developers are still using the jquery and ajax concept to not refresh the page. But forget the jquery and ajax stuff. If you are good at PHP then you can do the same with Laravel Livewire. ### Wait what? ## Load dynamic data on the page without using ajax? Yes, it is possible with Laravel Livewire. So that is all about laravel livewire, and in this tutorial, we will see how to build laravel pagination with laravel livewire. Let's start and I hope you already have set up the livewire. Let's say you already have created a component named `UsersListing` Now in the users listing, we want to paginate all users and we will list 10 records per page. ## How to use pagination with Laravel Livewire Livewire provides a trait called `WithPagination` and you have to add it into your component `UsersListing`. Check out the following code: ``` use Livewire\WithPagination; use Livewire\Component; class UsersListing extends Component { use WithPagination; public function render() { return view('livewire.users.index', [ 'users' => User::paginate(10), ]); } } ``` And to load pagination you have to add following code: ``` 
 @foreach ($users as $user) ... @endforeach {{ $users->links() }} ``` That's it, and your laravel pagination now works like charm without page refresh. There is much more about pagination like how to use it with a custom view, how to use it with a custom theme. We will see it in our next tutorial, until then enjoy the code
July 11, 20201 minuteauthorVishal Ribdiya
post

Introduction

Increasing customer loyalty is a requirement of any organization. If a recurring project is found, the organization develops. Do not require to generate new leads. The cycle of the company runs from the existing customer and scales the company.

1. Keep in touch

Keep in touch with each client every few months to make sure everything goes smoothly. During a class or meeting, ask about your client's challenges. Issues you can resolve. They are more likely to turn to you when they need you.

2. Create high-quality software

One of the best ways to keep customers coming back is to always develop high-quality software. You can do this by meeting the expectations of your customers and also by making sure that they are satisfied with your work. Help your customers save money and get rid of waste, ultimately deliver huge profits for them, and possibly do more business for you.

3. Listen carefully when your customers are speaking to you

Try to give your customers your undivided attention. Multi-tasking is often. When customers are in front of you, make eye contact.

4. Collaborate with clients

To ensure quality in the software you develop and keep your customers happy, you should encourage collaboration with your clients. Meet with them and ask questions so you can fully understand use cases for the software you are developing. Bring new ideas to make suggestions on how to make improvements.

5. Demonstrate time management skills

Tracking time is also key to the success of a project, you should be able to provide detailed reports to your clients for the time spent on their particular projects. They’ll be more likely to hire you again if they see you’re organized and working efficiently.

6. Keep your promises to your customers

When you tell your customer you are going to do something, follow-up as quickly as possible. Given the time frames and honor them.

7. Don’t waste your customers’ time

Everyone is busy. Complicated voice mail systems, making customers repeat their service requests more than once and un-knowledgeable employees are some major time-wasters. A customer’s time is as important as your time!

8. Ask your customers what they want

Constantly ask your customers what you can do for them and how you can do it better. They want extended hours, academic classes, or the ability to talk to the manager. After you ask, try to give them what they want and keep them informed of the process along the way.

We will see more points in our next tutorial.

July 07, 20202 minutesauthorAnkit Kalathiya
post
The OneSingnal is the market leader in push notification providers. It provides the mobile + web push, email & in-app messages and easy way to send notifications. OneSignal provides an officially core PHP APIs but not Laravel package. We are using OneSignal in many projects and write a bunch of line code in all projects where we needed OneSingnal.

One day I had an Idea in my mind why I should not write a Laravel wrapper for OneSignal?. Finally, I wrote the shailesh-ladumor/one-signal Laravel Wrapper for it. Using this package, we can write neat & clean code and just a few lines of code.

OneSignal add this package in his docs here.. and watch the video tutorial  here

This package also works with the previous Laravel version.

Today we are going to see how we can use Laravel OneSignal Wrapper in Laravel. Let's see step by step, how we can do that.

Install Packages

Install shailesh-ladumor/one-signal by the following command,

composer require ladumor/one-signal
Publish the config file

Run the following command to publish config file,

php artisan vendor:publish --provider="Ladumor\OneSignal\OneSignalServiceProvider"
Add Provider

Add the provider to your config/app.php into provider section if using lower version of Laravel,

Ladumor\OneSignal\OneSignalServiceProvider::class,
Add Facade

Add the Facade to your config/app.php into aliases section,

'OneSignal' => \Ladumor\OneSignal\OneSignal::class,
configure a .env file with following keys

ONE_SIGNAL_APP_ID=XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX
ONE_SIGNAL_AUTHORIZE=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
X
ONE_SIGNAL_AUTH_KEY=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
ONE_SIGNAL_AUTH_KEY is optional if you do not want to create an app. I hope you are familiar with the OneSignal Platform and know how to get APP_ID and AUTHORIZE. If not, you should see the below image for how to get it.

So, we are done. let's check how to send push notifications.

Checkout this code to send a push notification.

use Ladumor\OneSignal\OneSignal;
$fields['include_player_ids'] = ['xxxxxxxx-xxxx-xxx-xxxx-yyyyy']
$message = 'hey!! This is a test push.!'
OneSignal::sendPush($fields, $message);
Video tutorial also available here

July 02, 20202 minutesauthorShailesh Ladumor
post
We are going to change the background of the photo with another texture. 

Step:1 Create a new artboard


Press Ctrl+N for creating a new artboard and set its dimension as per requirement. For example, here we took 4951 x 3301 px.

Step:2 Set Image In artboard


Drag image from its location to the artboard.

Step:3 Select cropping portion of the image


For the selection of an image, select the quick selection tool from the toolbar, and select a portion of the image which you want to crop.


Step:4 Select Refine edge


After perfect selection, select a refine edge tool.

After this select overlay from view mode then from edge detection, select a smart radius.

Then set these properties:

  1. Set radius 1 to 2 px
  2. Increase smooth 6 to 7 px from global refinements
  3. Set contrast 20% in global refinements
  4. Check to decontaminate colors in output settings and set amount 70%
  5. Set new layer with a layer mask in output dropdown
Press OK.

Now our image will look like below:

Step 5: set new background

Select a new background that you want to set in the image from its location and set the artboard.

Now place our cropped image above this background and adjust as per requirement.

June 30, 20201 minuteauthorKishan Savaliya
post

Recently, the Laravel team announced a Laravel Fortify. A framework agnostic authentication backend for laravel applications. It provides registration, authentication along with two-factor authentication.

As said above, it is a framework agnostic, so it doesn't provide any blade views with it. You can implement views of your choice of the frontend. Blade, Vue, React with Bootstrap or TailwindCSS, or any other CSS framework.

Today we are going to see how we can use Laravel Fortify with one of the most popular Bootstrap 4 theme AdminLTE v3.

We can actually do that in minutes with the package that we already developed called Laravel UI AdminLTE.

This package also works with the previous laravel version to have an authentication system with Laravel UI for Laravel Frontend Scaffolding.

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

Install Packages

Install Laravel Fortify and Laravel UI AdminLTE by the following command,

composer require laravel/fortify infyomlabs/laravel-ui-adminlte

Publish Fortify Resources

This command will publish all required actions in the app/Actions directory along with the Fortify configuration file and migration for two-factor authentication.

php artisan vendor:publish --provider="Laravel\Fortify\FortifyServiceProvider"

Run Migrations

Then run migrations,

php artisan migrate

Add Fortify Service Provider

Next step, add published FortifyServiceProvider to config/app.php

Run AdminLTE Fortify Command

Run the following command,

php artisan ui adminlte-fortify --auth

Install Node Modules and Run a Build

As a next step, install required npm modules and run a build,

npm install && npm run dev

And we are done. Now visit the home page and you should be able to see the full authentication system working including,

  • Login
  • Registration
  • Forgot Password
  • Reset Password
  • Home page

Laravel AdminLTE UI also provides a starting layout with a sidebar menu and header once you do login. so you are all set to go.

June 27, 20202 minutesauthorMitul Golakiya
post

Sometimes we need to load a large amount of data into memory. Like all the models we have in the database.

For e.g. PDF Printing, Perform some global updates, etc.

So the general practices we use in Laravel is to write the following code,

$users = User::all();

Just imagine I have 10,000 users in the database and when I load all the users in one shot.

But it takes a really high amount of memory to load all the records and prepare Laravel Model class objects. And sometimes we also load them in chunks to save the memory, but in some use cases, chunking can not be the option.

Here is the screenshot of mine when I load 10,000 users into memory with the above code.


10k Models


It's using 37MB memory. Also, imagine the required memory if we are loading some relationships as well with these 10,000 records.

The Eloquent model is a great way to handle operations with lots of features like Mutators, Relationships, and much more.

But we really do not use these features all the time. We simply output or use the direct values which are stored in the table. So ideally, we do not need an eloquent model at all, if we are not going to use these features.

In those cases, Laravel also has a handy function toBase(). By calling this function it will retrieve the data from the database but it will not prepare the Eloquent models, but will just give us raw data and help us to save a ton of memory.

So my revised code will look something like this,

$users = User::toBase()->get();

Check the revised memory screenshot after adding the toBase function.


10k Models toBase


So it almost saves 50% of the memory. It's reduced from 35MB to 20MB and the application also works much much faster, because it doesn't need to spend time in preparing 10,000 Eloquent models.

So if you are not really going to use features of Eloquent and loading a large amount of data, then the toBase function can be really useful.

Here you can find a full video tutorial for the same.

June 21, 20202 minutesauthorMitul Golakiya
post

Recently, I've started working on one project where we follow modules pattern and for the same, we have different assets folder for the different modules and the folder named common for assets which are common across all the modules.

So our public folder looks like the following,

Module Asset Functions

The problem that I started facing was everywhere I need to give a full path to import/include any of the files from any of the folders. For e.g.

<img src="{{ asset('assets/tasks/images/delete.png') }}" alt="Delete Task">

Even if we have some folder in images to group similar images then it was even becoming longer. For e.g.

<img src="{{ asset('assets/tasks/images/social/facebook.png') }}" alt="Facebook">

The workaround that I used is, I created one file called helpers.php and created dedicated asset functions for each of the modules. For e.g., for tasks,

if (!function_exists('tasks_asset')) {
    /**
     * Generate an asset path for tasks module folder.
     *
     * @param  string  $path
     * @param  bool|null  $secure
     * @return string
     */
    function tasks_asset($path, $secure = null)
    {
        $path = "assets/tasks/".$path;
        return app('url')->asset($path, $secure);
    }
}

With this function, I can use,

<img src="{{ tasks_asset('images/delete.png') }}" alt="Delete Task">

Other advantages it gives are,

  1. if in future if the path of tasks folder changed, then I do not need to go and update every single import/include.
  2. I (or any new developer) do not need to remember the long paths and can always use direct function names for modules.

Even I like this pattern so much, so I went further and created dedicated image function as well,

if (!function_exists('tasks_image')) {
    /**
     * Generate an asset path for tasks module images folder.
     *
     * @param  string  $path
     * @param  bool|null  $secure
     * @return string
     */
    function tasks_image($path, $secure = null)
    {
        $path = "images/".$path;
        return tasks_asset($path, $secure);
    }
}

So I can use it as,

<img src="{{ tasks_image('delete.png') }}" alt="Delete Task">

Simple and handy functions to use everywhere.

May 16, 20202 minutesauthorMitul Golakiya
post

In chapter 5 of Gita, Karma-Sanyas-Yog, Lord shree Krishna said in verse 8,

યોગયુક્ત તત્વને જાણનારો મનુષ્ય જુએ, સાંભળે, સ્પર્શ કરે, સૂંઘે, ખાય, ચાલે, ઊંઘે, શ્વાસ લે, બોલે, મળત્યાગ કરે, ગ્રહણ કરે, નેત્ર ઉઘાડે તથા મીંચે તો પણ "ઇન્દ્રિયોના વિષયોમાં ઇન્દ્રિયો વર્તે છે" એમ સમજી "હું કાંઈ જ કરતો નથી" એમ મને છે.

The wise person knows, just like breathing, smelling, opening and closing eyelid, eat, sleep happens automatically, just like that He believes that everything is happening by itself. I’m just doing nothing.

Same in business, do not try to micro-manage things. Some things happen by itself. And let them happen in their own way. If you will spend your time in micro-managing those small things then you will never able to focus on other important things.

The another important thing is,

જ્ઞાનીઓ વિદ્યાવિનયયુક્ત બ્રાહ્મણમાં, ગાયમાં, હાથીમાં, કૂતરામાં તથા ચાંડાલમાં પણ સમાન દ્રષ્ટિ રાખવાવાળા હોય છે.

Sometimes people only respect certain people. Like some people only give respect to rich and financially sound people but they don’t pay attention to middle or lower income group people. Such behavior is not proper. Same way in office as well, we give attention to some people and we might not give attention to the office boy, pun, watchman, cleaner, etc. or Senior Developer vs Junior Developer. One must consider each and everyone with equality. Each and everyone should be respected. Just say them Hi or Hello and see the Joy that you and they get.

You can also listen to the full podcast here.

February 07, 20201 minuteauthorMitul Golakiya