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

Another minor update release for InfyOm Laravel Generator with some enhancement for datatables and few bug fixes.

This release contains datatable duplication script & CSS fixes with partials files support for datatables js and CSS files.

Also, it contains few bugs fixes about save JSON model schema, text area field generation and few more.

You can find full release notes here.

September 30, 20161 minuteauthorMitul Golakiya
post

In this tutorial, we are going to learn how to display image in datatable or add image column to datatable while using yajra/laravel-datatables with infyom laravel generator.

We are continuously getting some questions like how we can achieve something with laravel generator. Recently, we got a question like, how we can display Image in DataTable while using yajra/laravel-datatables with infyom laravel generator. so I thought maybe it can be requirements to lots of other developers as well and tried myself to find a solution. And then I decided to write a tutorial on that, so other developers can get an idea on that.

so here is the use case, suppose we have a Post model which contains three fields,

  1. Title
  2. Image
  3. Body

Image field contains a full or relative URL of the image which we need to show in datatable (same as above image). 

When you are using InfyOm Laravel Generator it generates PostDataTable.php file for the definition of DataTable. That file contains function named, getColumns() for the definition of columns of DataTable. Something like following,

return [
    'title' => ['name' => 'title', 'data' => 'title'],
    'image' => ['name' => 'image', 'data' => 'image'],
    'body' => ['name' => 'body', 'data' => 'body']
];

This is a very simple implementation of a DataTable Column definition.

To Display image in DataTable, we need to use `render` function on the column to display images. You can define your own render function which will return the data, that should be rendered in the column. In our case, we want to render an image, so our render function will be something like following,

return [
    'title' => ['name' => 'title', 'data' => 'title'],
    'image' => ['name' => 'image', 'data' => 'image'],
    'body' => ['name' => 'body', 'data' => 'body']
];

If you will look carefully, we are returning, <img src=""+data+"" height="50"/> from render function. Where data will be the data from the model. In our case, It will be a URL.
Render function gets the data parameter as a first argument. You can find more information about render function over here.

Above code will generate output something like following,

{
    "name": "image",
    "data": "image",
    "render": function (data, type, full, meta) {
        return "<img src=\"" + data + "\" height=\"50\"/>";
    },
    "title": "Image",
    "orderable": true,
    "searchable": true
}

So, this is how we can display an image in datatable.

September 30, 20162 minutesauthorMitul Golakiya
post

Recently, we introduced some breaking updates by which many developers are getting something from the following errors:

  • datatables_css.stub failed to open stream
  • datatables_js.stub failed to open stream
  • View [datatables_css] not found
  • View [datatables_js] not found

Problem:

so, the purpose of this breaking update was, till now when we generate CRUD with datatables we were including datatable scripts into `table.blade.php` something like the following:

{!! $dataTable->table(['width' => '100%']) !!}

@section('scripts')
    <link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.0.3/css/buttons.dataTables.min.css">
    <script src="https://cdn.datatables.net/buttons/1.0.3/js/dataTables.buttons.min.js"></script>
    <script src="vendor/datatables/buttons.server-side.js"></script>
    {!! $dataTable->scripts() !!}
@endsection

And the main CSS files for datatables were included into layout file layout/app.blade.php, also some js files were also included in the same folder. Like following,

<!-- Datatables -->
<script src="https://cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.11/js/dataTables.bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.2.1/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.2.1/js/buttons.colVis.min.js"></script>

so the problem that we found was when we want to update the datatables version, we have to go to each file and update them manually. Also, there were some redundant JS and CSS files which were included in both `table.blade.php` & `app.blade.php`.

Solution:

As a solution, we decided to move these things to two partial files datatables_css.blade.php & datatables_js.blade.php. Which were published during publishing layout.

php artisan infyom.publish:layout

so if anyone is getting this error then, run composer update to update your code to latest commits and then try to run above command and publish these two files into your layouts folder. As an alternative, you can also create those files manually from the templates and can update your layout file accordingly.

If anyone is still facing issue after performing these steps, then please post your comments below.

September 29, 20162 minutesauthorMitul Golakiya
post

Today we are going to take another major decision on our templates development for Laravel Generator.

It's around more than 7 months that we launched a new laravel generator with the ability to select any CSS framework based on developers choice. Even anyone can develop his own templates and use it with a generator.

After these 7 months, now we have around 4 templates repository including Bootstrap Templates, AdminLTE Theme Templates, FlatLab Theme Templates, Metronic Theme Templates with maintaining templates for 3 different version of Laravel including 5.1, 5.2, 5.3. Also, laravel has a rapid release cycle, so it's very hard to main 4 packages with 3 different versions support.

Also, what we realized is, lots of developers are using AdminLTE templates only for their main backend development. We found AdminLTE far better than any other templates.  Also, It comes with a better setup, better elements support, regular updates and fits best for back-end Admin Panel development.

So today, we are taking a decision to actively only maintain AdminLTE templates and deprecate all other templates development from our end. so we can focus on one template repository and can add more features to it.

It doesn't mean that packages will be deleted from its GitHub repository,  It will be always there, but we will be focusing more on AdminLTE templates and all other templates will be more community driven.

September 27, 20161 minuteauthorMitul Golakiya
post

Greetings friends. Finally, InfyOm Labs blog is here.

This is my first blog, so, of course, this is my first post. so I spent quite a huge time by reading how to start a blog. Let me take you in the past and give you some brief idea, how all these things were started.

The Past back in 2015, I just get started with full-time freelancing. It was almost 2 years, I was working with Laravel. And recently Laravel 5 was just released in Feb 2015. It was a great time when the Laravel community was get growing really fast. Lots of developers were accepting Laravel as their primary framework for their mainstream development.

In these 2 years, I worked on a lot of projects where I developed some CRM systems, Analytics Platforms, lots of APIs for mobile applications etc. And the common problem that I found was, every time when I start a new module or a project, I have to create lots of common classes like, migration, model, controller, crud views files, repository, test cases etc. And this was a problem of lots of developers.

Then I started to streamline this process and this is how my first laravel-api-generator package was born. In just a few days, it has been started to be used by lots of developers and I got a lot of feature requests.

mitulgolakiya/laravel-api-generator

Almost after a year, I realized still it was missing some modularity architecture where a community can have the option to customize it the way they want to use it. Like customizing CSS framework, generator templates etc.

so I decided to rewrite a full package with a modular way and then the second version of the package was introduced with a new name InfyOmLabs/laravel-generator as a part of my new company's Labs project with a new website and detailed better documentation.

InfyOmLabs/laravel-generator

InfyOm Labs is a place, where we do various experiments and release it as an open-source project for a community.

Again, we got a huge attraction and even this time in a short period of around 6-7 months we completed 1000 stars on our new InfyOmLabs Github Account.

Just after some time, I got comments from a community that there should be some blog where tutorials & videos should be posted to use generator package for some newbie developers and for some more complex features of the package.

Then today, I finally started a blog and will post tutorials and videos for Generator as well as for Laravel & PHP by time by time.

so stay tuned for the videos and tutorials. Also, I would like to hear about your ideas about the tutorials and videos that you want to be posted here. Just post a comment about your ideas below.

Looking for the first idea to be submitted. :)

September 24, 20162 minutesauthorMitul Golakiya