All posts by Fred Lin

Laravel Vue App not appearing in Internet Explorer? Here’s the fix.

So I had a production app running for awhile, and finally after hundreds of users, one came forward and said my app is broken.

Confuzzled, I investigated the issue with the user, because all previous/current tests had been fine.

Turns out it was an Internet Explorer compatibility problem.

Specifically, the part of the app that was rendered in vuejs was not showing.

Even more specifically, it was not the entire vuejs section, but only the data retrieval section of the vuejs app that was not showing.

Looking at IE console, revealed an error showing that promise was not recognised.

Turns out that we need to install an es6 polyfill for promise support, in this case, with the axios plugin.

Thankfully, installing the polyfill is very simple, broken down in simply 3 steps.

Go into the laravel root folder, and install the es6 promise plugin via npm.

After that is successful, edit the app.js for your view initialiser, probably at /resources/assets/js/app.js

and add

recompile your laravel assets with

and you’re all set.

Configuring Supervisor for Amazon Linux in 2017

Fucking pain in the ass. I remember 1 year ago, this process used to be super straight forward and easy.

Anyway with Laravel 5.5 and Amazon Linux in December 2017, here is what I did to make it work.

Install Supervisor

Create supervisor OS config file. This is DIFFERENT from the Supervisor config that runs your process(es). This is for initialising Supervisor in Linux and allow it to be run as a service.


Edit supervisor and enter the following:

Change permissions to allow it to be read and executed.

Check if process is running

Try running it

For some reason, my service became supervisor instead of supervisord

Create Supervisor Config file for laraval worker.

Paste this:

Run supervisord to see if its working. For some reason mine only worked in sudo if i put the full path, i.e. /usr/local/bin/supervisord

The command is:

If i’m not wrong running supervisord will also automatically load the file.


Add service to your start up workers.

Restart your motherfucking server, and it should be running by default.



Simple Reusable Captcha Component in AngularJS 2

Simple Reusable Captcha Component in AngularJS 2

Woohoo, I’m almost done with my new web platform using cutting edge Angular JS2 with Bootstrap 4 alpha 6, powered by Laravel 5.2.

The power of these new technologies are just fucking amazing. During the development process, there were many times I was simply in awe at how easy and convenient it was to create and achieve stuff.

Eg. making a member section post list? Just make a member posts container component, and insert the standard post-list component with a username/id parameter. In the words of the late Steve Jobs,

It just works.

So today I’m sharing a little captcha component I created that can be reused in all your forms. I wanted something light and easy, without integration into the official captcha services. If you’re looking for a real Captcha tutorial, please skip this.

The idea is simply to validate a simple dynamic mathematic question.

The UI would look like this.

We’re calling this the antibot component. Make one by typing this in the command line. If you’re manually creating component files in angular2, you’re doing it wrong.

this will generate these files in your project folder, and also automatically declare them in your app.module.ts

The code of the antibot.component.ts is super lean.

So we’re basically generating two random numbers from 1-20 , the answer will be the sum of the both of them.

We create a checkAnswer() method that checks if the user input = the sum of both parts. If so, we return true. Otherwise, we return an error message which gets printed in the view.

Speaking of the view..

Just some flex box bootstrap 4 alpha 6 code.

We interpolate the two numbers to be shown, and bind the text input to the answer variable.

The error div only shows up if the error variable isn’t null.

That’s it! So how do we use it?

We make use of the ViewChild method to achieve two-way binding between the components.

Here is how the antibot component is implemented in the parent contact form’s view.

And in the contact form component, we just need to perform 4 steps.

Import the Antibot component:

Initialize our Antibot component as a ViewChild:

Import the antibot component before the constructor with ViewChild.

This means that from here on, you can pass data to and from the antibot component via this.antiBot

Lastly, on the onSubmit method, simply run the antibot check. If it returns true, proceed with submitting the form. We don’t even need to handle the error here as it is done within the antibot component. We do however need to revert the loading state of the button back to normal.

And that’s it! We just need to perform these 4 steps for every other form component that we want to implement the antibot component to!

All hail, AngularJS 2!!!


File Upload with Angular 2 and Laravel 5

Ok the latest hurdle was handling File uploads via Angular JS 2, and receiving it on the API end in Laravel 5.

I realised there wasn’t a lot of resources on the internet about this, and earlier reports shown that file uploading was not supported in Angular JS 2. Thankfully, this is now possible and quite easy.

First to set up the file upload on Angular JS 2.

Simply set up a file input component, you can wrap it in a directive, but for simplicity’s purposes, I am simply listening to a generic input here.

In the view,

In the component, we have a fileUpload method which listens on any changes to the input, if so, we upload the file to the API.

And on the receiving controller in Laravel, it’s as simple as:


Laravel 5.3 Passport Oauth woes

Ok I’m about 2 weeks into my head first dive into AngularJS 2 and Laravel 5.3.

I’m approaching Angular JS 2 from 1, but going into Laravel pretty much from scratch (with prior PHP experience), so there were/are alot of new paradigms to get used to.

So far, it’s been pretty mind blowing on how easy it is to accomplish things, provided one gets the syntax and methodology correct. In both AngularJS2 and Laravel 5, one would notice that there is a lot more ‘setting up’ to do before one gets to coding a new feature, be it with a new controller or service. But it all works out well, because in the end, the code and data is more structured.

I was particularly impressed with how the Eloquent ORM system in Laravel, where I define my database table relationships, and simply let Laravel handle all relational calls from there. Mindblowing.

My social media app is coming along very well so far, with AngularJS 2 as the frontend, and Laravel 5 serving as the API and future backend management.

Now on to my problem. User Auth.

A classic user auth via login form is easy as pie with Laravel, however since I’m building an API, I need something different. Passport was supposed to be the answer, but apparently it is not, or not as easy as I thought it would be.

You see, Passport is meant to be a way for one to build an OAuth server in minutes.

An OAuth server however, is not quite simply a login mechanism. I mean, part of it IS providing a means for user to get authenticated (log in), but to put it in layman terms, it’s like building Pinterest just so I can find a way to upload my photos a website.

Passport in fact seems to be at it’s core, creating a separate OAuth server, for Clients/Consumers (which confuses me to be honest), for sake of simplicity, let’s refer to Client as Our App. So the Passport implementation would act as Facebook, when we’re using Facebook Connect to login to Our App, but let’s refer to it simply as Passport.

So, in reality, one would find a ‘Connect with Passport’ button on Our App.

The user clicks on that button, and gets redirected to Passport. If the user is logged in on Passport, they get a dialog asking for permission to share their info with Our App.

User clicks yes, and they are redirected back to Our App with the access tokens.

Our App processes and stores that token information to determine user is logged in.

Done. Simple.

This methodology works if we are trying to login from a 3rd party website with our Passport credentials.

Problem 1
Our App and Passport is in fact the same platform. We are not trying to Connect with Passport, we are trying to Login to Our App.

Problem 2
We need to implement our Auth as an API, without redirects and confirmation on a web page.

There are some comments on threads saying “That’s the whole purpose of OAuth! So you don’t have to login with username/password!”

That is a stupid statement, because OAuth works by using credentials that you already logged into in the Passport server. You only don’t need to log in on Our App. At some point in time, you ALWAYS have to do a username/password login somewhere, as the basis of your authenticated user.

Which simply means, that in this single server/app implementation, OAuth is completely irrelevant!

Question then is..

Can we leverage Passport to just perform login auth and create tokens?

Seems like the Generate Personal Token is the way? It generates a token based on the logged in user to use freely, without requiring any authentication. Are there any security concerns though?

Maybe not, looks like what we’re looking at is Consuming our own API

Consuming own API is simply setting the Web Requests on Laravel to always generate an api token in cookies, so requests are authenticated. API Requests first look for authorization headers, if they don’t exist, then it looks for the cookie token.

At this points, it looks like a combination of Generating Personal Token, AND enabling Consuming Own API.

I’ve also come across some people saying the answer is Grant Password.

Ok after a lot of thinking, I finally understood the paradigm.

I was right when I said it was kind of overkill to use the Laravel Passport as a login mechanism. That said, it is also easy to leverage it for use in a self owned frontend + api.

Here’s the process.

  1. Create Sign Up APIs, using the built in Laravel Auth Methods. Nothing to do with Passport here.
  2. The Login API is simply a call to the OAuth method to retrieve a Password Grant. The params for the password grant require username and password, which acts as the login as well. A successful auth will return the token to be used.

That, is fucking it.

Look, the other OAuth functionality is only if you want OTHER apps to use YOUR PLATFORM as a means of logging in. Not the other way round.

So if you were actually coding something called , and make full use of Laravel Passport,  Stack Overflow might one day have an option for people to Connect with AngstyCoders, which then is when you would fully utilise Laravel’s Passport OAuth features.


Laravel Passport Routes Not Found

Woes of a programmer.

The building process actually is very satisfying and quick.

It is when shit that is unexplained happens, and you spend many hours, even days to troubleshoot and solve the problem that makes you want to pull your hair out.

In this case, I am experiencing a series of 404 errors in my Laravel Passport implementation.

It was working fine before when I first tested the project, back when the project was quite blank.

Suddenly now, upon loading the Vue frontend for the OAuth server, I get a 404 route not found for all the OAuth routes, /clients, /tokens, /personal-access-tokens, /scopes



Sorry to disappoint, couldn’t find the cause.

Started a fresh Laravel installation, installed Passport and the Vue Frontend, verified it worked, Installed Laravel/Cors plugin, which I thought was the cause, verified everything worked, everything worked.

Copied over all the controllers and services I did before, everything works.

Fuck you very much. 6 hours of my life I’m never getting back.


[AngularJS] Updating parent scope from a directive

Here’s the scenario.

I had a settings page for opening hours for a restaurant, which you set opening hours from Monday – Sunday.

I implemented a button on Monday, that allows you to use the same settings for all other days.

I bind this button to a directive, to capture the values of Monday, and then loop through Tues-Sun, clearing their select boxes, and populating them with the select boxes according to what Monday is set. (The reason why I’m not directly changing their ng-model value is because we can set multiple opening hours per day, which is done via an array in ng-model)

So far, the values get populated on screen beautifully. Upon clicking Save, I realised something:


The reason was because, i was setting the values in the directive via scope.tue_start, scope.tue_end, etc.

That meant I was setting the hours to these variables for the scope of the directive, NOT the parent/page.

So the question came down to:

How do I update the parent scope from within a directive?

After alot of headaches and searching, I finally found the syntax.

from within a directive, to access the parent scope, use


Some other people suggested defining a method in the parent scope to update the values, ie. updateOpeningHours(day)

And then calling that method from the directive scope. I haven’t given it a try, although I see it as a modular approach, for now, I’m quite happy with this simpler syntax.



SASS not working after updating NPM or Gulp

Recently ran into a fucked up issue, where a new collaborator on my project cloned the project onto their computer, ran npm install to install all dependencies, only to find that sass was not completing in gulp.

The SASS processor actually started, but simply wouldn’t finish.

SASS not running

After much troubleshooting, the conclusion was due to some dependency conflict.

After another round of hair pulling troubleshooting, I received the much dreaded: libsass bindings not found. Try reinstalling node-sass error.

In the past, reinstalling node-sass would have solved it, but turns out the problem was with the current version of Ionic, it only supported a specific version of gulp-sass.

If I ran npm ls node-sass

I would see:

The solution

Edit package.json, and change all includes of gulp-sass to version ^2.0.4

Re-install the dependency with npm

And running gulp now should have no errors, and correctly finish processing the sass method.

You’re welcome.


Where the fuck is LocalStorage in AngularJS 2?!

So I’m a new migrator from AngularJS1/Ionic1 to AngularJS2/Ionic 2.

Already I’m working on a new production project while learning on the job, and so far so good, until I ran into my post login processes, where I needed to store the logged in user info in the app, which traditionally would be done with LocalStorage, built in, in Ionic Framework 1.

To my dismay, there are ZERO docs on localStorage in AngularJS 2/Ionic Framework 1, nor the built in Storage service it provides. I managed to only learn about Storage-LocalStorage from a Udemy tutorial and searches, and turns out the way to import the service was wrong in most of the results.

The above syntax will result in an error that says:

Turns out, LocalStorage was removed entirely in Ionic2, and Storage was separated away from the core ionic-angular package, into a separate package called ionic/storage.

One has to install the @ionic/storage package first, by running:

Followed by importing the service in Ionic Framework 2 final, is this:

Remember to do this both in your component and app.module.ts. Remember to also declare the provider in your app.module.ts as so:

So to set and get data from Storage, simply do this:





You’re welcome.



How to install and setup AngularJS 2 with SASS/SCSS and Bootstrap boilerplate easily

Hooray, AngularJS2 is officially released, which means it will officially be the tool of choice to build websites for me from now on.

Infact, I already started working on it.

Unfortunately, after many tries with various boilerplates/methods, they were all super complicated and more importantly, failed at some point of set up.

Thankfully, I found a easy and quite fool-proof way to automatically generate an angularJS2 seed project with best practises and testing all built in, SCSS/SASS support and installing bootstrap in only a few steps.


It’s funny why angular-ci wasn’t really advertised much in the angularJS docs, I only found out about it from Maximilian Schwarzmüller‘s udemy angularjs2 course.

Anyway, refer to to get started with angular-ci.

You can also use angular-ci to generate directives, components, what-nots.