When we have a Single Page Application, the routing is handled with the javascript framework router — meaning Laravel is not aware of the routes in the SPA. That’s not an issue by itself, but means when we want to link to our app deep links from our backend, we have to hardcode the links.

An example — we want to send an email with a link to the user profile. We do have the route registered in our VueJS router, but not in Laravel.

So we’d probably end up with some hardcoded url:

// our web.php// First, a link to our spa.blade.php file containing the SPA
Route::view('/app/{any_path?}', 'spa')->where('any_path', '(.*)'); …

Photo by Bogomil Mihaylov on Unsplash

My friend texted me once asking me who the best stand up was that he should watch and you know what he got? Nothing because apparently, I was still typing…

No, but seriously, there are so many amazing stand-ups these days that you can’t just choose one and stick to them.

Each stand-up comedian has their own way of making you laugh and sometimes pushing you away from the void that’s been eating you up for a long time. They are more than just people; they are…therapists.

The stand up comedians who tell stories throughout their show, those are my favorites. …

Image from google, the error is the same though

So you’ve set your local development, the website uses https which you haven’t added to your approved certs.

You open up the site in Chrome (ie. https://develop.localdev) and chrome welcomes you with:

Your connection is not private
Attackers might be trying to steal your information from develop.localdev (for example, passwords, messages, or credit cards). Learn more
develop.localdev normally uses encryption to protect your information. When Google Chrome tried to connect to develop.localdev this time, the website sent back unusual and incorrect credentials. This may happen when an attacker is trying to pretend to be develop.localdev, or a Wi-Fi sign-in screen has interrupted the connection. …

TL;DR — serve JS to users, server side rendered content to bots (the source code is available here — http://bit.ly/2m6HN8w)

While building Binge, my framework of choice was VueJs (and single page application). Happy with both choices.

If you (assuming a dev) view the source code — it would only show a couple of lines of code — some meta tags and an almost empty <body> tag with a root div and a bundled js file — so when people visit it, it’s a typical website, browsers download the bundle and render the page.

When Google (and other search engines or social networks) parses it, it’s that (almost) empty <body />. …

We’ll take the default import command and pipe it through with

In my tests, on a virtual machine with 2–4GB RAM, the ETA timer was pretty accurate for full mysql dumps with filesize of up to 3GB. If the file is larger, the timer can be off by a bit as slowdown happens.

Anyhow, the import was faster than using a typical mysql import.

Before proceeding, make sure you have installed on your linux box so we can monitor the progress.

Importing unzipped mysql dump with progress:

# The command
pv ./mysql-dump.sql | mysql -u user -p databasename

# pv — for monitoring the progress
# mysql-dump.sql — the file we want to import
# user — the mysql user
# -p - will ask for the mysql password
# databasename — the mysql database where we want to import the…

Teaser — cause every story needs one

What we will build:

The final custom side menu with header toggle

We had a need for a drawer menu on our Binge app. React navigation supports this, but changes how the screens are structured and we didn’t want the change — just a simple drawer menu on one of our screens.

So, let’s build one. What’s used in this tutorial:

  • react-navigation — Optional, but we use it our app. We will add the menu button on a screen header in navigationOptions
  • react-native-modal (for the animation/modal effect). Optional, if you don’t want to use this library, you’ll need to build the slide-in animation

The listed packages are JS based (no native linking required). I’ll assume you already use as it’s or you have another solution. …

Often when using react navigation tab navigation, there’s a need to call a method on the screen when the screen is focused or a tab on the tab bar is pressed, be it for screen refresh or any action we need.

Lets build the two:

  • Call a screen function when the screen is focused
  • Call a screen function when the navigation tab is pressed

Finally, we will have both events (as in the “Search” screen) called on focus and on tab bar press. …


Dejan Blazeski

Founder binge.app. Curious dev. Laravel / Angular / VueJs / React Native / Docker. Love stand up shows.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store