DEV Community: Martins Onuoha

Problem-solving Hacks-Solving Problems by Avoidance

Martins Onuoha — Fri, 22 Mar 2024 11:40:07 +0000

Have you ever laughed hard at a good joke? Sometimes it’s just you. Other times, it’s you and a bunch of other people sharing this joke; whatever the case, a good joke is always a good joke…unless, of course, the joke's on you.

One such joke was this phone call I was on at the moment — “Yes, Ma’am, it won’t be a problem, I’d have to take down the current site, remove the unneeded subdomains, and upload the new one.” I tried to explain in the lamest of terms possible. “Okay, okay, that is fine. What do you need?” Do you know how you learn a lot about a person just from a simple phone conversation? I learned in the few minutes that passed that the woman on the other end of the phone was always in a rush.

For developers, getting a “job” or project to work on can come from one of two ways — “Hello, Is this Simon? I heard you build websites”…“Hello, I’m Simon (sorry Simons all over the world.), I am a software developer with a huge amount of experience I won’t want to bore you with, I build websites, mobile apps, I can build nations for the right amount, plus, I can bake really good cakes. The point is, I’m broke, any project at all, just throw it at me…please, I beg you.”

This job was the former.

“I’d just need access to the servers.”. “What access? What servers?” She asked, utterly confused. I sighed, I had almost forgotten who I was talking to. “I would need ALL the login details to ALL the sites,” I rephrased. “Oh, ask Steve; he has all of those.”.

Steve was the last guy to work on the site.

“I already did, Steve says all the details are in your email.”

“Well, I don’t know how to find it there, just log in and do what you need to do.” She retorted.

“Ma’am, I need the details to log in. I cannot do anything if I cannot log in to your server, I cannot log in to your server if I do not have access to the details”. At this point, I was beginning to get irritated. Was she expecting me to use my telekinesis powers to gain access to the servers? I got to my PC, holding down the phone to my ear with my shoulder I pulled up my resume and perused through just to be sure I didn’t accidentally put in “Has impeccable superpowers” somewhere in my skill sets. Nope, Nothing.

“Ma’am, can I at least have access to your email or the email it was registered with so I can find the details for you? Cause I asked Steve, and he doesn’t have it.”

The next thing I heard from the other end of the phone, was going to stay with me forever.

“I don’t remember this fact. Steve handled everything.

Hack into the website and then reset it.

The Russians did not need login details to hack into America’s system. So please, do what you have to do to get us moving.”

“Sorry, What?” I stuttered. “Yes, Hack the servers” She confidently replied.

“Unfortunately ma’am, I’m not Jon Skeet, and even if I was, this would take more of our time. We’ll need to ask the right persons for the correct details so we don’t keep going back and forth. I’ve asked Steve and he doesn’t have it.”

“Alright, I’ll call you back.” She dropped the call.

She apparently missed the reference I made to Jon Skeet ( aka The Chuck Norris of Programming ). In case you also missed the reference:

The “Chuck Norris of programming” — a nickname inspired by an internet meme — has become a cult figure for thousands of computer programmers, to the extent he is occasionally pestered for selfies in his Berkshire home town. — BBC

He holds the top number of “reputation” points on StackOverflow — and has given well over 34,000 unrefutable answers on StackOverflow. So much so that some users joke: “When you search for “guru” on Google it says “Did you mean Jon Skeet?”

The problem with our job as software developers are people, tend to think we’re some sort of “Computer head” and can solve ANY problem and even when there’s none, they’d create problems and throw them at you. Developers sometimes tend to feel all great and mighty and enjoy taking on ANY challenge even unnecessary ones.

Here’s the gist: Don’t get into one if you don’t have to.

You’re a problem solver, and sometimes, the only way to solve a problem is to not get into it.

Even John Skeet would give an upvote to this. lol

Cheers ☕️

Building Vue Components With Pug & Stylus

Martins Onuoha — Fri, 22 Mar 2024 07:42:54 +0000

This post assumes you have beginner to intermediate JavaScript & Vue knowledge, have heard of, or have basic knowledge of preprocessors.

It’s already old news by now that Vue has a very small learning curve that allows any or almost anyone to jump right into learning with little or no hiccup. Vue’s out-of-the-box support for preprocessors also adds to this easy learning curve.

You might be coming from an SSR (Server Side Rendering) background, where views are rendered from the server-side with their associated data. As opposed to Client-rendered applications where everything is rendered client-side. SSR introduces you to a handful of templating engines that lets you render dynamic data from the backend in your views.

here’s a good read you could check out to understand the differences between Server-side and Client-side rendered applications.

If you have a bit of Nodejs SSR background, you would already be accustomed to templating libraries like Pug, Handlebars, EJS, etc. If you’re from a PHP background you would be familiar with the Blade templating engine. These templating libraries basically help you render dynamic data from the backend on the frontend. They also help you generate markup with loops based on conditions.

With Vue Single File Components (SFC), we can use preprocessors such as Pug, Babel (with ES2015 modules), and Stylus for cleaner and more feature-rich components. Some of them make writing HTML “easier”: like pug for example (which we’d be using). A typical pug syntax would look like this:

- var list = ["Able", "Cain", "Judas"]
each item in list
  li= item

Which renders to:

<li>Able</li>
<li>Cain</li>
<li>Judas</li>

What you would notice is that we can have contents rendered from dynamic arrays into an HTML list without having to manually do it.

What We’ll be building

We’ll be building a simple contact card component and duplicate it across our page with a for-loop and populate it with content.

Getting Started

We’ll start by spinning up a Vue application using the vue-cli. I’ll use the default options and continue with scaffolding the application. Projects created by Vue CLI are pre-configured with most of the common development needs working out of the box.

Note: “working out of the box” means you wouldn’t need to do any extra configuration to start working with these tools, however, you would need to install the necessary preprocessors and corresponding loaders as Vue wouldn’t install these by default if you do not need them. We’d need pug-plain-loader and stylus-loader.

In webpack, all pre-processors need to be applied with a corresponding loader. vue-loader allows you to use other webpack loaders to process a part of a Vue component. It will automatically infer the proper loaders to use based on the lang attribute of a language block and the rules in your webpack config.

- vue-loader docs

Create a new Vue application.

vue create vue-pug

Once that’s done, you can open up the application folder in your code editor. I’ll be using VScode.

cd vue-pug

code .

Using Preprocessors

To use pre-processors, we would need to install those preprocessors and their corresponding loaders. The two preprocessors we’d be using are pug and stylus.

yarn add --dev pug pug-plain-loader

Next, we install stylus.

yarn add --dev stylus stylus-loader

Stylus allows you to write CSS in a more reusable, concise robust manner. Here’s what that would look like:

textarea, input
  border 1px solid #eee
body
  color white

this renders to:

textarea,
input {
  border: 1px solid #eee;
}
body {
  color: #fff;
}

This should give you a bit of familiarity when we get into building out our component. For our component, we’d create a new file called UserCard.vue, within the components folder. This file would house our card components and take in the necessary props.

In our template section, within the Usercard.vue file, we need to first set the templating language to pug, then structure our elements in pug style.

<template lang="pug">
  .user-card-component
    .user-card-component__avatar
      img(:src='`${avatar}`' class='user-card-component__avatar-image')

    .user-card-component__name {{ username }}

    .user-card-component__email {{ email }}

    .user-card-component__action
      button(@click="$emit('contactUser')") Contact {{ lastName }}
</template>

A Bit About Pug Syntax

In our component above, we’ve created a parent class “user-card-component” that has four child classes; __name, __email, __action. You would notice we didn’t use traditional div tags, this is because pug’s Class Literal syntax allows us to define classes and omit the tag name, that Since div’s are such a common choice of tag, it is the default if you omit the tag name.

Our template structure above compiles to:

<div class="user-card-component">
  <div class="user-card-component__avatar">
    <img src="" class="user-card-component__avatar-image" />
  </div>
  <div class="user-card-component__name">
    John Doe
  </div>
  <div class="user-card-component__email">
    johndoe@gmail.com
  </div>
  <div class="user-card-component__action">
    <button onclick="func">Contact John Doe</button>
  </div>
</div>

Next, we need to update the script part of our component to accept the necessary props and add a computed property to get the last name of the contact person.

<script>
export default {
  name: 'user-card-component',
  props: {
    avatar: {
      type: String,
      required: true,
      default: '',
    },
    username: {
      type: String,
      required: true,
      default: 'Martins Onuoha',
    },
    email: {
      type: String,
      required: true,
      default: 'martinsvictor.nd@gmail.com',
    },
  },
  computed: {
    lastName() {
      return this.username.split(' ')[1];
    },
  },
};
</script>

Our Card component expects 3 required props; avatar, username, and email. We’ve also added a lastName method to return the last name of the user.

Finally, we need to style our component using Stylus. Still, within the Usercard.vue component, we’ll add a style section and set the language type to “stylus”.

<style lang="stylus">
  shdw = 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.2)
  .user-card-component
    box-shadow shdw;
    background-color #ffffff
    border-radius 10px
    padding 10px
    width 70%
    margin 0 auto
    &__avatar
      &-image
        border-radius 50%
        width 6rem
    &__email
      font-size 15px
      padding 10px
      color #CCC
    &__name
      font-size: 20px
      font-weight 500
    button
      padding 8px
      background #4DB6AC
      color #FFF
      width 80%
      border-radius 5px
      box-shadow shdw
      border 0
    .spacer
      border-color #CCC
</style>

Stylus lets us omit braces and semicolons in our styling, create variables, and use nested selectors. This should be enough to design our card component. Next, we’d update the App.vue to use Pug and Stylus, import, and use our card component with some static data.

In App.vue, replace the existing content with this:

<template lang="pug">
  #app
    div.col(v-for="user in users")
      UserCard(
        :avatar='user.avatar'
        :username='user.username'
        :email='user.email'
      )
</template>

<script>
import UserCard from './components/UserCard.vue';
export default {
  name: 'App',
  components: {
    UserCard,
  },
  data() {
    return {
      users: [
        {
          avatar: 'https://avatars0.githubusercontent.com/u/29035007?s=460&u=d43c9fdb7ae872c84a38aa6a0c04db49cb7e59f4&v=4',
          username: 'Martins Onuoha',
          email: 'martinsvictor.nd@gmail.com',
        },
        {
          avatar: 'https://avatars2.githubusercontent.com/u/2798204?s=460&u=d5b35f5a43986232e2d226539071ec1008db5166&v=4',
          username: 'Guillaume Chau',
          email: 'guillaume.b.chau@gmail.com',
        },
        {
          avatar: 'https://avatars3.githubusercontent.com/u/499550?s=460&u=de41ec9325e8a92e281b96a1514a0fd1cd81ad4a&v=4',
          username: 'Evan You',
          email: 'evan@you.com',
        },
        {
          avatar: 'https://avatars2.githubusercontent.com/u/3277634?s=460&v=4',
          username: 'Haoqun Jiang',
          email: '@haoqunjiang',
        },
      ],
    };
  },
};
</script>

<style lang="stylus">
body
  background-color: #FFF4EC
#app
  font-family: Avenir, Helvetica, Arial, sans-serif
  display flex
  justify-content: center;
  text-align: center
  margin-top: 60px
  .col
    width 100%
</style>

We’ve imported the UserCard component, looped through our static data (an array of user objects), and generated a UserCard for each of them, passing in the required props. Let’s see what we have now.

yarn serve

This should build and serve our vue application on localhost:8080

Hopefully, this should help you understand how to use preprocessor with Vuejs. Here’s a link to the repo to serve as a starter.

MartinsOnuoha / vue-pug-starter

Vue Component with Pug Starter Template

Vue-Pug-Stylus Starter

A starter pack for working with Pug & Stylus in Vuejs.

Project setup

yarn install

Compiles and hot-reloads for development

yarn run serve

Compiles and minifies for production

yarn run build

View on GitHub

Cheers ☕️

Build a Simple Blog + Multiple Image Upload with Laravel & Vue

Martins Onuoha — Mon, 11 Mar 2024 08:28:56 +0000

Psst! If you need help setting up laravel, here’s a walkthrough:

The Hitchhiker’s Guide to Laravel Setup | DevjavuThe Hitchhiker’s Guide to Laravel Setup | Devjavu

A step by step guide to setting up Laravel on your machine.

devjavu.space

Image upload is one of the most essential features of any social application. Regardless of how small or large, your application might be, as long as you’re managing users' data or allowing users to manage their own data, at some point you’d need to provide the users the ability to upload pictures within your application.

In this article, I’ll run you through how to implement multiple image upload feature with VueJS and Laravel while pretending to build a blog, lol.

Here’s a preview of what we’ll be building ( Blog Café ):

Some Side Note 📝: - You’d need a basic understanding of Javascript - We’ll be keeping it simple and just use Twitter Bootstrap - You’ll need to have a bit of experience with Laravel/PHP and VUEjs ( Vuex too ) - For this project, we’ll be using Laravel’s local driver to store files, however, for a production-level application, you might want to use other options.

Requirements

Laravel version 5.8.*

As at the time of writing, Laravel 5.8 was the latest version, this would have changed over time. This tutorial assumes you already have a working LAMP setup, so we’ll just start off by scaffolding a new Laravel application. Open up your Terminal or any preferred terminal emulator, navigate into your preferred project directory, and create a new Laravel project:

laravel new multi_upload

or via composer:

composer create-project --prefer-dist laravel/laravel multi_upload

You should now have a new directory ( multi_upload ) that contains a fresh installation of Laravel.

Next, we’ll set up the database: Create a new database using any visual database design tool (MySQL workbench, SequelPro) or from the command line like so:

mysql -u username -p

Enter your MySQL password

MariaDB [(none)]> CREATE DATABASE multi_upload;

Navigate into your project directory, copy the .env.example file into a .env file open up the .env file.

cd multi_upload && cp .env.example .env

Replace the default database credentials with yours.

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=blogcafe
DB_USERNAME=root
DB_PASSWORD=Caser0le.

Don’t forget to generate your application encryption key with:

php artisan key:generate

Once we have the correct database credentials setup, we can scaffold Laravel’s user authentication.

php artisan make:auth && php artisan migrate

Models

You should have a working authentication system, but before we run a migration, let’s set up our models.

Disclaimer: My implementation would be very basic and simplified. There are more professional ways to do this and I recommend you make more research for the best ways to achieve this.

We’ll have a Post model with one or more images associated with it, and a PostImage model that is associated with a single post. We’ll also have many Posts associated with a Single User model.

php artisan make:model Post -m && php artisan make:model PostImage -m

We’ll edit the Post migration file to include some fields. Open the project in your preferred code editor. If you’re using VsCode, simply open it up from the terminal:

code .

Update the Post migration (database/migrations/create_posts_……php) file to contain these columns:

  public function up()
  {
    Schema::create('posts', function (Blueprint $table) {
      $table->bigIncrements('id');
      $table->integer('user_id')->unsigned();
      $table->string('title');
      $table->text('body');
      $table->timestamps();
    });
  }

We’ll also update the PostImage migration file (database/migrations/create_posts_imag_s……ph_p) to contain the following columns:

  public function up()
  {
    Schema::create('post_images', function (Blueprint $table) {
      $table->bigIncrements('id');
      $table->integer('post_id')->unsigned();
      $table->string('post_image_path');
      $table->string('post_image_caption')->nullable();
      $table->timestamps();
    });
  }

You can now run a fresh migration so all the changes made to table will reflect:

php artisan migrate:fresh

Relationships

Relationships can be really complicated…I know, good thing is, we’re not dealing with humans here, so it doesn’t have to be. like I explained earlier. The relationship is simple:

A User has many Posts
A Post can only belong to one User
A Post has many Images
An Image can only belong to one Post

Let’s create the first relationship between the User and the Post (A User has many Posts). in your App\User.php file, update the code to have the relationship.

  public function posts()
  {
    return $this->hasMany('App\Post');
  }

We’ll also create the Post Model relationship to the User Model(A Post can only belong to one User) and also the relationship between the Post Model and the PostImage Model. We also want to include the fillable fields for the Post Model (while we’re here). In your App\Post.php add the author and post_images function to return the relationships:

class Post extends Model
{
    protected $fillable = ['title', 'body', 'user_id'];

    public function author()
    {
        return $this->belongsTo('App\Models\User');
    }

    public function post_images()
    {
        return $this->hasMany('App\Models\PostImage');
    }
}

Remember an Image can belong to only one post, we want to add this relationship in the PostImage Class, we also want to specify the fillable fields:

class PostImage extends Model
{
    protected $fillable = ['post_id', 'post_image_path', 'post_image_caption'];

    public function post()
    {
        return $this->belongsTo('App\Post');
    }
}

Just before we start working on our controllers, we need to setup a separate disk for uploading our images. In our config/filesystem.php file, create a new object property called uploads under the disks field:

...

'uploads' => [
  'driver' => 'local',
  'root' => 'uploads',
  'url' => 'uploads',
],

...

Controller

We’ll need a controller to handle the creating and fetching of posts. we can easily make a new controller using Laravel’s make:controller artisan command:

php artisan make:controller PostController
You should now have a PostController file in the app/Http/Controllers/ folder.

In our PostController.php, we’ll create two methods: one for fetching posts (getAllPosts) and the other for creating a new post (createPost). Let’s make sure we have all the necessary classes and facades we’ll be using imported at the top of the controller file:

use Illuminate\Http\Request;
use App\Models\Post;
use App\Models\PostImage;
use Auth;
use Storage;
use Illuminate\Support\Facades\DB;

Get All Posts

First, we need to use eloquent’s eager loading to grab all the posts as well as the related images. This is possible because of the relationship we had earlier specified in the Post model. We’ll order the results by the date created in descending order so we get the most recent posts at the top.

$posts = Post::with('post_images')->orderBy('created_at', 'desc')->get();

Then return a JSON response with the queried posts.

return response()->json(['error' => false, 'data' => $posts]);

Putting it all together:

    public function getAllPosts()
    {
        $posts = Post::with('post_images')->orderBy('created_at', 'desc')->get();
        return response()->json(['error' => false, 'data' => $posts]);
    }

Create Post

For the create post function, It’ll take an instance of the Request class as a parameter, why? cause, like I said we’ll be making ajax requests to the backend, and data from these requests, are contained in the instance of the Request object. We’ll also grab all of the data we need from the request object:

The post title
The post content
The array of images
The currently authenticated user

Once we have the payload from the request, we’ll run a database transaction, to perform multiple related queries, which is creating a post and its related images.

We use transactions for multiple queries that are related so the database does an automatic rollback in case one related query fails.

We already used the DB Facade at the top of our controller:

use Illuminate\Support\Facades\DB;

Both queries to create a post and related images would go within the DB::transaction function.

DB::transaction(function () use ($request) {
  // Queries happen here
}

Within the transaction function, we grab our payload properties:

$user = Auth::user();
$title = $request->title;
$body = $request->body;
$images = $request->images;

Next, we’ll create a new post with the title, body, and the user_id:

$post = Post::create([
    'title' => $title,
    'body' => $body,
    'user_id' => $user->id,
]);

Next, we’ll store each of the images first in a specific folder then into our database. By “specific folder” I mean a folder unique to each authenticated user and the created post. Something like this:

/uploads/grimesbuttom@butt.com/posts/1/skyscraper.png
// store each image
foreach($images as $image) {
    $imagePath = Storage::disk('uploads')->put($user->email . '/posts/' . $post->id, $image);
    PostImage::create([
        'post_image_caption' => $title,
        'post_image_path' => '/uploads/' . $imagePath,
        'post_id' => $post->id
    ]);
}

Once the images have been stored, we return a JSON response to the frontend.

return response()->json(200);

Putting it all together:

  public function createPost(Request $request)
  {
      DB::transaction(function () use ($request) {
          $user = Auth::user();
          $title = $request->title;
          $body = $request->body;
          $images = $request->images;

          $post = Post::create([
              'title' => $title,
              'body' => $body,
              'user_id' => $user->id,
          ]);
          // store each image
          foreach($images as $image) {
              $imagePath = Storage::disk('uploads')->put($user->email . '/posts/' . $post->id, $image);
              PostImage::create([
                  'post_image_caption' => $title,
                  'post_image_path' => '/uploads/' . $imagePath,
                  'post_id' => $post->id
              ]);
          }
      });
      return response()->json(200);
  }

Routes

For the web routes, we’ll create a route group that’ll use the web auth middleware. The route group will have two routes get_all and create_post — for getting all posts and creating new posts respectively. Open the web.php file and add these lines:

Route::group(['middleware' => 'auth', 'prefix' => 'post'], function () {
    Route::get('get_all', 'PostController@getAllPosts')->name('fetch_all');
    Route::post('create_post', 'PostController@createPost')->name('create_post');
});

Frontend ( blade )

Let’s move over to the frontend and do a bit of work, first on the blade part. in our home.blade.php, we need to update the UI to use a 6x6 grid layout. The left grid will hold the create-post component, while the right grid will hold the list of posts. In case you missed it earlier, this is what we’re going for:

Let’s update our home.blade.php:

@extends('layouts.app')

@section('content')
<div class="container">
    <div class="row">
        <div class="col-md-6">
            <create-post />
        </div>
        <div class="col-md-6 posts-container" style="height: 35rem; overflow-y: scroll">
            <all-posts />
        </div>
    </div>
</div>
@endsection

We have our blade view set up properly, most of the work will go into the individual Vue components.

Components ( Vue )

Before we get started with the vue components, we need to set up our VueJs environment. Laravel already comes shipped with Vue, so we won’t have to do much work setting up, thankfully. First, we’ll install all of the npm packages in our package.json file:

npm i

We’ll also need element-ui - mostly because we need to use the dialog box and the upload component that comes with it. It saves us more work.

npm i element-ui -S

we’ll also be using Vuex for state management.

npm i vuex -S

Once you all the necessary packages installed, we’ll set up our components, store, and packages. Create two new files CreatePost.vue and AllPosts.vue in resources/js/components. Also, we’ll create a new folder called store in resources/js. In our store folder, we’ll create an index.js file to set up our Vuex store. Your directory should look something like this:

We’ll now register these new components in our resources/js/app.js file. Add this to your app.js file:

Vue.component('example-component', require('./components/ExampleComponent.vue').default);
Vue.component('create-post', require('./components/CreatePost.vue').default);
Vue.component('all-posts', require('./components/AllPosts.vue').default);

In the same app.js file we would also set up our Vuex store and the element-UI library. Update your app.js file like so:

require('./bootstrap');

window.Vue = require('vue');
import store from './store/index';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);


Vue.component('example-component', require('./components/ExampleComponent.vue').default);
Vue.component('create-post', require('./components/CreatePost.vue').default);
Vue.component('all-posts', require('./components/AllPosts.vue').default);

const app = new Vue({
    store,
    el: '#app',
});

Store

Let’s work on our store (to read more about Vuex, go to the docs), we’ll set up a single mutation and action to handle fetching and updating the posts list. in our store/index.js file:

We’ll import and use the Vuex module.

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

const debug = process.env.NODE_ENV !== 'production';

Next, we want to set up our state object to hold the posts' property ( an array of all posts ). We’ll then define an asynchronous getAllPosts action to handle the request to get all posts. And finally, a setPosts mutation to update the posts' property in our state.

export default new Vuex.Store({
  state: {
    posts: [],
  },

  actions: {
    async getAllPosts({ commit }) {
      return commit('setPosts', await api.get('/post/get_all'))
    },
  },

  mutations: {
    setPosts(state, response) {
      state.posts = response.data.data;
    },
  },
  strict: debug
});

Now that our store is all set up, we’ll move into the AppPosts.vue component to render all the created posts.

View Posts

We’ll render all the created posts in individual cards inside columns and use a dialog box to view individual post details ( this is where element-ui comes in handy ). Let’s update the AllPosts.vue file:

<template>
  <div class="row">
    <div class="col-md-6" v-for="(post, i) in posts" :key=i>
      <div class="card mt-4">
        <img v-if="post.post_images.length" class="card-img-top" :src="post.post_images[0].post_image_path">
        <div class="card-body">
          <p class="card-text"><strong>{{ post.title }}</strong> <br>
            {{ truncateText(post.body) }}
          </p>
        </div>
        <button class="btn btn-success m-2" @click="viewPost(i)">View Post</button>
      </div>
    </div>
    <el-dialog v-if="currentPost" :visible.sync="postDialogVisible" width="40%">
      <span>
        <h3>{{ currentPost.title }}</h3>
        <div class="row">
          <div class="col-md-6" v-for="(img, i) in currentPost.post_images" :key=i>
            <img :src="img.post_image_path" class="img-thumbnail" alt="">
          </div>
        </div>
        <hr>
        <p>{{ currentPost.body }}</p>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="postDialogVisible = false">Okay</el-button>
      </span>
    </el-dialog>
  </div>
</template>

Next in our script section, we want to use Vuex mapState helper which generates computed getter functions for us. We’ll pass an array of strings to mapState with the mapped posts property. We’ll also trigger the getAllPost action in a beforeMount hook using store.dispatch (Alternatively, we can use the mapAction helper to grab the getAllPost action). We’ll then define a helper function truncateText to truncate long post contents and one more function viewPost to view a post’s detail in a dialog box.

<script>
import { mapState } from 'vuex';

export default {
  name: 'all-posts',
  data() {
    return {
      postDialogVisible: false,
      currentPost: '',
    };
  },
  computed: {
    ...mapState(['posts'])
  },
  beforeMount() {
    this.$store.dispatch('getAllPosts');
  },
  methods: {
    truncateText(text) {
      if (text.length > 24) {
        return `${text.substr(0, 24)}...`;
      }
      return text;
    },
    viewPost(postIndex) {
      const post = this.posts[postIndex];
      this.currentPost = post;
      this.postDialogVisible = true;
    }
  },
}
</script>

To bundle everything and watch our files for changes, we’ll run Laravel Mix:

npm run watch

You can start your Laravel application with:

php artisan serve

Your application should be running on localhost:8000. Register a new user and be sure you can view your home page (of course you might not see a lot on it yet).

I’ll go ahead to use Tinker to create some Post and related Post Images. Tinker allows you to interact with your entire Laravel application on the command line, including the Eloquent ORM, it’s an interactive PHP shell. You can access the tinker interface with:

php artisan tinker

I won’t go into all the details about using tinker, but if everything works fine you should be able to create posts and images from the tinker shell:

>>> $user = App\User::find(1)
>>> $post = App\Post::create([
        "title" => "Some blog post",
        "body" => "this is a random post about absolutely nothing"
        "user_id" => $user->id
    ])
>>> $postImage = App\PostImage::create([
        "post_image_caption" => $post->title,
        "post_image_path" => "https://skillsouq.com/wp-content/uploads/2014/10/background_01.jpg"
    ])

Create Posts

To create a new post, we’ll need a form to take the post title, post content, and post images. for the image upload, we’ll be using element-ui’s upload component, this will help us handle and preview the files properly…It also has a better user experience.

We’ll update the CreatePost.vue component:

<template>
  <div class="card mt-4" :key="componentKey">
    <div class="card-header">New Post</div>
    <div class="card-body">
      <div
        v-if="status_msg"
        :class="{ 'alert-success': status, 'alert-danger': !status }"
        class="alert"
        role="alert"
      >{{ status_msg }}</div>
      <form>
        <div class="form-group">
          <label for="exampleFormControlInput1">Title</label>
          <input
            v-model="title"
            type="text"
            class="form-control"
            id="title"
            placeholder="Post Title"
            required
          />
        </div>
        <div class="form-group">
          <label for="exampleFormControlTextarea1">Post Content</label>
          <textarea v-model="body" class="form-control" id="post-content" rows="3" required></textarea>
        </div>
        <div class>
          <el-upload
            action="https://jsonplaceholder.typicode.com/posts/"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-change="updateImageList"
            :auto-upload="false"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt />
          </el-dialog>
        </div>
      </form>
    </div>
    <div class="card-footer">
      <button
        type="button"
        @click="createPost"
        class="btn btn-success"
      >{{ isCreatingPost ? "Posting..." : "Create Post" }}</button>
    </div>
  </div>
</template>

We’ll add some styling to the upload component:

<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>

In our script section, we’ll import the mapAction helper which maps component methods to store.dispatch calls.

import { mapActions } from 'vuex';

Next we’ll be needing these data properties:

export default {
  name: "CreatePost",
  data () {
    return {
      dialogImageUrl: '',
      dialogVisible: false,
      imageList: [],
      status_msg: '',
      status: '',
      isCreatingPost: false,
      title: '',
      body: '',
      componentKey: 0
    }
  },
  ...

Within our method property, we’ll map the getAllPosts action we defined in our store to the component:

methods: {
  ...mapActions(['getAllPosts']),
}

Next in our methods property, we’ll need a couple of methods to handle image preview and update our image list.

methods: {
  updateImageList (file) {
      this.imageList.push(file.raw)
  },
  handlePictureCardPreview (file) {
      this.dialogImageUrl = file.url
      this.imageList.push(file)
      this.dialogVisible = true
  },
  ...
}

We’ll need another method to handle showing success and error notifications.

...
showNotification (message) {
  this.status_msg = message
  setTimeout(() => {
    this.status_msg = ''
  }, 3000)
}
...

One more method to handle validation of our form… (you thought it was over, eh?)

...
validateForm () {
  // no vaildation for images - it is needed
  if (!this.title) {
    this.status = false
    this.showNotification('Post title cannot be empty')
    return false
  }
  if (!this.body) {
    this.status = false
    this.showNotification('Post body cannot be empty')
    return false
  }
  if (this.imageList.length < 1) {
    this.status = false;
    this.showNotification('You need to select an image');
    return false;
  }
  return true
},
...

And finally our createPost Method:

  createPost (e) {
    e.preventDefault()
    if (!this.validateForm()) {
      return false
    }
    const that = this
    this.isCreatingPost = true
    const formData = new FormData()

    formData.append('title', this.title)
    formData.append('body', this.body)

    // JQuery comes preinstalled with Laravel-Vue so we can do this
    $.each(this.imageList, function (key, image) {
      formData.append(`images[${key}]`, image)
    })

    window.api.post('/post/create_post', formData, {
        headers: { 'Content-Type': 'multipart/form-data' }
      })
      .then((res) => {
        this.title = this.body = ''
        this.status = true
        this.showNotification('Post Successfully Created')
        this.isCreatingPost = false
        this.imageList = []
        /*
          this.getAllPosts() can be used here as well
          note: "that" has been assigned the value of "this" at the top
          to avoid context related issues.
          */
        that.getAllPosts()
        that.componentKey += 1
      })
  },

Because we need to send image files to our API, we’ll be using the FormData class. The FormData interface provides a way to easily construct a set of key/value pairs representing form fields and their values. This is so our request looks like it’s coming from an actual form and allow Laravel to read the image file properly.

If all went well and the gods were with us, we should have it working as expected:

I know this was a long ride, hopefully, you were able to make this work on your end. The codebase for this tutorial lives on this repository feel free to explore.

MartinsOnuoha / BlogCafe

A Simple SPA Blog built with Laravel Vue (With Multiple Image Upload)

BlogCafé ☕️

BlogCafé is a simple Single Page Blog Application built with Laravel 5.8 and Vue2.

BlogCafé allows users create accounts, create blog posts with multiple images upload feature, view all blog posts and view a single blog post content.

BlogCafé is a end product of a blog tutorial I wrote detailing how to build and implement a blog system with multiple image upload using Vuejs(a frontend SPA) and Laravel.

Features

Login

Register

Multiple Image upload

Create Blog Post

View Blog Post

Preview

Installation

Clone repository

clone repository to your local machine

git clone https://github.com/MartinsOnuoha/BlogCafe.git

Change Directory

Navigate into the project directory

cd BlogCafe

Copy .env file

copy content of the environment file

cp .env.example .env

Edit .env file

Update .env file with DB information

  DB_CONNECTION=mysql
  DB_HOST=127.0.0.1
  DB_PORT=3306
  DB_DATABASE=blogcafe
  DB_USERNAME=root
  DB_PASSWORD=grimesBottom

Install laravel packages

Remove composer.lock file and…

View on GitHub

Cheers ☕️

Properly Passing Data from Laravel Blade to Vue Components

Martins Onuoha — Wed, 06 Mar 2024 10:08:43 +0000

Prop “authuser” is passed to component <Anonymous>, but the declared prop name is “authUser”. Note that HTML attributes are case-insensitive and camelCased props need to use their kebab-case equivalents when using in-DOM templates. You should probably use “auth-user” instead of “authUser”.

The above is a likely error message you’d get if you set up Laravel and Vue js, and attempted passing data to your component via props the wrong way.

Sometimes, we encounter cases where we need to use Vuejs components in just a single part of our existing Laravel application.

You could have a structure like this and want the profile card on the left to be a separate Vue component, for whatever reason. The problem with using this kind of approach is, there’d likely be conflicts between templating engine syntax and Vuejs syntax. For example, Laravel uses the double curly braces {{ }} syntax that Vue uses.


<!-- laravel blade -->

<div>
  {{ Auth::user()->fullname }}
</div>

<!-- Vuejs -->
<div>
  {{ authUser.fullname }}
</div>

When working with Vue components in Laravel blade, you’d need to be careful to avoid some likely hiccups along the way. Laravel has an entire section that explains how to work with Laravel Blade and Javascript Frameworks.

What doesn’t work

Regarding why you’d likely get the error above: HTML is case insensitive and therefore limits you to using only kebab-case components and attributes in your template. so if you did this in your blade file:

<!-- something.blade.php -->

<div class="container">
  <profile-sidebar :authUser="{...}"></profile-sidebar>
</div>

You’d most likely get the same error. Also, if you tried writing your components in camel casing style, the DOM Parser would ignore the custom tag:

<!-- something.blade.php -->

<div class="container">
  <profileSidebar :authUser="{...}"></profileSidebar>
</div>

What works

For starters, to avoid one of such issues, you could stick to using only kebab-case components and attributes in your blade template.

Like so:

<!-- something.blade.php -->

<div class="col-xl-8">
  <account-update :auth-user="{{ Auth::user() }}"></account-update>
</div

And of course, you can still maintain camel casing style in your component files:

<script>
export default {
  name: 'side-profile',
  props: ['authUser'],
  mounted() {
    console.log(this.authUser)
  }
}
</script>

Hopefully, this helps clear some of the issues you might have encountered working with Laravel blade and Vue components.

Cheers ☕️

Auto-Deploy React Apps With Render

Martins Onuoha — Wed, 06 Mar 2024 09:39:39 +0000

This tutorial assumes you have basic knowledge of React.js

Like Heroku, and other cloud hosting platforms, Render is a cloud application hosting platform for developers to deploy static sites and dynamic applications. It also offers a fully managed hosted database with internal and external connectivity. This makes it useful for both frontend and backend developers alike.

This is going to be a quick walkthrough on how to deploy a React or Vue.js applications to Render and set up automatic deployment.

Getting Started

Requirements:

Node.js set up
Github account
Render account To get started, make sure you have Node.js and NPM set up properly on your local machine as this tutorial assumes. We’ll deploy a basic React application, however, I’ll assume you already have one created and want to deploy it.

To create a new React application, first, we install npx globally:

npm i -g npx

Next, I’ll create a new react application:

npx create-react-app myapp

This creates a new application and installs all the necessary packages.

If you change directory into the newly created react application (myapp), starting the server with yarn start should serve the application on port 3000.

Next, We’ll generate a production build of our React application. Production builds are optimized static HTML, CSS, and Javascript files. These files can be deployed on any static hosting service provider.

To generate a production build run the yarn build command:

yarn build

Once that’s done, a new folder called “build” would be generated, this folder contains all the static files we would eventually deploy to any static host provider.

From here on, you can decide to create a zip of the build folder, copy and extract it on a static host provider using FTP, but this process is mostly hectic and repetitive. To resolve this, we’ll deploy to Render and enable auto deployment with Github.

We’ll need to push the source code to Github. Create a GitHub repository and set the repository URL as your origin for your react project.

Once the repository has been created, set the repository as your remote origin. In your terminal within your project root:

git remote add origin https://github.com/MartinsOnuoha/myapp.git

make a commit and push to master branch.

git add . && git commit -m “initial commit” && git push origin master

Deploying to Render

You can create a Render account using Github login if you do not already have one.

Once you’ve created an account, at the top right, click on “New” and select “Static Site” from the drop-down.

Next, you’ll need to select the repository you just pushed the react app to.

You will be authenticated and redirected back to Render with your selected repository on the list. Click on the repository.

This will take you to the setup page where you’d be required to enter a project name, select the deployment branch and write the build command. Let’s go through some of the fields.

Name: This can be anything you want, it’s the name of your static site. Render uses this to generate a unique URL.
Branch: The deployment branch. This is the branch Render watches for changes on before running the build command again (automatically).
Build Command: is the command Render should run to install dependencies and generate static files.
Publish Directory: The directory containing the static files generated by the build command. Once that’s all set up, you can click the “Advanced” tab and confirm that “Auto Deploy” is set to “Yes”, this should be the default value.a

Click the “Create” button at the bottom. Render will now attempt to generate your React Site given all the parameters. After a couple of seconds, depending on your internet connection, you should see that your site is live.

You can visit the URL right below your App name to view your site.

Hopefully, this gives you a basic understanding of how to deploy react applications on Render.

Cheers ☕️

How to Serve Laravel Apps With Valet on MacOS

Martins Onuoha — Sun, 10 Dec 2023 21:05:40 +0000

If you’re here, you probably already have Laravel installed on your machine (and you run macOS). If you don’t have Laravel set up properly and you use a different operating system, I’ve written a guide to help you set up Laravel.

The Hitchhiker’s Guide to Laravel Setup | DevjavuThe Hitchhiker’s Guide to Laravel Setup | Devjavu

A step by step guide to setting up Laravel on your machine.

devjavu.space

This is specifically for macOS users who:

Have Laravel installed.
Would like to run and manage Laravel applications on a single domain (e.g., mylaravelapp.awesome, myapp.app).
Would like to run Laravel sites over encrypted TLS (HTTP/2).
Would like to share their local sites with the world.
Just want to tinker.

Understanding How Valet Works

Valet is a PHP development environment for PHP frameworks, including Laravel, WordPress, etc. Valet configures your Mac to always run Nginx Server in the background when your machine starts.

Using dnsmasq, Valet proxies all requests on the *.test (this can be changed to a custom domain) domain to point to sites installed on your local machine. Valet also allows you to share your sites publicly using local tunnels.

Out of the box, Valet support includes, but is not limited to:

Installation

Valet requires macOS and Homebrew. Before installation, you should make sure that no other programs, such as Apache or Nginx, are binding to your local machine’s port 80.

Install Homebrew.

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

Update brew

brew update

Install PHP7.3.

brew install php

Install Composer.
Download the installer to the current directory.

php -r "copy('https://getcomposer.org/installer', 'composer-setup.php');"

Verify the installer SHA-384, which you can also cross-check here.

  php -r "if (hash_file('sha384', 'composer-setup.php') === 'a5c698ffe4b8e849a443b120cd5ba38043260d5c4023dbf93e1558871f1f07f58274fc6f4c93bcfd858c6bd0775cd8d1') { echo 'Installer verified'; } else { echo 'Installer corrupt'; unlink('composer-setup.php'); } echo PHP_EOL;"

Run the installer.

php composer-setup.php

Remove the installer.

php -r "unlink('composer-setup.php');"

Install Valet with Composer.

composer global require laravel/valet

To have the Valet command available globally on your system, make sure you have the ~/.composer/vendor/bin directory in your system’s “PATH”.

You can also see how to add the bin folder to your path here.

Configure and install Valet and Dnsmasq to always run when you start your machine:

valet install

Once Valet is installed, try pinging any *.test domain on your terminal using a command such as ping foobar.test. If Valet is installed correctly, you should see this domain responding on 127.0.0.1.

Using a Custom Domain

If you would like to use a different domain other than the default (.test), you can simply tell Valet to use a new domain name:

valet tld new-name

e.g

valet tld app

You should see an output on your terminal verifying that your new domain has been updated:

Restarting dnsmasq...
Valet is configured to serve for TLD [.app]
Restarting php...
Restarting nginx...
Your Valet TLD has been updated to [app].

Valet will automatically start serving your projects at *.app.

Serving Laravel Sites

Once Valet is installed, you’re ready to start serving sites. First, you’ll need to configure a folder where Valet should search for your sites. Think of this as your htdocs folder (if you ever used Xampp or a similar tool).

Create a folder where you’ll have your Laravel sites:

mkdir ~/Laravel_Sites/

Navigate into that directory:

cd ~/Laravel_Sites/

Now run:

valet park

The park command will register your current directory as a path that Valet should search for your sites.

You can proceed to create a new Laravel application in the same folder.

laravel new sleek_site

Your new site should now be accessible at http://sleek_site.app.

Securing Local Sites With TLS

You can serve your Laravel sites locally over HTTPS, thanks to Valet. Simply change into your site directory (~/Laravel_Sites) and run:

valet secure site_name # e.g valet secure sleek_site

You should now be able to access your Laravel application at https://sleek_site.app.

Sharing Local Sites

Valet comes coupled with ngrok for sharing your local sites on a public URL. No additional software installation is required. To share your local site, navigate into your project directory and run

cd sleek_site

valet serve

You should see a server running in your terminal.

You can publicly access your Laravel site by opening the URL http://5e44d238.ngrok.io/ in your browser or from a secure source via http://5e44d238.ngrok.io/.

At this point, you’ve successfully set up Valet to serve Laravel applications locally.

Cheers ☕️

A Beginner's Guide To Web Deployment

Martins Onuoha — Sat, 25 Nov 2023 21:06:24 +0000

So you’re done building that great application and want the world to see it? Great, you’ve come to the right place.

The primary reason for deploying applications, whether frontend or backend, is to make them usable outside your computer. Thankfully, the web is littered with platforms that allow you to deploy your applications with little or no effort and for free. In this article, I’ll try to exhaust the options for deploying frontend and backend web applications.

Frontend Deployment

With Frontend, all you deploy to the cloud are static files and assets. This means that whatever frontend framework you choose to build with (React, Vue, Angular, Flutter), in the end, plain old HTML, CSS, and Javascript files and assets are what your users/visitors get.

Let’s see the options you have for deploying your front-end applications.

Render

I have written a guide to get you started deploying your front-end applications to Render. In their words, Render is a unified platform to build and run all your apps and websites with free SSL, a global CDN, and private networks, and auto deploys from Git. With Render, you can deploy static sites, web servers, or an entire docker container.

Auto-Deploy React Apps With Render | DevjavuAuto-Deploy React Apps With Render | Devjavu

Learn how to deploy React applications to render with Github

devjavu.space

Vercel

Vercel is primarily Frontend focused, as it comes baked with quick deployment templates for most javascript frontend frameworks, including React, Vue, and Angular; it also caters to static site generators. Here’s a guide to get you started:

Deploying React & Vue Applications With Vercel | DevjavuDeploying React & Vue Applications With Vercel | Devjavu

How to host Frontend Javascript Applications with Vercel

devjavu.space

Heroku

Heroku is famous for deploying most types of applications. You could also quickly deploy your JavaScript frontend applications to Heroku. Here’s another quick guide:

Auto-Deploy React & Vue Apps with Heroku | DevjavuAuto-Deploy React & Vue Apps with Heroku | Devjavu

Learn how to deploy javascript frontend...

devjavu.space

Surge

Surge is another free alternative with one of the most convenient deployment flows. It allows you to deploy your Frontend static files in a single CLI command.


$ surge
    Running as youremail@gmail.com (Student)
        project: /Users/onuoha/devjavu

To start deploying with Surge, you must install the Surge CLI tool. Assuming you already have node/NPM setup on your machine, you can install the CLI tool globally:


npm install --global surge

This should provide you with the surge command globally available in your terminal. To authenticate the Surge CLI., you can now run surge login.


surge login

From here, you can deploy any Frontend application in a single command. Here’s how I’d usually use it. You can add a deploy script to your package.json file if you have a Vue or React application.

Vue (Nuxt) package.json Example:


{
  ...
  "scripts": {
    "build": "nuxt build",
    "deploy": "yarn build && cd dist && mv index.html 200.html && surge ."
  }
}

The above is a sample deploy script for a Vue/Nuxt application. First, we run the build command, which generates a dist folder. When prompted, we navigate into the folder, run the surge command, and specify the application domain.

Other relatively free alternatives for deploying your frontend applications include:

Backend Deployment

With backend deployments, unlike Frontend deployments, we do not deploy static files to the cloud. Instead, we deploy server-side scripts; some listed frontend deployment services may not work for server-side code. Let’s see the options we have.

Heroku (BE)

Most beloved by every developer, Heroku is a go-to option for everything web deployment, Frontend and backend. Unfortunately, Heroku does not include any free tier at the time of writing.

If you build backend applications in any of these languages, then Heroku allows you seamlessly deploy them. Head over to the documentation and select the language of your choice.

Digital Ocean

Digital Ocean offers you an excellent free tier for around 60 days plus free credits; after that, you must pay per use. A simple Droplet at 4 USD / month might work fine if you build small applications.

Budget-Friendly Cloud Server Pricing | DigitalOcean

Need a powerful cloud server without the hefty price tag? DigitalOcean has got you covered. Enjoy exceptional performance and flexibility at unbeatable prices.

digitalocean.com

Forge

For seamless deployment of Laravel applications, Forge is a good option. They also offer a decent free tier you can kick start with.

Forge · Simple server management for PHP and beyond

Instant VPS, zero-downtime deployments, automated SSL, and a modern UI. Forge gives you full control without DevOps complexity.

forge.laravel.com

AWS

Amazon Web Services provides EC2 instances to host/deploy your web applications. AWS might require some basic DevOps knowledge compared to the others; the interface isn’t the most budding developer-friendly.

Cloud Computing Services - Amazon Web Services (AWS)

Amazon Web Services offers reliable, scalable, and inexpensive cloud computing services. Free to join, pay only for what you use.

aws.amazon.com

Google Cloud

Google Cloud Platform (GCP) provides several services, including App Engine, which allows you to deploy backend applications like Nodejs. Google also provides decent freemium for these services. Here’s an official guide to deploying a Node app.

App Engine Application Platform | Google Cloud

Google App Engine lets app developers build scalable web and mobile back ends in any programming language on a fully managed serverless platform.

cloud.google.com

Serverless

If you didn’t already know, Serverless computing allows you to build and run applications and services without thinking about servers. Serverless applications don’t require a virtual server to run them.

You can deploy simple functions and use them as APIs without a complete server-side setup. If these are the kind of applications you intend to build, then here’s a list of possible hosting services to use:

With the above options, you can host your functions at a freemium or paid rate.

In conclusion, what you decide to choose is dependent on the kind of web application you’re developing, be it large, small, frontend or backend. As well as your budget for your application.

Cheers ☕️

Build & Deploy a Site with Hugo & Firebase

Martins Onuoha — Tue, 24 Oct 2023 13:31:56 +0000

It’s not uncommon to find content creators who choose to have their content on personal blogs/websites. Usually, a go-to solution would be to use a CMS (Content Management System) like WordPress or Wix.

However, building a web application with any of these technologies is restrictive due to their monolithic design (tight coupling between client and server). It’s harder to manage and scale these kinds of applications. Some of the likely drawbacks of these CMS applications include:

Tight coupling between components (making it harder to test components individually).
Large and complicated codebase: Making it hard for collaboration.
Less reusability.
It does not follow the SRP (Single Responsibility Principle).

Jamstack to the rescue

With the rise of Jamstack, building web applications that are fast, lighter, decoupled, and easily maintainable is just a couple of tools away. If you’re wondering what Jamstack is all about, I’ve written a practical guide here to get you started:

A Practical Introduction to Jamstack | DevjavuA Practical Introduction to Jamstack | Devjavu

Building a funny application with Jamstack.

devjavu.space

With Jamstack, we can use Static Site Generators like Hugo to generate and deploy a site on a CDN like Firebase Hosting Service or Netlify.

What you’ll need

Firebase CLI
Hugo CLI
A Firebase account
Basic knowledge of CLI ( Command Prompt or Terminal )

Hugo

Hugo is a popular open-source static site generator that helps us quickly scaffold simple websites.

Installation (Mac)

To get Hugo installed on your Mac Operating System, you must ensure you have Homebrew installed. Homebrew is a package manager for macOS and Linux.

If you do not already have Homebrew installed, you can install it on macOS with a single command. Open up your terminal and paste this:

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"

Once the installation is complete, you should be able to access the brew CLI. Verify that you have Homebrew installed by typing: brew

That’s about all you need to install Hugo on your macOS.

Installation (Windows)

The Binary installation is perhaps the easiest way to install Hugo CLI on your system. You can download the appropriate version for your platform from Hugo Releases. Once downloaded, you need to unzip and install it. The binary can be run from anywhere, so you won’t need to install it in a global location.

Chocolatey

Chocolatey is the package manager for Windows operating systems, the same way you have Homebrew for macOS. You can find the installation guide here:

Chocolatey Software | Installing Chocolatey

Chocolatey is software management automation for Windows that wraps installers, executables, zips, and scripts into compiled packages. Chocolatey integrates w/SCCM, Puppet, Chef, etc. Chocolatey is trusted by businesses to manage software deployments.

chocolatey.org

Once installed, you can simply install Hugo with this command:

choco install hugo -confirm

Installation (Linux)

You can also use the binary installation to get Hugo on your Linux machine. Alternatively, you can install Hugo with Snap.

First, you need to install the Snap CLI tool.

sudo apt update

sudo apt install snapd

snap install hugo

Great! Now, you should have Hugo installed on your system. Next, we need to create a Firebase account (if you don’t already have one).

Firebase

Head over here and create an account. Once you’re logged in, you'll need to create a new Firebase project.

Give your project a name like so:

We do not need to enable Google Analytics for this project, so you can comfortably turn that off:

Grab a coffee while your project is being generated. ☕️

Your project should be ready now. Click “Continue” to proceed to your Firebase dashboard.

Firebase offers a handful of services that help you build and deploy mobile and web applications easily. One such service is the Firebase hosting service. This is the service we will be using.

Firebase CLI

Now that you have your Firebase account set up and have successfully created a Firebase project, we can proceed to install the Firebase CLI. This command-line interface allows us to perform certain Firebase actions from our machine via the terminal.

Windows: Download the latest binary for Firebase tools here
macOS / Linux: For macOS or Linux users, you can run the auto-install script. The script will automatically detect your operating system and install the latest Firebase CLI release.

curl -sL https://firebase.tools | bash

Via NPM

It is also possible to install Firebase CLI via NPM (Node Package Manager) if you already have Node installed.

npm install -g firebase-tools

Once the installation is successful, you should have the Firebase command available from your terminal.

Generate Hugo Site

Next, we need to generate our site with Hugo CLI. Open up your terminal/command prompt and type:

hugo new site site_name

You can decide to give your site whatever name you wish. A new folder will be created with the name you specified.

Hugo CLI scaffolds a project directory structure with empty subfolders; let’s take a closer look at the generated folder structure.

I’ll open up the application in VSCode. From the terminal, you can type:

code .

The folders above should be empty when generated. Let’s break down what each folder serves.

Most of the information about folder structure can be found here.

Archetypes: In Hugo, front matters are metadata that holds tiny information about our site content (date, title, draft). Archetypes contain custom preconfigured front matters.
Content: All content for your website lives inside this directory. Each top-level folder in Hugo is considered a content section. For example, if your site has three main sections — blog, articles and tutorials—you will have three directories at content/blog, content/articles and content/tutorials.
Data: This directory is used to hold configuration files used by Hugo when generating your website. You can write configurations in JSON, YAML, or TOML.
Layout: This folder is used to store templates in the form of “.html” files that specify how views of your content will be rendered into a static website.
Static: Stores all the static content: images, CSS, JavaScript, etc.

Now that we have a basic understanding of the folders that were generated, we can move on.
The Hugo CLI only generates a skeletal structure for you. It is void of theming and content (all the folders are empty). We, however, have a whirlpool of community themes we can install. Hugo themes can be installed as git submodules.

Hugo ThemesHugo Themes | Hugo Themes

The world’s fastest framework for building websites

themes.gohugo.io

To install a Hugo theme from your terminal within your Hugo root project directory, type:

git init$ git submodule github_url

I’m going to install the Ananke theme:

First, we initialize our project folder as a git repository, then install the theme as a submodule.

git init

git submodule add https://github.com/budparr/gohugo-theme-ananke.git themes/ananke

The Ananke theme would be cloned into the directory we specified (/themes/ananke/). Let’s take a look at what the theme directory contains.

There are two ways to get started using this theme:

Using the example content provided by the theme
Creating your content

Using the example content

In this case, from the theme directory structure, what we are interested in is the “exampleSite” subdirectory. It would serve as a template to get started quickly with some dummy content. Firstly, what you need to do is copy the content of the “exampleSite” directory into your root directory. You can either do this manually (CTRL + A & CTRL + C & CTRL + V 👴🏼)

or from the terminal:

cp -R ./themes/ananke/exampleSite/* ./

This would add some folders and files (about, post, _index.md) in your “content” folder in your root directory.

This copy would also replace your “config.toml” file. PS: This is a very crucial configuration file.

You need to edit the config.toml file to specify the correct theme name and theme directory so the Hugo CLI knows what and where to look.

theme = "ananke"themesDir = "./themes"

Once that’s done, you can save and start the Hugo server:

hugo server

You can navigate localhost:1313 to view your site.

The Hugo has support for live-reload, so you don’t need to reload pages when you make a change.

Let’s try changing the header text. Open “_index.md”; you should see the title front matter value:

Try changing it to “My Hugo Test Site” and check the site in your browser.

You can keep making changes and creating new pages/posts from here. You can check out the documentation to learn more about Hugo CLI.

Creating your content

You don’t need to copy the content of the example site directory in this case. Open the “config.toml” file in your project root directory, set the “theme” value to Ananke, and also set the theme directory.

theme = "ananke"
themesDir = "./themes"

Your configuration file should look something like this:

Once that’s done, you can create your first post/page using the Hugo CLI.

hugo new index.md

This command generates a new file called “index.MD” (markdown extension) in your contents directory. You can open this file and add some text.

Notice the front matter at the top (title, date, draft)

Save this file and spin up the Hugo server again.

hugo server -D

Notice here we have a -D flag as opposed to the first time we started the server. This flag enables drafts.

Draft? What does that mean?

When you have a newly generated page/post, it is automatically in drafts and will not be publicly available until you “publish” it ( in this case, set draft to “false”). If, however, you do not wish to publish just yet but would still like to work on the page and see your changes, you can start the Hugo server with the -D flag.

Note: All public pages should have the draft value set to false

Great! Now we have our Hugo site ready. Next step — deployment.

Deploying to Firebase

We need to first generate the static files for our site using the hugo command in the root directory.

This generates the static files for your website and copies them into the public/ directory by default, although you can customize the output directory in your site configuration by changing the publishDir field (we won’t be doing that). From your terminal, type:

hugo

Once your static files have been generated, initialize Firebase from your root directory:

firebase init

You’ll be presented with options to choose from. These options are Firebase services; we’ll only be selecting the hosting service. Once you have the arrow on a service, press the spacebar to select it.

Next, we need to associate the project directory with a Firebase project (remember the project we created earlier from the Firebase web console? Yeah, that one). Choose “Use an existing project”:

You would be presented with a list of existing projects on Firebase. Navigate to the new project we created and select it.

Next, you’ll need to set your public directory (This is the directory from which Firebase would publish our site). Since we already know that Hugo CLI generates static files to the public directory, we can simply press the enter key (as Firebase uses “public” by default).

When asked whether to configure it as a single-page app, Choose No by typing N. If you’re asked whether to overwrite files in the public folder, just choose Yes for now.

Your Firebase setup should now be complete.

Next, we’ll regenerate our static files with Hugo CLI and then deploy with Firebase CLI. Type hugo from your terminal, then type firebase deploy.

hugo

firebase deploy

Your deployment should be successful at this point. Firebase generates a Hosting URL for your site as well. You can copy the URL and open it in the browser to view your site.

You can equally access the site from a firebaseapp.com subdomain.

Custom Domain (Extra)

If you want to go a step further and use a custom domain name for your site, the Firebase console has a section to add a custom domain. From the Firebase console, select Hosting:

Next, click on “Add Custom Domain” and go through the process of setting it up and verifying ownership.

Well, it’s been a long ride. Cheers if you made it this far.

You can find all the project files here:

MartinsOnuoha / hugo-firebase

An Example site built with Hugo and deployed on Firebase.

Cheers ☕️

How to Upload Base64 Images in Vue & NodeJS

Martins Onuoha — Fri, 22 Sep 2023 19:18:40 +0000

Previously, I had written on uploading multiple images from a Vue Application to a Laravel Backend. In that solution, we made use of Javascript’s FormData Object. Here’s that article if you missed it:

Build a Simple Blog + Multiple Image Upload with Laravel & Vue | DevjavuBuild a Simple Blog + Multiple Image Upload with Laravel & Vue | Devjavu

Building a full-stack application with Laravel & Vue

devjavu.space

In this solution, however, we would use Javascript’s FileReader API, which allows us to read the content of image files and handle those files in base64 format. Regardless of the backend language being used, base64 encoded images can be decoded on the server and stored locally in the filesystem (or on cloud storage).

Here’s some illustration to better understand the process of uploading a Base64 image. While interfacing with your web application, the user can select an image (using the input tag, with a type of file) from their device; the content of the selected image is read using the FileReader API, and we send the base64 string in Data URL format to a backend API.

On the backend, the base64 string is decoded from the string format to its original file object, and we can then store the decoded file and return the storage path/URL to the frontend.

Down to the Base-ics

What on earth is Base64?

Base64 or Radix 64 is a binary-to-text encoding system that is designed to allow binary data to be represented in ASCII string format. One common application of base64 encoding on the web is to encode binary data so it can be included in a data: URL.

Data: URL?

Data URLs are URLs that are prefixed with “data:”. They allow embedding of file content inline in documents (.html). Data URLs are composed of 3 major parts after the “data:” prefix:

data:[<mediatype>][;base64],<data>

The [<mediatype>] part refers to the file format, and it could contain any one of the following values:

text/plain — for text files

image/jpeg or image/jpeg — for .png and .jpeg image files

application/pdf — for .pdf files etc.

The [<base64>] part is optional and can be ignored if the data is non-textual. The last part is the textual (or non-textual) file content. Technically, this is the format in which we would send out images.

FileReader API

What’s this?

The FileReader object lets web applications asynchronously read the contents of files (or raw data buffers) stored on the user’s computer, using File or Blob objects to specify the file or data to read. — MDN

When a user selects a file using the input tag, a “change” event is triggered; this event object contains a FileList object that lets you access the list of files selected with the <input type="file"> element.

The FileReader API has 4 methods for reading file contents:

The method we’re concerned with is the readAsDataURL method, as it allows us to read the content of a Blob file and return an object with a result property containing a data: URL representing the file’s data.

Getting Started

First, be sure you have all the Vuejs requirements installed. We will be using the Vue CLI to serve our application; however, we won’t be scaffolding an entire Vue application with the CLI. Thanks to Vue CLI’s instant prototyping, we can serve a single Vue file.

Let’s set up our project directory.

instant prototyping](https://cli.vuejs.org/guide/prototyping.html), we can serve a single Vue file.

Let’s set up our project directory.

mkdir vue-base64 vue-base64/assets vue-base64/assets/styles

touch vue-base64/Index.vue && touch vue-base64/assets/styles/main.css

Our project directory would look something like this:

.
|--vue-base64
  |-- Index.vue
  |-- assets
    |-- styles
        |--main.css

We’ll write a basic structure for our image and input elements in our template section.

Template

<template>
  <div>
    <div class="container mt-10">
      <div class="card bg-white">
        <img :src="image" alt="card_image">
        <input @change="handleImage" class="custom-input" type="file" accept="image/*">
      </div>
    </div>
  </div>
</template>

Here, we create a card to house our image and input button. On the input tag, we’re listening for a change event and calling a “handleImage” method every time that event is fired. We’re also binding the image “src” attribute to a reactive property “image” (We’ll add this property to our data object under the script section), so the image is updated every time a new one is selected.

We’ll add a bit of styling in our CSS file (main.css).

CSS

* {
  font-family: Arial, Helvetica, sans-serif;
}
body {
  background: #d8dddb;
}
.container  {
  display: flex;
  justify-content: center;
}
.mt-10 {
  margin-top: 10rem;
}
.bg-white {
  background: #fff;
}
.card {
  height: 10rem;
  width: 20rem;
  border-radius: 10px;
  padding: 20px;
  text-align: center;
}
img {
  width: 17rem;
}

Import the CSS file main.css into Index.vue like so;

<style>
  @import './assets/style/main.css';
</style>

Script

<script>
import axios from 'axios';

export default {
  name: 'home',
  data() {
    return {
      image: '',
      remoteUrl: ''
    }
  },
  methods: {
    handleImage(e) {
      const selectedImage = e.target.files[0]; // get first file
      this.createBase64Image(selectedImage);
    },
    createBase64Image(fileObject) {
      const reader = new FileReader();

      reader.onload = (e) => {
        this.image = e.target.result;
        this.uploadImage();
      };
      reader.readAsDataURL(fileObject);
    },
    uploadImage() {
      const { image } = this;
      axios.post('http://127.0.0.1:8081/upload', { image })
        .then((response) => {
          this.remoteUrl = response.data.url;
        })
        .catch((err) => {
          return new Error(err.message);
        })
    }
  },
}
</script>

In the script section, the first thing we need to do is declare the reactive property (image) in our data object. We’ll then declare the handleImage method to respond to the on-change event triggered by the input tag; we grab the first Blob from the FileList object and assign it to a variable.

If you inspect the result generated using the Vue DevTool, you’ll notice the file is now in the Data URL format.

Note: The <img> tag element’s src attribute can contain the URL-address or the data URL of an image.

Backend (Node.js)

This implementation isn’t limited to just Node.js or Javascript. Using the right library or built-in APIs, you can convert the base64 string to an image file and store it in your application’s filesystem with basically any backend language of choice.

Since Vue.js uses the Nodejs runtime in the background, we can have our server-side in the same project directory so both applications can share libraries. Let’s make a bit of adjustment to the project folder. From the root directory, we’ll do a basic setup for a Node.js Express server.

npm init -y && mkdir server server/public && touch server/app.js

Our project directory should now look something like this:

    |-- Index.vue
    |-- assets
        |-- styles/main.css
    |-- server
        |-- public
        |-- app.js
    `-- package.json

We’ll install all the necessary packages. Here’s what we need:

Express Nodejs web framework
Body-parser: to parse incoming request bodies.
Axios: to send HTTP requests from our Vue application
Cors: so we can send requests between the same origin
Base64-img: to Convert images to base64, or convert base64 to images

npm i base64-img axios cors express body-parser

Once installed, open up app.js, set up the express server, and create the route to handle image upload, decoding, and storage.

const express = require('express');
const app = express();
const base64Img = require('base64-img');
const bodyParser = require('body-parser');
const cors = require('cors')
const port = 8081;

app.use(cors())
app.use(express.static('./server/public'))
app.use(bodyParser.json({ limit: '50mb' }));

app.post('/upload', (req, res) => {
  const { image } = req.body;
  base64Img.img(image, './server/public', Date.now(), function(err, filepath) {
    const pathArr = filepath.split('/')
    const fileName = pathArr[pathArr.length - 1];

    res.status(200).json({
      success: true,
      url: `http://127.0.0.1:${port}/${fileName}`
    })
  });
});

app.listen(port, () => {
  console.info(`listening on port ${port}`);
})

Here, we’re telling our express server to use cors, JSON body-parser (it’s important to set the limit, as base64 images can be really large). We’re also setting the ./server/public folder as our static folder (we’ll store our decoded images here).

Next, we’re setting up the server to respond to a POST request on the “/upload” endpoint by getting the image string from the request body, passing the image string into the base64Img.img(…) function (this function takes 4 arguments; base64 string, the path to store the image, filename, and a callback function that returns the file path. Finally, we grab the file name from the path and return the URL to the user.

Note: we’re using the Date.now() function as the file name just to maintain a level of uniqueness. Since the function returns the number of milliseconds elapsed since January 1, 1970, it’s almost impossible to get the same value everytime the function is called.

Let’s make some changes to our Vue application.

...
data() {
  return {
    image: '',
    remoteUrl: ''
  }
},
...

Add a new property, remoteUrl, to the data object, this will hold the value of the URL returned by our server. Next, we need to import Axios and create a method to handle our post request to the server.

uploadImage() {
  const { image } = this;
  axios.post('http://127.0.0.1:8081/upload', { image })
    .then((response) => {
      this.remoteUrl = response.data.url;
    })
    .catch((err) => {
      return new Error(err.message);
    })
}

We’ll call this method within our `reader.onload(…)` event.

...
reader.onload = (e) => {
    this.image = e.target.result;
    this.uploadImage();
};
...

Finally, Let’s render the image URL returned by the server just to be sure we got the right file from the server. Add this below the .container div in your template section:

  <div class="mt-10" style="text-align: center">
      <h3>SERVER IMAGE</h3>
      <img :src="remoteUrl" alt="">
  </div>

Your Index.vue file should look something like this:

<template>
  <div>
    <div class="container mt-10">
      <div class="card bg-white">
        <img style="" :src="image" alt="">
        <input @change="handleImage" class="custom-input" type="file" accept="image/*">
      </div>
    </div>
    <div class="mt-10" style="text-align: center">
      <h3>SERVER IMAGE</h3>
      <img :src="remoteUrl" alt="">
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  name: 'home',
  data() {
    return {
      image: '',
      remoteUrl: ''
    }
  },
  methods: {
    handleImage(e) {
      const selectedImage = e.target.files[0]; // get first file
      this.createBase64Image(selectedImage);
    },
    createBase64Image(fileObject) {
      const reader = new FileReader();

      reader.onload = (e) => {
        this.image = e.target.result;
        this.uploadImage();
      };
      reader.readAsDataURL(fileObject);
    },
    uploadImage() {
      const { image } = this;
      axios.post('http://127.0.0.1:8081/upload', { image })
        .then((response) => {
          this.remoteUrl = response.data.url;
        })
        .catch((err) => {
          return new Error(err.message);
        })
    }
  },
}
</script>
<style>
  @import './assets/style/main.css';
</style>

Piecing it all together

In our package.json, we’ll add two scripts, one to start our Vue application and the other to start our express server.

{
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "ui": "vue serve Index.vue",
    "server": "node ./server/app.js"
  },
}

From here, you can open up two tabs on your terminal and run both scripts.

npm run ui

npm run server

You should have your server running on port 8081 and your Vue application on port 8080. Navigate to your Vue app and test.

As mentioned previously, you can implement base64 image decode in any preferred language. Feel free to experiment with the source code here:

MartinsOnuoha / vue-base64

Handling base64 Images in Vue

Vue Base64

An Example of handling base64 images in vue.js and Express Server. You can find a detailed walk through here

Directory Structure

.
|-- Index.vue
|-- assets
|-- package-lock.json
|-- package.json
|-- readme.md
`-- server
   |-- app.js
   |-- public

References

NPM Packages

How it works

DEMO

View on GitHub

Cheers ☕️

Auto-Deploy React & Vue Apps with Heroku

Martins Onuoha — Sun, 06 Aug 2023 15:23:17 +0000

This article assumes you have basic knowledge of React or Vue.js. All the procedures here work for both React and Vue.js applications.

Deploying Frontend Javascript applications with Heroku is a breeze, to say the least. This is mostly because Heroku takes away all of the hassles involved in the setup and just lets you deploy. Of course, this is different when you need to deploy backend applications, as you’d be required to provision a database where applicable and include the credentials in environment variables. Thankfully, we don’t have to worry about any of those when deploying frontend applications…oh, unless you’re using environment variables within your frontend app, you’d need to set them on Heroku as well.

Getting Started

Requirements:

Node.js set up
Heroku Account
Github Account

I’ll assume you already have a React or Vue project you want to deploy. For this example, I’ll use a React project I’d previously created. First, make sure you have a Github account. You’d need to make a commit and push your code to Github:

git add . && git commit "initial commit" && git push origin master

Next, create an account on Heroku if you don’t already have one, and add a new app:

You’ll be required to put in a name and select a region. You can give the app whatever name you want. Feel free to leave the region like that or select a region close to your primary users.

Once you have all the requirements set, click “Create app”. This should create your application and show you the deploy tab, where you can choose how you want to deploy your application.

At this point, Heroku doesn’t know the kind of application you intend to deploy, but it is smart enough to figure it out once we select a repository. Under the “Deployment Method” section, you have “Heroku Git” selected by default. Change this to “Github”. You’d need to search for the repository you pushed your code to:

Once Heroku finds it, click “Connect”. Heroku would link this repository to the Heroku app. In the next section, you’ll be prompted to set up automatic deploys from Github.

As stated, every push you make to the specified branch will trigger a new build and deployment. We’ll leave the selected branch as “master” (Change it if you want something else). Then click the “Enable Automatic Deploys” button.

Finally, you trigger a manual deployment in the next section:

Click on “Deploy Branch”, and Heroku should handle the rest from there. Once the deployment is complete, you should see a “view” button at the bottom; click this button to view your application.

You should see your application on a unique URL.

Now every time you push a new change to your master branch, Heroku listens for updates on that branch and will automatically rebuild your application to serve the latest build.

You can test this out by updating the App.js file and pushing that update to the master branch on Github. In your Heroku dashboard, you should now see a new build is in progress.

Once that’s done, you should see the updates you made on your site.

Hopefully, this has helped someone.

Cheers ☕️

Deploying React & Vue Applications With Vercel

Martins Onuoha — Sun, 16 Jul 2023 19:21:23 +0000

This article assumes you have basic knowledge of React or Vue.

Formerly Zeit, Vercel is another leading platform for deploying web applications easily. It’s no different from the likes of Heroku & Render except that Vercel is highly optimized for Javascript Frontend applications, particularly Jamstack apps.

Getting Started

Requirements:

Nodejs setup
Github account
Vercel Account

We’ll run through each process in steps.

Step 1

Push your React or Vue Project to Github.

git add . && git commit -m "initial commit" && git push origin master

Step 2

Create an account and log in to Vercel using any of the below options.

Step 3

You should be able to see your Vercel dashboard right after. From the dashboard, click on “New Project”.

Step 4

From there, you should see a list of Github repositories you can import from. Notice how Vercel automatically detects the project type. I’ll choose the first “myapp” repository, which is a react project, by clicking the “Import” button right beside it.

Step 5

Next, you’ll be asked to select a Vercel scope. Feel free to select your personal account.

Step 6

Here you’ll need to give a bit more details about your project. The Project name field takes any name of your choice for this project. Framework Preset is automatically set by Vercel when you import a repository; you can leave this as is.

The Build and Output Settings sections describe the command Vercel should run to generate a production build of your application. Vercel would most likely pick this value up from your “package.json” file and auto-fill it specifically for the project type (Vue or React). You can, however, change it if you want by toggling the “Override” option.

The Output Directory is where your optimized static files will be, and this is the folder that will eventually be deployed to Vercel. For Vue projects, this folder might be called “dist”.

Once these details are complete, click the “Deploy” button. You should be able to see a log showing the build & deployment process.

After a couple of seconds, your site should now be ready.

Click the “Visit” button to see it.

myapp-theta.vercel.app

From here on, whenever you make an update to the site, push the changes to the master branch, and Vercel automatically starts a new build to update your site with those changes.

On your dashboard, you’ll see an upcoming build. Once it’s completed, your changes will be up in no time.

All of these steps work the same way for Vue applications and a majority of the other javascript apps supported by Vercel.

Cheers ☕️

Using Web Workers In Vue Applications

Martins Onuoha — Sat, 15 Jul 2023 16:13:04 +0000

This post assumes you have basic knowledge of Javascript and Vue.

Single-Threaded JavaScript

As a single-threaded programming language, Javascript can only perform a single set of instructions at a time. This means that every other process has to wait for one instruction to complete before the next process is executed.

This would pose a speed problem in our web application if we had to carry out heavy processes and also want the user to be still able to interact with our application. Say we needed to calculate the return on investment of multiple investment packages and still ensure these processes are non-blocking and do not run on the main thread, so we can perform other tasks on the main thread, like making a network request…Enters web workers.

Note: blocking refers to serial processing — Doing one thing at a time. Non-blocking on the other hand code (asynchronous) can run in parallel (or multithreaded)

Web workers allow us to run processes in the background thread and notify the main thread when those processes are complete. This adds a great performance boost as we do not need to chunk up everything on the main thread.

Web workers

Web Workers are a simple means for web content to run scripts in background threads. The worker thread can perform tasks without interfering with the user interface. Once created, a worker can send messages to the JavaScript code that created it by posting messages to an event handler specified by that code (and vice versa). — MDN

Web workers in Javascript

The main thread creates the worker using the “Worker” constructor. This constructor takes the path to the worker file in a single argument. The worker file contains the code that will run in the worker thread; workers run in another global context that is different from the current window.

Data is passed between the worker and the main thread via messages — the main thread and worker thread send messages using the postMessage() method, and respond to messages sent using the onmessage handler.

Here’s a simple example of implementing web workers in Javascript.

MartinsOnuoha / js-webworker-example

A Simple example of using webworkers in Javascript

Webworker Example in JS

A simple illustration on how to use webworkers in javascript.

You can view the example application here

View on GitHub

Using Web workers in Vue

To use web workers in a Vue application, we can either use a web worker wrapper for vue like the vue-worker package or implement it low-level (build from the ground up). I’ll keep it simple and build this example without the vue-worker package so we understand what happens under the hood.

Let’s set up our vue application.

To keep it simple, I’ll use the Vue CDN in a plain HTML page instead of using the vue-cli to generate a project. Let’s set up our application folder. Our folder structure would look something like this:

Application

We’ll implement the same Javascript example in Vue (a countdown timer). Since the countdown timer is a long-running process, we’ll delegate it to our web worker and trigger a method on our main thread to fetch a random dog image from this API when our counter value is divisible by 10. The result looks something like this:

silent-wish.surge.sh

Markup

In our index.html file, we’ll structure our markup, including the vue-next CDN link, our main script file, and the mount point for vue.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue-Webworker</title>
  <link rel="stylesheet" href="./styles/app.css">
</head>
<body>
  <div id="app">
    <div class="dog-image">
      <img :src="dogImage" v-if="dogImage" />
    </div>

    <p v-if="counter">{{ counter }}</p>
  </div>

  <script src="https://unpkg.com/vue@next"></script>
  <script src="./script/app.js"></script>
</body>
</html>

We’ve imported our CSS file at the top and our scripts at the bottom. We’re also displaying a counter property from our data object when it’s available. We also render the “dogImage” value with the image tag when available.

Next, we’ll set up our vue app in our app.js entry file.

Because this example application depends heavily on the web workers, we need first to check that the browser supports Workers then we instantiate a new Worker class.

if (window.Worker) {
  const worker = new Worker('/script/worker.js')
  worker.postMessage('')

  ...
}

Next, we set up our App object.

const App = {
  ...
}

We’ll have two data properties:

const App = {
  data() {
    return {
      dogImage: null,
      counter: 0,
    }
  }
}

In our methods object, we’ll create a single method to fetch random dog images from the dog API.

  ...

  methods: {
    getDogImage () {
      fetch('https://dog.ceo/api/breeds/image/random')
        .then((response) => response.json())
        .then((data) => {
          this.dogImage = data.message
        })
      }
  }

  ...

Finally, in the mounted hook, we’ll call the getDogImage method the first time, then set up an onmessage listener on our worker object to listen to updates from the worker thread. We check if the counter value sent by the worker is divisible by 10; if it is, we call the getDogImage method again.

  ...
  mounted () {
    this.getDogImage()
      worker.onmessage = (e) => {
        this.counter = e.data
        if (this.counter % 10 === 0) {
          this.getDogImage()
        }
      }
    },
  ...

We then mount the App object on the #app element.

  Vue.createApp(App).mount('#app')

The entire app.js file should look something like this:

if (window.Worker) {
  const worker = new Worker('/script/worker.js')
  worker.postMessage('')


  const App = {
    data () {
      return {
        dogImage: null,
        counter: 0
      }
    },
    mounted () {
      this.getDogImage()

      worker.onmessage = (e) => {
        this.counter = e.data
        if (this.counter % 10 === 0) {
          this.getDogImage()
        }
      }
    },
    methods: {
      getDogImage () {
        fetch('https://dog.ceo/api/breeds/image/random')
          .then((response) => response.json())
          .then((data) => {
            this.dogImage = data.message
          })
      },
      showUpdate(e) {
        console.log(e)
      }
    }
  }

  Vue.createApp(App).mount('#app')
}

In our worker.js file, we’ll set up the counter logic to count up to 1000 before resetting. We use the postMessage method to send the new counter value to the main thread, which will be received by the onmessage listener.

onmessage = (e) => {
  let counter = 0
  setInterval(() => {
    counter++

    if (counter === 1000) {
      counter = 0
    }
    postMessage(counter)
  }, 1000)
}

For a little bit of aesthetic, we’ll add some styling. Add this within the app.css file.

body {
  background-color: #8EC5FC;
  background-image: linear-gradient(62deg, #8EC5FC 0%, #E0C3FC 100%);
}
#app {
  text-align: center;
  display: flex;
  flex-direction: column;
}
p {
  font-size: 5rem;
  color: #FFF;
}
.dog-image {
  width: 100%;
  height: 300px;
  max-height: 300px;
  margin: 0 auto;
}
img {
  object-fit: contain;
  border-radius: 10px;
}

You can start the application with LiveServer on VScode.

You should find the application running on port 5500.

Check out the source code of the example app used.

MartinsOnuoha / vue-webworker-example

A simple illustration of Web Workers in Vue.

Vue web Worker Example

View on GitHub

Cheers ☕️