DEV Community: Emeka

Bundling Code-Bases with Large File Structures

Emeka — Sun, 14 Jul 2024 12:21:24 +0000

Vite, Spotify and the Power of Genius.

Life is about Suffering

And building web applications helps you understand a bit of what suffering is like. It is not supposed to be fun, or fast, or awesome, but you most certainly have to get the job done with whichever tools you choose.

As a technologist, you are blessed with an array of tools that are needed to help you achieve your goals and whichever tool you choose has the potential to facilitate or completely destroy your chances of having a successful application, and given the fact that technology tools come and go, it’s up to you to update your tech stack every once-in-a new technology.

Or else.

My career as a technologist started with a simple Django application I built at the table in the small room that housed my techno-capital ambitions as a young immigrant. To fuel my love for writing, I built a blog I would use to host my articles and I named the domain (now defunct) after a nickname I had given myself at the time: Django-Guy. Six months later, my frontend enthusiasm had seen me switch from being a Django guy to a Vue menace.

Over a few months I took a rather weird deep dive into the Vue ecosystem and studied past Vue versions from Vue1 to Vue3. Then I went into NuxtJS and almost broke my back. After working with a few companies that use VueJS as their primary mode of communicating with their backend servers, all I can say is:

Evan You is a genius.

Only the Paranoid Survive

VueJS has a lot of functionalities absent in more popular frontend frameworks like Svelte and React that make it powerful for building fast and scalable frontend frameworks. But the genius of VueJS and the Vue ecosystem lies not in the fundamentals of its technology, but in the genius of its founder.

Much unlike Mark Zuckerberg’s top-down nature of problem solving that led to the wide-scale adoption of react, Evan You’s entire ideology is built around understanding problems deeply and solving them from the ground up to the customer.

As evident in many of the tools in the VueJS and NuxtJS ecosystem they are designed to follow Evan’s method of solving specific problems, and although they may not all be perfect, they do precisely what they are meant to do and more importantly, they do it better than many other frameworks out there.

But his genius doesn’t stop there.

Webpack and my mental health

Everytime I hear the word webpack, I get instant flashbacks from that one time I had a bug that almost jeopardized months of painstaking work. The same flashbacks I get from hearing the word rest, from the nights and weekends I spent building on the Django Rest framework.

Pardon me, I do not mean to scare you — Webpack is fun. And although I can’t say the same about the Django rest framework, I do wish it was faster.

See, the beautiful thing about Webpack is that you get to see your code in all its glory. From the entry webpack.config.js file, which gives connects your entire application for bundling in both development and production environments, through the entry directory configured by you — the 10x developer.

I dare say that as a creative developer, the pains of webpack are definitely worth it considering the large amount of files that are bundled for the sake of rendering scenes, 2D and 3D elements to be manipulated in the DOM.

But the struggle in this beauty is in its lack of speed.

Bundling away from the past

The technology industry is built on speed. And the faster you are to adopt new technologies (both internally and externally), the better for you and your company. With that in mind, it think it is not too far fetched to say that most new companies underestimate how fast things can change and the need to update their systems. I think the same can be said for Webpack.

Founded by Tobias Koppers, Sean Larkin, Johannes Ewald, Juho Vepsäläinen, Kees Kluskens, and open-source contributors Webpack was initially released on 19 February 2014 and up till now has remained the dominant bundling tool for modern web applications. Outperforming other native bundlers like gulp, grunt and browserify. I still believe it will remain relevant for at least a few more years but its influence has started to dwindle.

From 2018, all native modern web browsers began to support ES6 modules. And like all strategic inflection points, this created an opportunity for a new technology to emerge from the dust.

Getting Started with Vite — /:veet/

A Spotify illustration

According to new youtube videos, vite is what is supposed to replace webpack. And while I do not see it as a webpack replacement, I am definitely of the opinion that it offers a lot of performance improvements straight out the box. I say this because of the problems it has helped me solve in my work as a creative developer.

So about a few months ago I started integrating the current playing song feature you see in many websites. My website was built with plain Javascript (no frameworks). And since it is bundled with webpack, I found it hard to make requests to and from the Spotify API in the spotify.js component I built because webpack didn’t run the frontend (I didn’t know that). It only bundled it to be served by the browser on request.

After trying a few more solutions (including parcel), i stumbled on the ViteJS implementation of a website i built following a course by Luis Henrique Bizaro and instantly decided to see if ViteJS would solve my problem. It hasn’t solved it completely. But I had fun learning it so I’d like to share it with you.

npm create vite --app name

This is the command that starts the Vite dev server, prebuilding your dependencies and bringing out template options for you to choose for your application. Vite4 currently supports Vue, React, Preact, Lit Element, Svelte, and even Vanilla. It’s not limited to these, we will keep adding more as we go. For my vite-spotify-app, I chose the vanilla js template because: I am not a man of many problems. I hate stress.

Then I proceeded to change the root to the src folder I created which would house all my files, including the .env file I would use to retrieve my environment variables which was a problem in webpack because I couldn’t access the process.env object from my client in order to make API calls. For ViteJS you have to use import.meta.env to access your environment variables for the root folder.

To run the application, go to the terminal and type in npm run dev. This would start the ViteJS dev server. Your terminal should show your localhost which appears in 671ms for me which, unlike parcel and webpack, is rather fast.

For a more detailed illustration of the speed of ViteJS kindly take a look at this video.

The spotify application should show your currenttly playing song after following the guide in the readme of the github folder linked above. This article doesn’t go too deep into spotify since that is not the main focus of this article. For an introduction to the spotify API check out my previous article on the topic.
References

Since this article is a walkthrough of my personal experience with VueJS and ViteJS along with a small tutorial on building an application with Vite, there’s not much of a reference list, everything you need to get started with ViteJS is here.

However the links below are sources that can help you bolster your knowledge to go from a newbie to building more powerful applications with ViteJS

Develop with Vite, a talk by Antfu at Vue Beijing Conference.
Vite crash course, by Travesty Media.
Vite3 documentation.

Thank you so much for making it through this article and I wish you good success in building your first (or your next) ViteJS application. If you’re kind enough I’d love to know what you think about this article.

For an intro on the Spotify Web API and how to integrate it to your app, check out the links below.

Crunching the spotify Web API by Chukwuemeka Mba
Emeka Spotify Clone by Chukwuemeka Mba

Crunching the Spotify Web API

Emeka — Tue, 23 May 2023 23:12:37 +0000

The Spotify API is one of the most widely used APIs in the API World. Since music is a major part of our lives, this API serves as tool that provides an extension of the individual from our private space into any application where we can stream our favorite artists.

Depending on the permissions and access to which you have been granted by the Spotify developer team, you are allowed to grab and manipulate the data of any authorized user to suit the needs of your application.

For example, applications like Discord, Last.fm, and many more make use of the Spotify API to provide a largely personalized listening experience to their users.

How do these companies access and manipulate the API to suit their needs you ask? The answer is simple.

Send a request, get a response.

While it is important to note that your use case will determine what endpoints you will make use of, there are certain things that are common to web applications that make use of the Spotify Web API which you would need to familiarize yourself with.

You would need to understand how to perform the common CRUD operations you can perform with the API, this can be done by using Postman to take a detailed look at the endpoints shared by the Spotify Web API.

To get started with the Spotify API you will need to log into the spotify developer dashboard and create a new project.

After you click on create-new-app you will see a modal where you will be asked to input: the specifications of your project, host url, and other details.

When you hit save, your project would be created and should look like this. This is to let Spotify know the url making requests to it's server is recognized and matches the information you provided. Now we can proceed with crunching the API.

Authentication and Authorization

To access a user's data via the API's endpoints, we would first need to authenticate the user.

This process makes a request to the spotify account url with the required parameters and sends a hash token to your window url as a response.

This token sent to your url will be used to authorize the user every time a request is made to the Spotify API. Yes. Every, single, time.
The best part? It expires in 3600 milliseconds.

To successfully make the request you would need to provide your:

Client ID
Redirect URL (your website url or localhost url)
The Spotify authorization url and
The scope of your request

 function handleLogin() {
    const clientId = "aa7a764r6d6sd63t186314717ds7715318c";
    const redirectUrl = "http://localhost:3000";
    const apiUrl = "https://accounts.spotify.com/authorize";
    const scope = [
      "user-read-email",
      "user-read-private",
      "user-modify-playback-state",
      "user-read-currently-playing",
      "user-read-playback-state",
      "user-read-recently-played",
      "user-read-playback-position",
      "user-top-read",
    ];

    window.location.href = `${apiUrl}?client_id=${clientId}&redirect_uri=${redirectUrl}&scope=${scope.join(
      " "
    )}&response_type=token&show_dialog=false`;

    localStorage.clear();
  }
// Notice i set the dialog=false. If you set it to true you will be redirected to the spotify login page. If not, you continue like a boss.
// Also notice i cleared the local storage after logging in the user. I would explain why in a bit.

Hold your horses.

After your user is logged in, you would notice a hash-token is sent to the window url. We do not need the entire hash, we only need a part of it (the token). So we would get the hash from the window url and perform an operation on it to get the token using regular expressions. When we get the token we would supply it to our global state so it can be accessed throughout the entire application.

For my application i used the useContext and useReducer hooks for global state management. So when I get the token, it is immediately dispatched to my global state to be accessed throughout the entire application.

Since this article does not cover state management in react, this article by a former colleague of mine should explain in detail what exactly the Use Reducer Hook is and how to use it in state management.


  const [{ token }, dispatch] = useStateProvider();
  useEffect(() => {
    if (localStorage.getItem("spotify-token") === null || undefined) {
      localStorage.clear();
      const hash = window.location.hash;
      const token = hash.substring(1).split("&")[0].split("=")[1];
      window.localStorage.setItem("spotify-token", token);
      dispatch({ type: reducerCases.SET_TOKEN, token });
      window.location.hash = "";
    }
    const route = window.location.pathname;
    if (
      route === "/library" ||
      route === "/" ||
      route === "/home" ||
      route === "/search"
    ) {
      const token = localStorage.getItem("spotify-token");
      dispatch({ type: reducerCases.SET_TOKEN, token });
    }
  }, [token, dispatch]);

Local storage and Sesame squares

If you remember that I cleared the local storage earlier, you deserve a bottle of wine!

But why did I do this?

It is because i need to store my token in the local storage for me to be able to access it after i refresh the page. Once you refresh your page, the API sends a request with the token to get the user's data for the application. If the token is available in the application's state, your requests will be successful if not they will be unsuccessful and you will be logged out and sent back to square 1.

So I cleared the local storage to make way for the spotify-token key with the token value so i can access it when ever i refresh the page and dispatch it to the application state for use all over again.

Simple innit? Great!

Data fetching and sample responses

As we mentioned earlier, you would need the Spotify access token each time you make a request to the API in order to get a response. This has to happen asynchronously, since you will want to make sure you have your response before every other item on the page is loaded.

Get user's public playlists

To get all the user's total playlists, we would make use of the Get Playlists Items endpoint "https://api.spotify.com/v1/me/playlists" which appears on spotify developers platform without the /me as https://api.spotify.com/v1/playlists. This request would be sent with authorization and content type headers to ensure the connection is secure.

PLAYLISTS.JS


export default function Playlists() {
  const [{ token, playlists }, dispatch] = useStateProvider();
  useEffect(() => {
    const getPlaylistData = async () => {
      const response = await axios.get(
        "https://api.spotify.com/v1/me/playlists",
        {
          headers: {
            Authorization: "Bearer " + `token`,
            "Content-Type": "application/json",
          },
        }
      );
      const { items } = response.data;
      const playlists = items.map(({ name, id, images }) => {
        images = images[0].url;
        return { name, id, images };
      });
      dispatch({ type: reducerCases.SET_PLAYLISTS, playlists });
    };
    getPlaylistData();
  }, [token, dispatch]);

}

Once you dispatch your playlists data to your application state, you would be able to access the data through-out your entire application. Here is the response you would get if you log the first two playlists data (from my account) to the console:


0: 

id: "0RGvWGzBsi9XE200cmpRpE"
images : 
"https://mosaic.scdn.co/640/ab67616d0000b27306728f8480e37e0c4321b1f0ab67616d0000b273131635f182833dfee67ec2beab67616d0000b2738a96302eb81c56c50491b958ab67616d0000b273ec3de434caed2b0e969da43f"
name: "Party 💃🏼"
[[Prototype]] : Object

1 : 

id : "6o5RV6butrAw2Hl2CRkxlx"
images : "https://mosaic.scdn.co/640/ab67616d0000b2731e340d1480e7bb29a45e3bd7ab67616d0000b2734640a26eb27649006be29a94ab67616d0000b2734891d9b25d8919448388f3bbab67616d0000b273d1243ff8852e722747ead762"
name : "Spanish dance hits 💃🏼"

[[Prototype]] : Object

Playlists Response

Since we deconstructed only the image, id, and title values from the return object, that is what we get from the API response. Otherwise we would get every value associated with the every playlist object. Which would look like this.


collaborative : false
description :  ""
external_urls :  { spotify : 'https://open.spotify.com/playlist/0RGvWGnHCSi9XE200cmpRpE'
}
href : "https://api.spotify.com/v1/playlists/0RGvWGzBsi9XE200cmpRpE"
id : "0RGvWGzBsi9XE0220cmpRpE"
images : 
(3) [{…}, {…}, {…}]
name : "Party 💃🏼"
owner : 
{
  display_name: 'Heleen Mas Opor Poel', 
  external_urls: {…}, 
  href: 'https://api.spotify.com/v1/users/21wga7eqgd237q2l227zl4eppyhi', 
  id: '21wg3ez7e4q2l227zl4eppyhi', 
  type: 'user', 
  …
}

primary_color : null
public : false
snapshot_id : "MzU5LDUxYmNjZaacbKJCAHCOHADASI0ZDY1ZDdlN2FkMzgyOWM1ZTk4YWU2Njc="
tracks : 
{. 
href: 'https://api.spotify.com/v1/playlists/afuuq3811ydb81y01/tracks', total: 314}
type : "playlist"
uri : "spotify:playlist:0RGvWGzBsi9XE200cmpRpE"

This is a simple example of how to make a request to and get a response directly from the Spotify API. If you liked this article please give it a like and subscribe to my YouTube Channel at... oh wait, there's no YouTube Channel.

See you later!

How to implement Chromatic plugin x Figma addon for Vue and Storybook

Emeka — Tue, 25 Oct 2022 13:53:41 +0000

Table of Contents

What is the chromatic plugin
How it works + use cases
Chromatic setup
Vue project setup
Figma plugin Integration with storybook
Conclusion

What is the chromatic plugin ?

The chromatic plugin is a third party software package developed by Storybook maintainers to help dev and design teams improve their workflows with storybook. It helps teams visualize built components, test and iterate faster with less manual work.

How it works

The chromatic plugin synchronizes four different software to give you an optimal experience.

Your internet hosting service (Github, Gitlab or bitbucket)
Your preferred frontend framework (React or Vue)
Storybook
Figma

Use cases include:

Building components
Testing components
Reviewing components

Setting up Chromatic on your local repository

The first step is to ensure that you have built your Vue (this article is based on vue) application with storybook and that you have published your stories on storybook.

Since this article does not discuss how to interact with storybook here's a link to the Storybook documentation to get you started on integrating your application with your frontend application.

Hit the dropdown button for the framework specific to you

The next step is to create a chromatic account on chromatic.com and connect your account to the hosting service that contains the project you want to work with: github, gitLab or bitbucket.

After connecting your project you will see your project name on the top left corner of the screen and two commands to run on he center page. The second command contains your project token which is auto generated and should be added as a script to your package.json

It is recommended that you add both scripts to your package.json like so:

After you have done that, you have to ensure that chromatic recognizes all the stories on your repository by running your first build npm run chromatic. Your builds will show up on your chromatic project like so:

Each build shows the updated components and the changes made to the component library.

Congratulations, you have successfully connected the chromatic plugin to your application.

Implementing the Figma Addon with Storybook

The Figma addon helps you view your component's designs in storybook. To install it you would need to first run

npm install storybook-addon-designs

then add the addon to the array of addons in your main.js file in the .storybook folder.



module.exports = {
   stories=["../src/components/**/*.stories.js"],
   addons=["storybook-addon-designs"]
}

Your folder structure should look like this

After this is done, run yarn storybook and your storybook should look like this with the design tab activated

To get the specific design frame for a component into your component's story, you need to add the link to that frame or design to your component's story parameter

Example: for a primary Button component you would insert this in the Button.stories.js file.



export const Primary = Template.bind({});
Primary.args = {
  primary: true,
  label: 'Button',
};
Primary.parameters = {
  design: {
    type: "figma",
    url: "https://www.figma.com/file/ahdbchdsiuvgldiuagauidvgu/Project_Name?node-id=253%3eh",
  },};

For more details if you get stuck you should read the docs for each tool.

Storybook
Chromatic

Congratulations you have successfully implemented the chromatic plugin and the figma addon. See you when next I write something cool!

User authentication with Axios, Vue Js and Nuxt Js.

Emeka — Wed, 11 May 2022 20:58:16 +0000

After struggling with user authentication in my nuxt app for quite a while, I was able to find a solution with the help of a friend and I would love to share it with you. Let's go!

Prerequisites

This article asumes that you are familiar with the basics of web development as well as the basics of vuejs. If you are not familiar with vue js check out this turorial.

Project Structure

This is the project structure for our Nuxt Authentication with axios application.

Setup Nuxt Project

I would be using npm so to follow along with this tutorial you will need to install:



npm install axios vuex-persist vuex

vuex-persist
If you are not familiar with vuex-persist, it is a third party library in the vue ecosystem that saves the user's data in the browser's local or session storage (depending on your configuration). This enables the user to close a browser window and return with his details and data intact.

vuex-toasted helps display formatted messages to the user. Could be error messages or success messages.

After installation your package.json should look like this:

Ignore the packages not discussed in this tutorial. Focus on the versions of the ones used. Specifically: Axios, vuex-toasted and vuex-persist. If you are using Nuxt you should have axios and vuex pre-installed so that saves you some time.

Backend Api routes

Assuming you have a fully functional backend api with a base url of localhost:3000/backend/api/ you would need 2 routes: the register and login routes. For this tutorial we would be using:



- register route : auth/signup
- login route: auth/signin

vuex store

The vuex store handles the state of our user data. From it we retrieve and store the user login details in the state function.

Import your vuex-persist plugin into your vuex store so it has access to your global state variables.



import VuexPersistence from 'vuex-persist'

function getPlugins() {
  const plugins = []

  if (process.browser) {
    const vuexLocal = new VuexPersistence({
      storage: window.localStorage,
    })

    plugins.push(vuexLocal.plugin)
  }
  return plugins
}

export const plugins = getPlugins()

export const state = () => ({
  userDetails: [],
})

export const mutations = {
  setUserDetails(state, val) {
    state.userDetails = val
  },
}

We use the store to hold state data. Which in this case is the user's authentication info which helps us manage the flow of data throughout the application's runtime.

Login page:

login.vue



<form @submit="login()" enctype="multipart/form-data" method="post">
          <div class="fields">
            <label for="email"><strong>Email Address</strong></label>
            <input type="email" name="email" v-model="email" />

            <label for="email"><strong>Password</strong></label>
            <input type="password" name="email" v-model="password" />
            <span class="forgot">
              Use Uppercase, Lowercase and Numeric characters*
            </span>
          </div>
          <div>
            <div class="btn">
              <button type="button" @click="login()">
                Sign In
              </button>
            </div>
          </div>
        </form>

Axios requests

You would notice we get the user information from the store by calling this.$store.state.userDetails. This is how user state is accessed from the store.

Next we make a post request to the signin endpoint supplying the API with the user data in the data object. The API then checks if the user exists and returns a response of successful.

We can now proceed to store the userdata in the local storage by committing the user data to the vuex store. The vuex persist plugin we imported in the store would save the data to enable persistent state between user sessions.



<script>
import axios from 'axios'
export default {
  data() {
    return {
      email: '',
      password: '',
      userInfo: this.$store.state.userDetails,
    }
  },
  methods: {
    async login() {
      const data = {
        email: this.email,
        password: this.password,
      }
      axios
        .post('localhost:3000/backend/api/auth/signin', data)
        .then((res) => {
          const userData = res.data
          userData.user.token = userData.token
          this.$store.commit('setUserDetails', userData.user)
          this.$toasted.show('You have logged in successfully', {
            position: 'top-center',
            duration: 500,
            type: 'success',
          })
          this.$router.push('/home')
        })
        .catch((err) => {
          this.$toasted.show(
            'Please enter the correct details and try again',
            err,
            {
              position: 'top-left',
              duration: 200,
              type: danger,
            }
          )
        })
    },
  },
}
</script>

Register Page:

register.vue



<form @submit="register()" enctype="multipart/form-data" method="post">
          <div class="names">
            <div class="name">
              <label for="firstname"><strong>First Name</strong></label>
              <input type="text" name="firstname" v-model="firstname" />
            </div>
            <div class="name">
              <label for="lastname"><strong>Last Name</strong></label>
              <input type="text" name="lastname" v-model="lastname" />
            </div>
          </div>
          <div class="fields">
            <label for="email"><strong>Email Address</strong></label>
            <input type="email" name="email" v-model="email" />

            <label for="password"><strong>Password</strong></label>
            <input type="password" name="password" v-model="password" />
            <span class="forgot">
              Use Uppercase, Lowercase and Numeric characters*
            </span>
          </div>

          <div class="btn">
            <button type="button" @click="register()">
              Sign Up
            </button>
          </div>
    </form>

axios requests



<script>
import axios from 'axios'
export default {
  data() {
    return {
      firstname: '',
      lastname: '',
      email: '',
      password: '',
      error: null,
    }
  },

  methods: {
    async register() {
      const data = {
        firstname: this.firstname,
        lastname: this.lastname,
        email: this.email,
        password: this.password,
      }
      axios
        .post('localhost:3000/backend/api/auth/signup', data)
        .then((res) => {
          const userData = res.data
          this.$toasted.show('You have registered successfully', {
            theme: 'primary',
            position: 'top-center',
            duration: 5000,
            type: 'success',
          })
          this.$router.push('/auth/login')
        })
    },
  },
}
</script>

Vuex Toast Notifications:

This is a simple notification system that makes the helps create a good user experience. As seen above, the usage is simple. Specify your message as the first parameter to the toasted.show() method and then the specific configuration for the message type.

Your application would access these plugins (vuex-toasted and vuex-persist) from the files below.

Create a plugins folder and in it create two files like so:

We would use these files to host the configurations for vuex-persist and vuex-toast respectively.

vuex-persist.js



import VuexPersistence from 'vuex-persist'

export default ({ store }) => {
  new VuexPersistence({
    /* your options */
  }).plugin(store)
}

vuex-toasted.js



import Vue from 'vue'

import Toasted from 'vue-toasted'

if (process.browser) {
  Vue.use(Toasted)
}

As explained above, these files are meant to host the configurations for their respective packages.

You should try to make these code examples work with your specific use-case. Once you do that everything should work fine.

I am sure you are happy-crying now as you realize this long-ass article has finally come to an end.

Either way, let me know in the comments what do you think about the code and please do give suggestions for improvements, they will be greatly appreciated!