Stuff I'm Up To

Technical Ramblings

When is a Question Mark not a ? — August 29, 2018

When is a Question Mark not a ?

That’s a morning of smashing my face on the desk again. I deployed my dev program onto a production system and then started crying as it stopped working as it should.

It seemed that none of my query string parameters were making it through to the controller. I called up some debugging and dumped out my $request and $request->all() etc. and discovered that the parameters although shown in the browser dev window went AWOL between server and controller. On my dev environment it all acted as it should.

So there must be something different. PHP v7.2 on dev and v7.0 or production maybe? No, much simpler than that. None of the Laracasts and Laravel related Googling pulled up any particular clues. It wasn’t until I looked at Nginx and parameters not being passed to PHP that I got a hit.

https://serverfault.com/questions/685525/nginx-php-fpm-query-parameters-wont-be-passed-to-php

The answer was as simple as adding in the $is_args into my Nginx virtual server config.

location / {
  try_files %uri $uri/ /index.php$is_args$query_string;
}

Up until now I guess I’ve been using routing with the parameters as part of the URI. Now I’m using some query string parameters I need to put in the ?, which is the $is_args variable.

So why not a problem in dev? Because I’m not using Nginx, I just use artisan serve to debug my development program.

Advertisements
Laravel and Lagan Web Services – SOAP API — August 17, 2018

Laravel and Lagan Web Services – SOAP API

SOAP is a dirty word to me. But I have a need to interact with our CRM system to import / extract data. My go to platform for most of my PHP work is Laravel. So I looked at interacting with Lagan CRM using SOAP calls from PHP.

I started off accessing the Lagan WSDL pages to see what the capabilities of the API are.

http://[laganserver:8080]/lagan/services/FL?WSDL
http://[laganserver:8080]/lagan/services/FLAuth?WSDL
http://[laganserver:8080]/lagan/schema/FLService.wsdl

Now I can see the self documenting API calls I can make. I just need to create the SOAP envelope to pass data to the service with the call I want to make.

Continue reading

Laravel API and Bootstrap Form Validation — August 13, 2018

Laravel API and Bootstrap Form Validation

This caused me some grief today. I spent the day adding validation rules into my Laravel resource controller and rather foolishly set HTML5 validation parameters on my Vue.js / Bootstrap 4 form component.

Why foolishly?

Well if you follow the Bootstrap 4 JavaScript function to call form.checkValidity() you’re actually calling the HTML5 built in function. Not a Bootstrap function as I originally thought.

When Laravel validation failed at the resource controller and it pushes back 422 (Unprocessable Entity) and a json error object:

{"message":"The given data was invalid.","errors":{"name":["The name field is required."]}}

I thought Bootstrap was seeing the Laravel validation errors and flagging up fields as not valid. So I could not understand why one of my fields didn’t show as invalid when according to Laravel it was!

What I was actually doing was HTML5 validation and ignoring my Laravel validation response all together. With the API it’s best NOT to try to use both HTML5 and Laravel validation. You’ll get a confusing UX that uses a mix of browser error messages/popups and Bootstrap CSS error handling.

Make sure you add novalidate to your form tag – this ensures HTML5 browser validation is prevented at the form level.

To resolve the Laravel validation part I just use the Laravel json error object and DON’T USE checkValidity(), my axios .catch(error) processes the Laravel errors by calling showErrors(error.response.data)

 this.axios.post('/api/v1/mycall/',
   this.data
 ).then(() => {
   // That worked out well, do something.
 }).catch(error => {
   this.showErrors(error.response.data)
 })

 showErrors: function (error) {
  Object.keys(error.errors).forEach((field) => {
    let input = document.getElementById(field)
    input.classList.add('is-invalid') // Bootstrap invalid form input
  })
 }

This iterates through the json errors and adds the class is-invalid to the fields that Laravel tells me are invalid. This triggers Bootstraps CSS to show the field with a red border and unhides the form-control subsequent/child div that has a class of invalid-feedback

References

https://getbootstrap.com/docs/4.1/components/forms/#validation

When using Vue.js and Laravels json response the actual usage is closer to the server-side examples:

https://getbootstrap.com/docs/4.1/components/forms/#server-side

Laravel Debug Bar — August 6, 2018

Laravel Debug Bar

It’s a good job my job title doesn’t include development. Some things I find out seem a long time after I need then and would be useful in the world of development.

My latest discovery is the Laravel debug bar. https://github.com/barryvdh/laravel-debugbar

Using it means not so many dd() or dump() in my code to find out what Laravel sees. It even allows me to see the actual SQL queries being used.

Selection_073
Laravel Debug Bar

In many ways I wish I’d discovered this sooner.

Installation is very simple, just a composer require and then ensure your .env has the debug option enabled and/or debug bar enabled.

APP_DEBUG=true
DEBUGBAR_ENABLED=true

 

I Hate Internet Explorer — August 1, 2018

I Hate Internet Explorer

I just can’t seem to get it to die! Probably something to do with all those users out there spoiling my day and continuing to use it in Windows 7 – sadly in our corporate environment.

I’ve spent a few days with a problem showing “Syntax Error” in IE11 when my project runs just great in Edge, FireFox and Chrome.

After a lot of digging around in the components I’ve used I narrowed it down to one specific 3rd party component from npmjs. So I took a trawl through into the Github of the project and opened an issue. Turns out I’m not the only one seeing the problem. I guess everyone else is using more sensible browsers.

I got a great reply that pointed me to modifying my webpack config so it transpiled into IE11 compatible code. I’d already used polyfills like es6-promise and es6-object-assign and then babel-polyfill, but this obviously wasn’t enough.

The pointer was aimed at webpack. Now Laravel uses it’s own layer above webpack – Laravel-Mix, but with a bit more Googling I figured out how to add the necessary webpack config into mix to get it transpiling correctly.

Add the targets-webpack-plugin using yarn (or npm) as a “devDependency”

$ yarn add targets-webpack-plugin -D

In my webpack.mix.js file:

const TargetsPlugin = require('targets-webpack-plugin')

...

mix.webpackConfig({
  plugins: [
    new TargetsPlugin({
      browsers: ['last 2 versions', 'chrome >= 41', 'IE 11'],
    }),
  ]
})

Repackage my app with yarn run dev and IE11 is silent!

The internet is full of wonderfully helpful people. To those that post responses, write blogs or any kind of feed – I thank you all.

 

Axios and the X-CSRF-TOKEN —

Axios and the X-CSRF-TOKEN

When using Laravel it adds in some helpful headers to handle axios requests internally. But when it comes to sending requests externally you end up sending them the common headers added by Laravel and any plugins you may have added.

This typically includes the X-CSRF-TOKEN which your site uses to prevent Cross Site Request Forgery. But you don’t really want to send that out to external axios calls and in fact I’ve struggled as the sites I was using axios with returned a browser error because of it not being listed in their allowed headers:

SEC7123: Request header x-csrf-token was not present in the Access-Control-Headers-List.

SCRIPT7002: XMLHttpRequest: Network Error 0x8007005, Access is denied.

In order to resolve this you need to remove the headers from your axios call.

To do this I created a new instance of axios and returned that as my axios function.

let instance = this.$http.get(url, {
  transformRequest: function(data, headers) {
    delete headers.common['X-CSRF-TOKEN']
    delete headers.common['Authorization']
  }
})
return instance

I also added into here the removal of the Authorization header as that too should not go outside, and failed with the same message.

 

Laravel 5.5 and Bootstrap 4 — July 30, 2018

Laravel 5.5 and Bootstrap 4

Laravel 5.5 ships with Bootstrap 3. To make it use Bootstrap 4 you need to make a few changes.

resources/assets/js/bootstrap.js

Change require('bootstrap-sass') to require('bootstrap')

resources/assets/sass/app.scss

Change @import('~bootstrap-sass/assets/stylesheets/bootstrap'); to @import "~bootstrap/scss/bootstrap";

resources/assets/sass/_variables.scss

Change $font-size-base: 14px; to $font-size-base: 1rem;

Remove Bootstrap 3 using

$ npm remove bootstrap-sass

Install Bootstrap 4 using

$ npm install bootstrap

Rebuild your project

$ npm run dev
Laravel Forgotten User Password — July 27, 2018

Laravel Forgotten User Password

I rarely need to do this and it’s always something I Google when I do. But when I forget the admin users password on my dev app I need to reset it.

Easiest way is to use Laravel’s ‘tinker’

$ php artisan tinker
>>> use App\User
>>> $user = User::where('username', '=', 'admin')->first()
>>> $user->password = bcrypt('mysecret')
>>> $user->save()

 

 

Laravel and Vue.js Authentication — July 25, 2018
Laravel Vue.js and API Routes — July 23, 2018

Laravel Vue.js and API Routes

I ran into a problem where I’ve started to deploy Vue components using the Vue Router from within Laravel. As soon as I enabled the Vue route for /{any} I lost access to the api routes.

routes/web.php

Route::get('/{any}', function () {
  return view('home');
})->name('home')->where('any', '.*');

Auth::routes();

app.js

const routes = [
  {
    path: '/',
    name: 'home',
    component: home
  }, {
  ...
  }, {
    path: '*',
    name: 'notFound',
    component: notFound
  }
]

I took a look at the Laravel RouteServiceProvider.php and noticed that the order of the web and api providers put the web first, so I swapped them around and now my api’s are back in business.

/**
* Define the routes for the application.
*
* @return void
*/
public function map()
{
  $this->mapApiRoutes(); // Needs to be first

  $this->mapWebRoutes();

}

 

 

Laravel 5.5 and Hot Module Reload — July 20, 2018

Laravel 5.5 and Hot Module Reload

Revisiting a previous post  about vue-cli 3 and hmr I tried to get HMR going in a similar fashion through Laravel-mix.

First mistake to make is that laravel-mix does not need BrowserSync for HMR. So don’t install it or configure it in the webpack.mix.js file.

HMR on Laravel 5.5 is loaded by running the package.json “hot” script:

$ npm run hot

It compiles the assets and sits there doing apparently nothing. When actually it’s listening on localhost:8080 for HMR/WDS connections. Whilst in this state if you open another session and serve your project using artisan, HMR just works…

$ php artisan serve

… if you are developing on the same “localhost” as the HMR and artisan server are running on.

But what if you’re not?

I tend to fire up a virtual host with Laravel installed so can’t access it as “localhost” I must use one of it’s public interfaces such as 192.168.56.2.

To make laravel-mix HMR run on one of your public interfaces you’ll need to edit you webpack.mix.js file and add it the following as per your serving host:

mix.options({
  hmrOptions: {
    host: '192.168.56.2',
    port: 8080
  }
});

In your blade template ensure you refer to your assets using the form src="{{ mix('js/app.js') }}" as using it like this handles adjusting the host in the blade based on if you are running the hot script or not.

You MUST run two sessions to use HMR. One to run the hot compiler and one to serve the php environment with artisan. I’ve had frustrating times trying to use & for task spawning.

In session one:

$ npm run hot

In session two:

$ php artisan serve --host 192.168.56.2

Visit your app at: http://192.168.56.2:8000 and you’ll get your artisan served php project.

If you inspect the page in your browser you’ll see the mix src becomes //192.168.56.2:8080/app.js because of the webpack.mix.js change – NOT the artisan serve.

A Further Note

The ability to overwrite the config for hmtOption looks like a laravel-mix ^2.0 thing. I just spent an hour wondering why another project was failing to run on anything other than localhost when the option set.

Upgrading to laravel-mix ^2.0 in composer.json​ resolved the problem.

 

Laravel storage/logs Error — July 19, 2018

Laravel storage/logs Error

A regular issue for me is failing the initial deployment of a git clone Laravel server using Nginx. It’s almost always because I forget to create and give permissions to the Nginx user www-data.

UnexpectedValueException
There is no existing directory at "/var/www/myproject/storage/logs" and its not buildable: Permission denied
Then even if I do sort the permissions here it fails again with:
InvalidArgumentException
Please provide a valid cache path.
This is because the storage/framework path and subfolders don’t exist. You need to create folders and make sure the www-data user has read/write/create permissions:
$ mkdir -p storage/framework/cache
$ mkdir -p storage/framework/sessions
$ mkdir -p storage/framework/views
$ sudo chgrp www-data storage -R
$ sudo chmod g+rwx storage -R