Wrapping up She Code Africa Mentoring Program with NuxtJS

image source: Jscrambler

It’s now the end of the She Code Africa Mentoring program which started 1st of January this year. I can’t even say the usual “it came and went by so fast” that people will usually say at the end of something important because this one has been a long ride for me! Catch up on how I pulled through January and February here.

For the last and final month of the program, the learning module looked like this:

1. Consuming API in Vue App
2. Server-Side Rendering

For this month, we were introduced to a new framework — NuxtJS

Questions that have kept me up at night: Why do we need another framework for something that is already a framework?

All it took was getting started and I found my answer pretty soon.

What is NuxtJS?

Very simply put, NuxtJS, is a framework that allows server-side rendering for Vue applications. I’ll like to think of it as some extra skeletal support for VueJS (a client-side framework). So it’d make sense that a client-side framework would need a server-side framework to complete a match-made-in-framework-heaven.

I’d also later find that, because Vue applications are first loaded on the Javascript part before the HTML, search engines would simply read the HTML as a blank page. The implication to this is that when people search for terms closely related to what your app offers, your app will not show up on the results page.

So here’s where NuxtJS comes in, it offers preload powers to your application so everything is set just in time for the oh-so-impatient search engines to read and rank your HTML.

Also, unlike regular Vue projects where you need to manually set up Vue router, Bootstrap, State Management and so on if you want to work with them, on the other hand, when you create projects with NuxtJS, everything comes preinstalled which was something I found delightful.

A simple command:

npx create-nuxt-app <funky-project-name>

would have everything you need already installed in it.

Coming from a Vue background, the first difference you’d probably notice is the file directory structure in NuxtJS. Vue gives you just an asset and component folder, so what then happens when you need to build large-scale applications with so many moving parts?

It’s why NuxtJS offers so much more with additional folders like:

Nuxt file directory

Pages: This contains all .vue files you’d be navigating through.

Layout: This houses the default.vue file and other application layouts (like a sidebar for instance) that determine the overall interface of your page.

Store: This contains the app’s source of truth

Middleware: Here you can define custom functions that will run before rendering a page

Plugins: This houses any extra plugin you’d like to use in creating your app.

Static: As the name suggests, it contains files that are not going to change throughout the course of building your application. An example is a favicon file.

Another standout feature would be how easily you can route with NuxtJS by simply putting your components inside the pages folder. With VueJS, you’d need extra manual configuration and extra code to do this. For example, you run the following command after creating a project folder:

$ npm run dev

This compiles and returns a link where your project gets rendered from http://localhost:3000/. If in your pages folder you have, for example, an about.vue page, all you need to do to access it is navigate to http://localhost:3000/about.

Dabbling into NuxtJS and experiencing stricter linting guidelines was super annoying at first because you have to make sure to structure your code using the very best readable practices– No unnecessary indentations or ugly code blocks allowed over here. But after being at the tough end of the stick a couple of times, I quickly got the hang of it.

So what did I use this cool framework for? I decided to use it to build a music search app that fetches API from the iTunes website and updates according to a user’s request.

It was kinda daunting but I got to play around with creating pages, linking components together, fetching API’s and how to go about getting them to work in your project.

Hosting The App

To host the app, I used Surge. I think this is the most ridiculously easiest platform to use for deployment. I found it too easy I became suspicious. All I had to do to get started was

• cd into my project directory on the terminal
• Bundle my app into a distfolder by running npm run generate
• Run npm install --global surge
• Run surge
• It then asks you to login or create an account with your email and password.
• Next, it asks to confirm the project path you want to deploy. To this, just add a /dist
• It creates a domain you can edit to whatever you want and THAT’S IT!

The end result? This little lazy app:

Find the github link to this project here.

It’s been an amazing three-months bumper ride in this program and I am super grateful for my mentor, Justin Obi (@cjustinobi ) who was alwaysssss available to help explain the difficult stuff and people like Ada Nduka-Oyom (@kolokodess ), who’s not just about the talk of getting more women into tech but shows it through all she does.

Can’t wait to pay this experience forward! 🎉