It's a hard Nuxt life

That following issues are needs to be address while

• Running Nuxt with Node experiences crashes once in a while or very frequent
• Make a static version (Nuxt generated version) of the live version (running on NodeJS)
• Nuxt generated static html files for pages are not complete. Missing end tags for body and html.

DAY 1.

When I did the migration, my initial results that css files are not included at the production. Running at the development, all pages are working right with no hiccups. So weird? Well, I guess I'm really new at this stack.

My initial solution is take them piece by piece and of course get rid of jQuery. So many parts that uses jQuery and it's painful and it would take a lot of time, but for me, I think it's worth it. But we need it right away.

As they say, if there's a will there a way. 

Day 2

At first we were testing the results for SEO stuff at Google Webmasters' Fetch / Fetch and Render, every page is being cut off. For hours we thought it's coming from the CSS files. Take it off one by one including the plugins. Still the same!

Someone said there's an issue with asyncData method if using the static version of Nuxt. So, I created a simple test. Plain and simple pages, one page make a request from and API endpoint. asyncData not an issue.

Day 3

Found out that generated files are already cut-off or doesn't have a proper end tags for body and html. Problem could be during the compilation of js, css and everything. I update the Webpack version from 3 to 4. Ooops, there'a a lot of dependency issues. And so, Nuxt used was outdated so that could be one of the reasons. Maybe, just maybe. 

With a new create-nuxt-app, I started to import piece by piece. Suspected plugins are all working. What's happening? Generated pages are not being cut-off. It was going well. Then I completely migrated everything and did the "npm run dev". It's working!. I immediately ran "npm run generate" and deployed to my dev site. Damn! It has no styling. At least html are terminated pages. 

First solution. Use an external css. Now, it really works. It doesn't end there of course. I'm still having issues with the external css, font's were not loaded properly. So, I added an .htaccess file to allow it.

<FilesMatch "\.(ttf|otf|eot|woff)$">
    <IfModule mod_headers.c>
        SetEnvIf Origin "http(s)?://(www\.)?(anotherwebsite.com|cdn.anotherwebsite.com|blahblah.anotherwebsite.com)$" AccessControlAllowOrigin=$0
        Header add Access-Control-Allow-Origin %{AccessControlAllowOrigin}e env=AccessControlAllowOrigin
    </IfModule>
</FilesMatch>

Day 4

It's workable but seems to be tedious, when I'm going to deploy I have to do that first. Well, thanks to this deployment routine. By using Optimize CSS Assets Webpack Plugin and UglifyJS Webpack Plugin, css are extracted and included to the production or static files. Finally, after running the "npm run generate" and deploying it, css and fonts are included as static.

That's it for now. So many things to share but have a little time. 

jQuery ajax post not working in Laravel 5.3

Here's the issue jQuery ajax post not working in Laravel 5.3 (could be occurring to other version too).

So here's the details, I created a jQuery ajax post to our Laravel backend. You might ask, why not just VueJS or other JS framework? Well, basically just a simple ajax request so why bother.

For a developer like me who immediately get his feet wet without reading in development, I would keep on trying until it'll work.

My jQuery code goes below:

      var request = $.post("/api/requestkoto",{
                data: {
                    'fieldOne': fieldOne,
                    'fieldTwo': fieldTwo,
                }
            });

For web developers, browser's developer console is their friend. It was pain in the ass to see that your request is not working. From the console the POST is turning to GET. I started to wonder and feeling lost. Where and Why it's happening?

 Tried using jQuery or $.

I also I tried disabling Larave's security by commenting out \App\Http\Middleware\VerifyCsrfToken::class, at HTTP/Kernel wherein my post started to work. Of course, it wasn't the solution.

Well, it turns out it's Laravel's security feature which states and can be found here.

In addition to checking for the CSRF token as a POST parameter, the VerifyCsrfToken middleware will also check for the X-CSRF-TOKEN request header. You could, for example, store the token in a HTML meta tag:

<meta name="csrf-token" content="{{ csrf_token() }}">

And you have to add this your code too.

$.ajaxSetup({
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    }
});

So with that, I my new ajax POST request would be

      var request = $.post("/api/requestkoto",{
                data: {
                     '_token': window.Laravel.csrfToken, 'fieldOne': fieldOne,
                    'fieldTwo': fieldTwo,
                }
            });

I just added  '_token': window.Laravel.csrfToken to the request and everything works as expected. Spent more than 1 hour tracing from backend to javascript.

Okay. That's it for now.