DEV Community: Ekunola Ezekiel

Setting up Chakra UI Vue with Nuxt

Ekunola Ezekiel — Mon, 10 Aug 2020 12:20:19 +0000

In this article, we'll be covering the different ways to set up and configure the chakra-ui-vue library for a Nuxt application.

Table Of Content

Prerequisite
What is Nuxt
What is Chakra UI Vue
Setup Nuxt App
- Using Create-Nuxt-App
- Starting From Scratch
  - Setting up Nuxt From Scratch
  - Setting Up Chakra UI Vue
Conclusion

Prerequisite

To be able to follow up with this article, you must have the following setup on your local environment

Node installed.

What is Nuxt

Nuxt.js is a free and open-source progressive framework based on Vue.js to create modern web applications. Find out more here.

What is Chakra UI Vue

Chakra UI Vue gives you a set of accessible and composable Vue components that you can use to build your favorite applications and sites. Find out more here.

Setup Nuxt App

There are two ways of setting up a Nuxt application, either by starting from scratch or using the create-nuxt-app.

Using Create-Nuxt-App

The create-nuxt-app is a quick and easy way to get started using nuxt. It creates a boilerplate app that is customizable to your needs.

You can install or create a Nuxt.js application by using npx or yarn. To create one, run the command below on your terminal

npx create-nuxt-app <project-name>

Where <project-name> in the above command is the name of the project you want to create.

Note: The npx command comes bundled with npm versions 5.2.0 and above. If you use yarn, you can run yarn create nuxt-app <project-name> on your terminal to create your nuxt application.

The above command would prompt you with some questions, and configurations you want for the project. When it prompts for the UI framework, make sure to select the Chakra UI option. See example in the gif below

Once you've followed through with the prompts, and the installation is finished, navigate to the project directory on your code editor, open a terminal and run npm run dev, or yarn dev to start the application.

Once started, click on the generated link and open in the browser, you should see the same as the example in the image below.

And that's it, you've been able to create a Nuxt application bootstrapped with Chakra UI Vue, you can go ahead to build out your application using Chakra UI Vue components. Find out more about the create-nuxt-app setup here.

Starting from Scratch

If you have an already existing nuxt project, you can skip to Setting up Chakra UI Vue section, but if you want to set up a nuxt project from scratch, you can follow the next steps below

Setting up Nuxt

To setup Nuxt from scratch, create a project folder on your system and open the folder in your code editor.

The first step is to initialize a package.json file by running the command below

npm init -y

The next step is to install the nuxt dependency by running the command below

npm install --save nuxt

Then add the scripts to the package.json

 "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start"
  }

Create a pages directory, in the root of the project, and create an index.vue file there.

Add the code below to the index.vue file

<template>
  <p>Hello</p>
</template>

To run the app, run npm run dev on your terminal. Once the app is started, click on the generated link on your terminal to open the app in the browser. That's it, we've been able to set up a basic and functional nuxt application.

Setting up Chakra UI Vue

The first thing we need to do is to install chakra-ui-vue dependencies in our nuxt project. To do so, run the command below on your terminal.

npm install @chakra-ui/nuxt @nuxtjs/emotion

The next step is to create a nuxt.config.js file in the root of the project and add the configuration below

export default {
  mode: "universal",
  head: {
    title: "Chakra UI Vue Starter",
    meta: [
      { charset: "utf-8" },
      { name: "viewport", content: "width=device-width, initial-scale=1" },
      {
        hid: "description",
        name: "description",
        content: "Chakra UI Vue integration with Nuxt starter",
      },
    ],
    link: [{ rel: "icon", type: "image/x-icon", href: "/favicon.ico" }],
  },

  modules: [
    "@chakra-ui/nuxt", // register the chakra-ui nuxt package
    "@nuxtjs/emotion", // register the emotion package which is being used by chakra-ui-vue
  ],
};

Note: If you're using a pre-existing nuxt app, and already have a nuxt.config.js file, just add the @chakra-ui/nuxt and @nuxtjs/emotion to the modules section of the nuxt.config.js file.

Create a layouts directory in the root of the project and then a default.vue file inside the layouts directory, and add the code below.

<template>
  <div class="container">
    <CThemeProvider>
      <CColorModeProvider>
        <CBox font-family="body" as="main">
          <CReset/>
          <Nuxt/>
        </CBox>
      </CColorModeProvider>
    </CThemeProvider>
  </div>
</template>

<script>
import {
  CThemeProvider,
  CColorModeProvider,
  CReset,
  CBox
} from "@chakra-ui/vue";

export default {
  name: "App",
  components: {
    CThemeProvider,
    CColorModeProvider,
    CReset,
    CBox
  }
};
</script>

The code above is needed to enable usage of the Chakra UI components in the application.

Edit the index.vue file in the pages directory, and add the code below to test if chakra-ui-vue was set up properly.

<template>
  <div class="container">
    <CBox d="flex" w="100vw" h="100vh" flex-dir="column" justify-content="center">
      <CHeading textAlign="center" mb="4">⚡️ Hello chakra-ui/vue</CHeading>
      <CFlex justify="center" direction="column" align="center">
        <CButton left-icon="info" variant-color="blue" @click="showToast">Show Toast</CButton>
      </CFlex>
    </CBox>
  </div>
</template>

<script lang="js">
import {
  CBox,
  CButton,
  CFlex,
  CHeading,
} from '@chakra-ui/vue'

export default {
  name: 'App',
  components: {
    CBox,
    CButton,
    CFlex,
    CHeading,
  },
  methods: {
    showToast () {
      this.$toast({
        title: 'Account created.',
        description: "We've created your account for you.",
        status: 'success',
        duration: 10000,
        isClosable: true
      })
    }
  }
}
</script>

If you followed the steps above properly, you should have a project structure similar to the image below

Once you're done with the steps above, start the application by running npm run dev or yarn dev on your terminal and you should have a page that looks like the image below on your browser

You can then go-ahead to continue building out your application using the chakra-ui-vue components.

Conclusion

In this article, we've been able to look at what Nuxt and Chakra UI Vue are, and the different ways to set up Chakra UI Vue using Nuxt.

Find more information about Nuxt here.
Find more information about Chakra UI Vue here.
The source code used in demonstrating this article can be found here.

This article was originally published on my blog.

If you have any questions or feedback about this article, feel free to leave a comment.

Thanks for reading.

Combining Stack, Tab & Drawer Navigations in React Native With React Navigation 5

Ekunola Ezekiel — Mon, 22 Jun 2020 11:57:49 +0000

In this article, we'll be covering the different types of navigations and also how to combine them together in react-native using react-navigation 5.

Table Of Content

Prerequisite
Project Setup
Screens Setup
Installing Dependencies
Stack Navigator
Tab Navigator
Drawer Navigator
Conclusion

Prerequisite

To be able to follow up with this article, you must have the following setup on your local environment

Node installed.
An emulator to test the app. You can use either Android Studio or Xcode.

Project Setup

To set up a react-native project, you can make use of the React Native CLI or the Expo CLI.

I would be making use of the Expo CLI to set up a react-native project. To do so, run the following command on your terminal.



npm install -g expo-cli

The above command would install Expo CLI on your machine.

Note: You need to have Node v12 installed on your machine to be able to install Expo CLI using the command line.

After the above command runs successfully, run the command below to generate/create a react-native project.



expo init project-name

Once the above command runs successfully, open the project in your desired code editor, and run npm start on the terminal to start the application.

To set up a react-native project using the React-Native CLI, check here.

React Navigation Dependencies & Setup

The dependencies below are the core utility used by the navigators to create the navigation structure, as well as our Stack, Tab, and Drawer navigation.

In your project directory, run the command below on your terminal



npm install @react-navigation/native @react-navigation/stack @react-navigation/bottom-tabs @react-navigation/drawer

These dependencies below are the dependency relied upon for gestures, animations, and transitions. Also, run the command below on your terminal to install the dependencies.



npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view

In the root file of our app, in this case, the App.js file, we would set up our react-navigation there.



// ./App.js

import React from "react";
import { NavigationContainer } from "@react-navigation/native";

 const App = () => {
  return <NavigationContainer>{/* Navigation here */}</NavigationContainer>;
}
export default App;

Screens setup

The next step would be to set up screens that would be used in our application.

I would be setting up 3 screens for the purpose of this demo, feel free to just copy them.

So I'd set them up in a screens directory. Create a screens directory in the root of the project and add the components below

Home Screen



// ./screens/Home.js

import React from "react";
import { View, Button, Text, StyleSheet } from "react-native";

const Home = () => {
  return (
    <View style={styles.center}>
      <Text>This is the home screen</Text>
      <Button title="Go to About Screen" />
    </View>
  );
};

const styles = StyleSheet.create({
  center: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    textAlign: "center",
  },
});

export default Home;

About Screen



// ./screens/About.js

import React from "react";
import { View, StyleSheet, Text } from "react-native";

const About = () => {
  return (
    <View style={styles.center}>
      <Text>This is the about screen</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  center: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    textAlign: "center",
  },
});

export default About;

Contact Screen



// ./screens/Contact.js

import React from "react";
import { View, StyleSheet, Text } from "react-native";

const Contact = () => {
  return (
    <View style={styles.center}>
      <Text>This is the contact screen</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  center: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    textAlign: "center",
  },
});

export default Contact;

Stack Navigation

Stack navigation provides a way for react-native apps to transition between screens by using a stack, which means the screens are stacked on each other.

For example, if you navigate from login to signup screen, the signup screen is stacked on top of the login screen, and if you navigate back, the signup screen is then popped off the stack.

To set up the stack navigation, I'd create a navigation directory at the root of our project. Inside our newly created directory, I'd also create a StackNavigator.js file in there, and add our stack navigation setup.

Note: You can decide to name the folders and files however you want



// ./navigation/StackNavigator.js

import React from "react";
import { createStackNavigator } from "@react-navigation/stack";

import Home from "../screens/Home";
import About from "../screens/About";

const Stack = createStackNavigator();

const MainStackNavigator = () => {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Home" component={Home} />
      <Stack.Screen name="About" component={About} />
    </Stack.Navigator>
  );
}

export { MainStackNavigator };

You can also customize and style the stack navigation by adding screenOptions prop style, see basic example below



// ./navigation/StackNavigator.js

const MainStackNavigator = () => {
  return (
    <Stack.Navigator
      screenOptions={{
        headerStyle: {
          backgroundColor: "#9AC4F8",
        },
        headerTintColor: "white",
        headerBackTitle: "Back",
      }}
    >
      <Stack.Screen name="Home" component={Home} />
      <Stack.Screen name="About" component={About} />
    </Stack.Navigator>
  );
}

Back in our App.js file, we can import and add our newly created Stack Navigator. So our App.js file would look like the code below



// ./App.js

import React from "react";
import { NavigationContainer } from "@react-navigation/native";

import { MainStackNavigator } from "./navigation/StackNavigator";

 const App = () => {
  return (
    <NavigationContainer>
      <MainStackNavigator />
    </NavigationContainer>
  );
}
export default App

Now if we run the code on our emulator, We should now see our Home screen rendering on our Stack screens.

Remember in our ./screens/Home.js file, we had a button that did nothing, but since we have our stack navigation setup, we can now have access to navigation prop injected by the stack navigation which can help us perform many operations, one of which is redirecting.

So navigate to ./screens/Home.js and add the code below.



// ./screens/Home.js

import React from "react";
import { View, Button, Text, StyleSheet } from "react-native";

const Home = ({ navigation }) => {
  return (
    <View style={styles.center}>
      <Text>This is the home screen</Text>
      <Button
        title="Go to About Screen"
        onPress={() => navigation.navigate("About")} // We added an onPress event which would navigate to the About screen
      />
    </View>
  );
};

const styles = StyleSheet.create({
  center: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    textAlign: "center",
  },
});

export default Home;

In the code above, we get the navigation prop, which is an object that has a navigate function which we then call passing in the name of the screen we want to navigate to after the button is pressed.

And there we have it, we can now navigate between screens using our stack navigation.

Tab Navigation

Tab navigation is a navigation that is tabbed at either the bottom or top of a screen and can be used to switch between different screens.

Tab navigation can take in either the screen as a component or a Stack as the component.

In our StackNavigator.js file, let's create another stack for our contact screen. So our StackNavigator.js will look like below



// ./navigation/StackNavigator.js

import React from "react";
import { createStackNavigator } from "@react-navigation/stack";

import Home from "../screens/Home";
import About from "../screens/About";
import Contact from "../screens/Contact";

const Stack = createStackNavigator();

const screenOptionStyle = {
  headerStyle: {
    backgroundColor: "#9AC4F8",
  },
  headerTintColor: "white",
  headerBackTitle: "Back",
};

const MainStackNavigator = () => {
  return (
    <Stack.Navigator screenOptions={screenOptionStyle}>
      <Stack.Screen name="Home" component={Home} />
      <Stack.Screen name="About" component={About} />
    </Stack.Navigator>
  );
}

const ContactStackNavigator = () => {
  return (
    <Stack.Navigator screenOptions={screenOptionStyle}>
      <Stack.Screen name="Contact" component={Contact} />
    </Stack.Navigator>
  );
}

export { MainStackNavigator, ContactStackNavigator };

We can then create another file TabNavigator.js in the navigations directory and add the markup for our TabNavigator



// ./navigation/TabNavigator.js

import React from "react";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";

import { MainStackNavigator, ContactStackNavigator } from "./StackNavigator";

const Tab = createBottomTabNavigator();

const BottomTabNavigator = () => {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Home" component={MainStackNavigator} />
      <Tab.Screen name="Contact" component={ContactStackNavigator} />
    </Tab.Navigator>
  );
};

export default BottomTabNavigator;

And then back in our App.js file, we can now import our newly created TabNavigator and use it there.



//  ./App.js

import React from "react";
import { NavigationContainer } from "@react-navigation/native";

import BottomTabNavigator from "./navigation/TabNavigator";

 const App = () => {
  return (
    <NavigationContainer>
      <BottomTabNavigator />
    </NavigationContainer>
  );
}
export default App

Drawer Navigation

Drawer navigation is a slide-out and slide-in drawer that contains links to various screens. The Drawer navigation opens when a menu icon is clicked or when a user swipes their finger from the left or right edge of the app.

In order to create drawer navigation, we would create another file in our navigations directory called DrawerNavigator.js

In that file, we would add our drawer navigator markup



// ./navigation/DrawerNavigator.js

import React from "react";

import { createDrawerNavigator } from "@react-navigation/drawer";

import { ContactStackNavigator } from "./StackNavigator";
import TabNavigator from "./TabNavigator";

const Drawer = createDrawerNavigator();

const DrawerNavigator = () => {
  return (
    <Drawer.Navigator>
      <Drawer.Screen name="Home" component={TabNavigator} />
      <Drawer.Screen name="Contact" component={ContactStackNavigator} />
    </Drawer.Navigator>
  );
}

export default DrawerNavigator;

And then back in our App.js file, we can now import our newly created DrawerNavigtor.js file and use it as our navigator.



// ./App.js

import React from "react";
import { NavigationContainer } from "@react-navigation/native";

import DrawerNavigator from "./navigation/DrawerNavigator";

 const App = () => {
  return (
    <NavigationContainer>
      <DrawerNavigator />
    </NavigationContainer>
  );
}
export default App;

There are also configuration options and header icons you can add to customize your drawer navigation. Find out more here.

Conclusion

In this article, we've been able to look at how to set up and combine the Stack, Tab, and Drawer navigation for our react-native app using react-navigation 5.

The source code used in demonstrating this article can be found here.

If you have any questions or feedback about this article, feel free to leave a comment.

Thanks for reading.

My journey as a Technical Team Lead and the lessons learned

Ekunola Ezekiel — Mon, 20 Apr 2020 13:47:45 +0000

November 2019 I started working as a Technical Team Lead at Lambda School. 6 months down the line I'm writing about the experience and the lessons learned along the way.

The Technical Team Lead position entailed managing a cross-functional diverse team remotely by leading standup meetings, delivering one-on-one feedback, code reviews, and much more.

During my time as a Technical Team Lead, I led a team of 6 software engineers that built a workout tracker product within 2 months called Trackdrills. We made use of agile methodology, carried out customer, user, and technical research before building out the product.

Product presentation:

Application Link: https://trackdrills.com

The second stage was to guide another team of 6 through the process of learning Python, Data structures and Algorithms and also in building projects to demonstrate what was learned.

Lessons Learned

Effective Communication
Communication is key and very integral when working generally, and as a Team Lead it was important I communicated well and professionally with the team. I learned to communicate on time, communicate changes to the schedule and team meeting early and also to follow up on recent conversations. I was also able to manage expectations by always communicating with the stakeholders of the project frequently.
Preparation is Key
I learned to always prepare ahead for team meetings by having the goal and the objective of the meeting in mind. I also plan an agenda and also questions that can be asked during the meeting as well. It helped in getting value out of team meetings.
Giving & Receiving Feedback
The Team Lead position required giving individual feedback to my team members weekly, I learned to give ASK (Actionable, Specific and Kind) feedback and to highlight what the engineers did well each week and also what they could improve on. Each team member provided feedback to their Team Leads on a weekly basis as well, so I've had to reflect on their feedback and make improvements where needed based on their feedback.
Leading by example
Being the Team Lead, the team looks up to my actions, character, and behavior, so I've had to always attend and host team meetings on time and on schedule, always be professional during team meetings, take responsibility and apologize when I'm late to team meetings.
Patience & Empathy
People face different challenges in life which would sometimes affect their performance at work, I learned to always try to find out what's going on with my team members asides work and be patient with them.
Even when having though conversations, I learned to consider what the team member is going through and show empathy in my way of communicating with them.
Time Management
I learned how to schedule my day, and manage my time effectively by always planning my day ahead and sticking to the plan for the day. I was more productive and accomplished more of my goals this way.
Prioritizing
When working with deadlines, I learned to prioritize tasks by looking at the end goal and determining which task takes priority over the other and delegate team members to work those tasks.

Conclusion

During my time working as a Technical Team Lead, I also tried working on a side project and further develop my skills. During this time I looked into Vuejs and built a movie listing application using Vuejs and TMDB API.

In the past 6 months, I had the chance to work with a great team in supporting the growth of students, and also to develop my skills as well.

It has been a fun, challenging, interesting and rewarding experience for me, and I'm looking forward to what comes next.

The Team Leads

This article was originally published on my blog.

Cover Photo by Matt Howard on Unsplash

Deploying Vue App from Github to Netlify

Ekunola Ezekiel — Tue, 25 Feb 2020 17:35:27 +0000

In this article, We will be going through the process of deploying a Vue application from Github to Netlify.

If you have a project structure where the Vue app is NOT nested in a sub-directory like in the example shown below

You can use the following steps to deploy:

Push your code to Github
Connect your Github account to your Netlify account
Select the project you want to deploy
Add commands
- Build Command (npm run build): This is the command that would be run for every build/deployment on Netlify. The Vue command for building and bundling our files is npm run build.
- Publish Directory (dist): This is the folder that contains the files that was generated from the build command. After running the build command, a dist folder is generated and it contains our minified and compiled production ready code.
Deploy project

See example in the image below

In a case where your Vue application is available in a nested directory like the example shown below

Note that the Vue project in the example above is nested in a client directory.

Add a netlify.toml file to the root of your project, and add the configuration below to the file.

[build]
  command = "npm run build"
  publish="dist"
  base = "client"
  # The base directory should be the path to the nested Vue project

Once added, push the changes to Github. Netlify should automatically deploy the changes, if not, deploy the changes manually.

Note: netlify.toml is a configuration file where you can specify how Netlify should build/run your application. A lot can be accomplished with the netlify.toml file. Find out more about the netlify.toml file here.

Routing

If you've made use of routing in your project, and you want to load a particular route straight from your URL, you would run into an issue where Netlify would throw an error ("page not found") as shown in the example below

To solve/fix the issue, you can add the following code below to your netlify.toml file.

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

Once added, push the changes to Github and re-deploy the project. Once deployed, your application should no longer throw errors. See the example below.

Environment Variables

If you've made use of environment variables in your project, you can also add them to Netlify by following the steps shown in the image below

Note that If you've created the Vue application using vue-cli, you need to add the VUE_APP prefix to all your environment variables.

Conclusion

In this article, we've been able to take a look at how to deploy a Vue application from Github to Netlify, how to fix routing issues that can come up after deployment and well as how to add environment variables on Netlify.

If you have any questions or feedback about this article, feel free to leave a comment.

Thanks for reading.

This article was originally published on my blog.

Understanding the package.json file

Ekunola Ezekiel — Mon, 24 Feb 2020 09:20:24 +0000

What is a package.json file

A package.json is a JSON file that exists at the root of a Javascript/Node project. It holds metadata relevant to the project and it is used for managing the project's dependencies, scripts, version and a whole lot more.

Creating a `package.json` file

There are two ways of creating/generating a package.json file.

Npm or Yarn

To create the package.json file with npm, run npm init on your terminal.

To use this method, you need to have Node installed on your system.

To create the package.json file with yarn, run yarn init on your terminal.

To use the yarn method, you need to have Node and Yarn installed on your system.

Note: Throughout the course of this article, I would make use of npm commands for showing examples of how to do perform specific tasks, if you prefer making use of yarn, check here for the yarn CLI commands.

After running the command, it should ask for some information about the project and generate a package.json file in the root of your project. The generated file should look like the example below.

  {
    "name": "storemanager",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "directories": {
      "test": "test"
    },
    "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1"
    },
    "keywords": [],
    "author": "",
    "license": "ISC"
  }

Note: You can also run npm init -y or yarn init -y to generate the package.json file with default values.

Manually

To create the file manually, create a package.json file manually in the root of the project, and add an empty object with the required properties, which are name and version.
It should look like the example below.

  {
    "name": "storemanager",
    "version": "1.0.0"
  }

Properties of a package.json file

name

The name property is a required field in the package.json file, it represents the name of the project. There are rules you need to follow when specifying a name for your project in the package.json file.

must be lowercase
must be one word
can contain hyphens and underscores
should not start with an underscore(_) or dot(.)

  "name": "package.json-mastery"

version

The version is also a required field in the package.json file. The property denotes the current version of the module for the project.
The rule required for the version field is that it needs to follow the semantic versioning guidelines e.g 1.0.2

  "version": "1.0.0"

description

The description property is used in describing and providing more information about the project.

  "description": "Mastery of the package.json file"

engines

The engines property is a JSON object of key/value pairs that are used to denote/specify the version of the libraries and runtimes on which the application should run.

 "engines": {
    "npm": "6.10.0",
    "node": "10.14.1"
  }

dependencies

The dependencies property denotes the list of the required modules/packages for your application to function. After installing a dependency, it is added to the dependencies list.

"dependencies": {
  "bcryptjs": "^2.4.3",
  "cors": "^2.8.5",
  "dotenv": "^6.1.0",
  "express": "^4.16.4",
}

To install a dependency, run npm i package or npm install package on your terminal. Where the package is the name of the package you are trying to install.

For example, to install axios dependency, run npm install axios on your terminal.

devDependencies

The devDependencies property denotes the list of modules/packages that are not required for your application to function. They are also known as development dependencies.

 "devDependencies": {
    "eslint": "^4.19.1",
    "mocha": "^6.2.0",
    "nodemon": "^1.19.1",
  }

To install a devDependency, run npm i package --save-dev or npm install package -D on your terminal. Where the package is the name of the package you are trying to install.

For example, to install chai devDependency, run npm install chai --save-dev on your terminal.

scripts

The script property takes a JSON object of key/value pairs. Each script can be used in performing different sets of tasks, like building, testing, linting the application.
You can run the scripts by running npm run scriptname, or yarn scriptname on the terminal.

  "scripts": {
    "start": "node index",
    "dev": "nodemon index",
    "test": "jest",
    "lint": "eslint ./server",
  }

For example, to execute the dev script in the example above, run npm run dev or yarn dev on your terminal.

main

The main property serves as the entry point of your application and should point to the file that serves as the entry point to your application.

  "main": "app.js"

homepage

The homepage property is used to specify the landing page for the application/package.

 "homepage": "https://github.com/Easybuoy/package.json-mastery#readme",

private

The private property is false by default but can be set to true to prevent the application/package to be published.

  "private": true

license

This property denotes the type of license that's being used by the project

"license": "MIT"

author

This property denotes the creator/owner of the project

"author": "Ezekiel Ekunola"

repository

The repository keyword is a JSON object of key/value pairs that are used to specify the version control system being used to manage the application. You can specify the type of version control being used,
the URL to the repository, as well as an optional directory within the repository.

"repository": {
    "type": "git",
    "url": "git+https://github.com/Easybuoy/package.json-mastery.git"
  }

bugs

The bugs property is used to point to the issues page of the repository for the application or anywhere the project issues can be reported.

 "bugs": {
    "url": "https://github.com/Easybuoy/package.json-mastery/issues"
  }

keywords

The keywords property is an array of keywords that helps in identifying your project or make your project easier to find when a user searches those keywords.

  "keywords": ["node", "javascript", "npm", "yarn"]

Custom Properties

The package.json file can also be used for package specific commands like Babel, ESLint, Jest and lots more. You can find the usage in the package documentation.

Find an example of a custom property for Jest below.

  "jest": {
      "snapshotSerializers": [
        "enzyme-to-json/serializer"
      ]
    }

After combining all the properties explained above, we can end up having a package.json file looking like the example below

{
  "name": "package.json-mastery",
  "version": "1.0.0",
  "description": "Mastery of the package.json file",
  "private": false,
  "main": "index.js",
  "scripts": {
    "start": "node index",
    "dev": "nodemon index",
    "test": "jest"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/Easybuoy/package.json-mastery.git"
  },
  "keywords": [
    "node",
    "javascript",
    "npm",
    "yarn"
  ],
  "author": "Ezekiel Ekunola",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/Easybuoy/package.json-mastery/issues"
  },
  "homepage": "https://github.com/Easybuoy/package.json-mastery#readme",
  "engines": {
    "npm": "6.10.0",
    "node": "10.14.1"
  },
  "dependencies": {
    "bcryptjs": "^2.4.3",
    "cors": "^2.8.5",
    "dotenv": "^6.1.0",
    "express": "^4.16.4"
  },
  "devDependencies": {
    "eslint": "^4.19.1",
    "mocha": "^6.2.0",
    "nodemon": "^1.19.1"
  },
  "nyc": {
    "exclude": [
      "server/app.js",
      "server/config/",
      "server/build"
    ]
  }
}

Conclusion

In this article, we've been able to see what a package.json file is, how to create it, the different properties and their use cases.

There are still so many more properties that can be specified in the package.json file, if you want to go in-depth, check here.

If you have any questions or feedback about this article, feel free to leave a comment.

Thanks for reading.

This article was originally published on my blog.

Setting up Domain with Namecheap & Netlify

Ekunola Ezekiel — Wed, 22 Jan 2020 12:37:45 +0000

In this article, I would be showing how to connect a Namecheap domain to an application deployed with Netlify.

The first step is to have Netlify and Namecheap accounts setup. Once that has been done, go ahead and purchase your domain on Namecheap and also deploy your application to Netlify.

Note: It is assumed that you have an application hosted on Netlify and that you've also purchased your domain on Namecheap.

After purchasing your domain on Namecheap, navigate to your dashboard you should see the purchased domain there. Click on the manage button on the far right corner of the domain.

Scroll down to the NAMESERVERS section, click on the dropdown and change it from Namecheap BasicDNS to Custom DNS. See example in the image below

Navigate to your application on Netlify and click on the Domain Settings or Setup Custom Domain

Add your domain in the input field and click on the verify button. Netlify would try to validate the domain.

After adding the domain, click on the options dropdown to the right of the domain you just added, and select Set Up Netlify DNS. See example in the image below

Click through till you get to the point where Netlify shows a list of Nameservers. See example in the images below

Navigate back to Namecheap, and copy each of the DNS servers one at a time to the NAMESERVERS section of Namecheap. After adding them, click on the check icon to the right to save them. See example in the image below

And that's it, we're done. You would need to wait for 1–5 minutes for Netlify to propagate, after that your web page can now be accessed by the custom domain.

Netlify will issue your domain free SSL certificates, so you would not need to worry about setting up HTTPS on your own.

This article was originally published on my blog.

My 2019 Year In Review

Ekunola Ezekiel — Tue, 31 Dec 2019 11:12:56 +0000

Early this year, I read Prosper's 2018 year review and it inspired me to do and accomplish a lot and is also the reason I've decided to also start writing my year review as well.

2019 has been a year of ups and downs for me, mostly ups 😁. The first quarter of 2019 was not so pleasant for me, but I was able to bounce back, turn things around and have a great year.

At the beginning of the year, I did not plan to do some of the things I did, my only plan/goal was to become a better software developer, all the other things like writing, mentoring came along
from people around me pushing me to greatness.

Humbling moment of 2019 🙇🏾‍♂️

I took a technical interview sometime this year for a position at a company, turned out it was to be taken on Codility. It was my first time hearing/interacting with the platform, I was used to Hackerrank mostly then.

Fast-forward, I took the test on Codility, I think there were 3 questions. I solved about 2 of them, with sample tests passing, only for me see the results and I got 0%.

What!!! How??

I later learned that the example test cases did not count toward the final score results. I knew I wasn't that good with Algorithms and Data Structures then but I never expected to get 0% in a coding challenge.

It was truly a humbling experience that just made me realize I had lots of things I still needed to learn. Since then I've taken courses on Data Structures & Algorithms, and also solved coding challenges from time to time.

Work & Personal Projects 👨🏾‍💻

Work

Andela: At the beginning of the year, I was working for Andela as a Software Engineer, and it was a great experience for me, I met lots of fantastic people with great minds who pushed me to give my very best. On September 17, however, Andela laid off about 400 engineers (read about it here), sadly I was one of them.

Andela invested a lot in me, and I'd be forever grateful for the experiences and the support that Andela showed, even after we were laid off.

Andela Party 😁 L-R: Chinedu,Tunmise, Me

Lambda School: I started work as a Technical Team Lead at Lambda School in November, and it has been quite an experience. I work with people from diverse backgrounds, and it has been an opportunity for me to improve my leadership and communication skills.

Some of my responsibilities as a Technical Lead include:

Leading a team of learners that emulates a real work environment using the agile methodology.
Mentoring learners on how to learn effectively and solve programming problems.
Providing daily feedback and issue resolution of all curriculum through slack help channel or code review.
Delivering one-on-one feedback and code review daily.
Reviewing student code and giving feedback on areas of improvement.
Leading daily standup meetings to build camaraderie, facilitate sharing of ideas and work progress, and provide guidance for that week's study material.

Team Meetng (Awesome times 😅) Lambda School Lagos Hangout

Personal Projects

This year was my most active year on Github, I made 3,164 contributions working on projects, as well as open-source contributions in 2019.

Some of the fun projects I developed are:

Portfolio: I built my Portfolio with Gatsby to learn the amazing prowess of Gatsby and GraphQL.
Blog: This was built using one of the Gatsby starters, I also used this as an opportunity to learn more about Gatsby & GraphQL.
Use My Tech Stuff: This project was built to demonstrate my understanding of React & Redux.
Marvel Comics: This was a fun project I decided to build with Marvel's API.
School In The Cloud: This project was built for demonstrating my understanding of Flexbox.
Multi-User Dimension Game: This was a team project built with React & Python to further establish an understanding of Data Structures and Algorithms.

My 2019 Github graph

Writing ✍🏾

I started writing around July 2019 and I have written a total of 10 articles this year, including this one. I write on my experiences with tools and technologies as well as teaching how to use different tools.
My first ever article was on Deploying React app from Github to Netlify.

Writing has not exactly been easy for me, I was not able to write as much this year as I would have loved to. I'm still trying to figure out the best way that works for me, what topics to write on, but I believe I'll get better with time and consistency.
I want to give special shoutouts to Johnson, Chinedu and Xavier(XROLE) for their support and motivation, and for helping me find bugs in my articles 🤪.

I've gotten some good feedback from people as to how my articles helped them one way or another, which just motivates me to want to do more.

Testing Node API with Mocha & Chai

Ekunola Ezekiel ・ Aug 22 '19

#testing #javascript #node #tutorial

Deploying React App from Github to Netlify

Ekunola Ezekiel ・ Jul 4 '19

#react #javascript #beginners #webdev

Setting up a Node API with Postgres and Knex

Ekunola Ezekiel ・ Sep 16 '19

#beginners #node #javascript #tutorial

Getting started with React & Apollo Client

Ekunola Ezekiel ・ Sep 30 '19

#react #graphql #beginners #webdev

My first experience with Gatsby

Ekunola Ezekiel ・ Nov 4 '19

#webdev #javascript #gatsby #graphql

Community

Open Source

I always wondered what contributing to Open Source meant 😅 and how it was possible, well I was able to find out this year. I contributed to several open source projects this year as well as participating for the first time in the Hacktoberfest challenge.
I also wrote about my contributions to the Hacktoberfest challenge here.

Some of the Open Source projects I contributed to in 2019 below:

Hacktoberfest Swag

Events

This year, I was only able to attend the concatenate and unstack events held in Lagos, Nigeria.

At the events, I learned a lot with topics ranging from Design, Communication, Accessibility, Building JAMStack apps, GraphQL & Gatsby, Functional Programming and so on. I was also able to network and connect with other people in the tech industry, and also find out the interesting things they've been building and developing.

I just want to thank the organizers of the events for putting them together. It was an awesome experience for me, and I can't wait to see what they have for us come 2020 🤗.

L-R: Me, Chinedu, Benjamin, Noble, Yusuf (Concatenate conference)

Mentorship

I was able to be part of the mentors of the DevCTraining program where I mentored participating learners, provided technical support, reviewed their code, and also delivered feedback to them.

Shoutouts 📣

Special thanks to Johnson, Chinedu, Chidimma, Xavier(XROLE), Ebenezer and everyone for making my 2019 🔥, encouraging, guiding, pushing, and providing me with the much crucial support. I'm really glad to have met you all 🤗.

Plans for 2020

Writing ✍🏾: In 2020, I'm looking to write way more than I did this year.
Community 👨🏾‍💻: I want to be more involved in the developer community in the coming year. This means more volunteer work and also contributing more to open source projects and building developer tools.
Reading 📖: I have never been a fan of reading books 😩, even though I've tried to. This year, I managed to finish reading a book titled Eat a frog, by Brian Tracy. My target next year is to read at least 10 books.
Travel 🛫: I did a little or no traveling in 2019. Next year I'm looking to travel to at least 2 countries.

2020 is a year of doing more of the things I kickstarted this year. Looking forward to an awesome and exciting year ahead 🚀🚀🚀.

Originally published on my blog

My first experience with Gatsby

Ekunola Ezekiel — Mon, 04 Nov 2019 08:56:24 +0000

I recently built my portfolio website using Gatsby and I want to talk about my experience using Gatsby, what I enjoyed and the challenges I faced.

What is Gatsby

Gatsby is a free and open-source framework based on React that helps developers build blazing-fast websites and apps. Gatsby can be used to build static sites that are PWA, high performant and follows the web standard. Read more about Gatsby here.

What I enjoyed

Performance: Gatsby makes fast applications. Gatsby follows Google's PRPL (Push, Render, Pre-Cache, Lazy-load) standards for building apps that work well even during unreliable network connections. Find out more about why Gatsby is fast here.
It's React: I had experience working with React already, so it was very easy for me to work with Gatsby as I was able to understand what was going on.
Good Documentation: Gatsby has good documentation, so it was easy for me to learn how to use packages and plugins like gatsby-image, gatsby-source-filesystem, gatsby-plugin-react-helmet and so on when developing.
It uses GraphQL: Gatsby uses GraphQL for managing data, and can be used for creating/generating pages, querying data and so on. I had always wanted to learn how to use GraphQL, Gatsby allowed me to do that. I learned how to use GraphQL when querying data on Gatsby. Learn more about why Gatsby uses Graphql here.
Good Community: Gatsby has a good community and learning resources, and starters to help you get started quickly, and I also got to find solutions to challenges I had quickly.
Get started easily: You can easily get started with Gatsby, as Gatsby has lots of starters that can get you easily started.
Plugins: Gatsby has a plugin system that makes it easy to extend the functionality of Gatsby e.g Responsive image support, Typescript support. Find out more here.

Challenges I faced

When developing my portfolio, I mostly got the error TypeError: Cannot read property 'internal' of undefined when starting the application. To solve this error, I had to delete the .cache directory at the root of the project and restart the application by running gatsby develop on the terminal.
I also ran into issues when using the GraphQL playground, I changed my Graphql query in the code but was not reflecting on the Graphql playground until I had to refresh the playground.

I also ran into some other issues like querying for an image with a relative path and sizing an image with Gatsby Image, which i solved by googling, checking documentation and StackOverflow.

Conclusion

In conclusion, developing with Gatsby has been fun and easy to work with, and proven to be the perfect tool for me to develop my portfolio with.

Portfolio Link: http://ezekielekunola.com

Find resources to learn more on Gatsby below
https://www.gatsbyjs.org
https://www.gatsbyjs.org/docs/awesome-gatsby
https://www.gatsbyjs.org/blog/2017-09-13-why-is-gatsby-so-fast
https://www.gatsbyjs.org/docs/awesome-gatsby-resources
https://www.gatsbyjs.org/starters/?v=2
https://www.gatsbyjs.org/docs/why-gatsby-uses-graphql

If you have any questions or feedback about this article or my portfolio, feel free to leave a comment.

Thanks for reading.

This article was originally published on my blog

My Hacktoberfest Contributions 😅

Ekunola Ezekiel — Tue, 01 Oct 2019 19:49:00 +0000

It's my first time participating in Hacktoberfest, and I am 75% done. I have made 3 contributions so far, in which 2 of them have been merged.

Contributions

Emoji Screen

EmojiScreen is a listing of movies, TV shows and musicals depicted through emojis.

Added Jersey Shore #454

Easybuoy posted on Sep 30, 2019

[x] 🔍 I have searched the data.js file and confirmed I am not adding a duplicate entry. Note: Different versions of the same show/movie are okay to add such as Lion King (1994) and Lion King (2019) or Rent (movie) and Rent (musical).
[x] 💜 I have checked Issues and Pull Requests to confirm I am not adding a duplicate entry that is pending approval.
[x] 🌈 I have added a single year under year. Note: Do not add ranges such as 2017-2019.
[x] 📅 I have added a type from one of the following: movie , tv or musical.
[x] 🔗 I have added the IMDB page or Playbill archive page under itemLink.
[x] 3️⃣ I have at least three emojis listed under emojiImgs.
[x] 5️⃣ I have a maximum of five emojis listed under emojiImgs.
[x] 👍 My pull request has a descriptive title (such as Added The Lion King or Added Black Panther, The Avengers: Endgame and Thor).
[x] ⭐ My genres are all inside of square brackets [ ] and each are individually wrapped in quotation marks and have a comma between each one. (such as submitting this "genres": ["adventure","mystery","animation"] and not this "genres":["adventure, mystery, animation"]).
[x] 🖍️ I have placed the new show(s) or movie(s) in alphabetical order based on title. If the show or movie starts with 'the', then use the second word to alphabetize.

Closes #383

View on GitHub

Process name

Process-name is an NPM package that allows you to get platform-specific application process name.

You can check out the package on npm here

Add badges to readme #4

Easybuoy posted on Oct 01, 2019

What does this PR do?

Add badges to readme file

Description of Task to be completed?

Edit Readme file, and add repo size, license, downloads, npm, contributions, commits badges.

How should this be manually tested?

Clone the branch add-badges-to-readme
Check the Readme file to see added badges.

Screenshots (if appropriate)

Closes #3

View on GitHub

Translator Pounds Elis

Translator pounds elis is a course completion work in Information Systems from the Federal University of Goiás.

Update server dependencies #7

Easybuoy posted on Oct 01, 2019

What does this PR do?

Add badges to the readme file

Description of Task to be completed?

Update all dependencies in package.json file to their latest versions.
Update connection to the database in server.js file.

How should this be manually tested?

Clone the branch update-server-dependencies

Closes #1

View on GitHub

So far, participating in Hactoberfest and contributing to Open Source projects have been fun, and it has been a great experience so far.

How you can contribute

To contribute, create an account on Hacktoberfest, read the rules and participation details, then search the projects list for the project you want to contribute to.

You can also check your Hacktoberfest profile to see how you're doing.

Update

Today (3rd October), I have completed the challenge, with 4 Pull requests merged. The last of them that I contributed to was Oh My Zsh terminal.

Oh My Zsh

Oh-My-Zsh is a delightful, open source, community-driven framework for managing your ZSH configuration.

You can find out more here

Add README to yii plugin #8194

Easybuoy posted on Oct 02, 2019

What does this PR do?

Add README to yii plugin

Description of Task to be completed?

Create a README file in the yii plugin directory.
Add documentation on how to use the yii plugin

How should this be manually tested?

View README file in yii plugin directory.

This contributes to #7175

View on GitHub

If you are looking to participate in Hacktoberfest, click here to register.

Getting started with React & Apollo Client

Ekunola Ezekiel — Mon, 30 Sep 2019 06:47:45 +0000

What is Apollo Client

Apollo Client is a complete state management library for JavaScript apps.
It makes use of a GraphQL API to handle data fetching. What this means is in order to make use of Apollo Client, you need to have a GraphQL API that you would connect to.

What is GraphQL

GraphQL is an open-source data query and manipulation language for APIs, and a runtime for fulfilling queries with existing data. GraphQL makes use of Mutation and Query to achieve this.

What is a Query and Mutation

Query: A GraphQL query is used to read or fetch data. A sample GraphQL query is shown in the example below.

{
  query getUserDetails {
    users {
      id
      name
      email
     }
   }
}

Note: The above query is named getUserDetails and it gets back the id, name and email fields.

Mutation: Mutations are used for any type of request that changes the data, creating, updating and deleting operations. A sample GraphQL mutation looks like the example shown below.

{
  mutation addUser(name: String!, email: String!){
    addUser(name: $name, email: $email){
      id
      name
      email
      created_at
    }
  }
}

Note: In the mutation example above, it receives name and email as parameters and gets back the id, name, email and created_at fields as response.

Setup React Application

I'll be using create-react-app boilerplate to setup my react application. On your terminal run the command below to generate a react boilerplate

npx create-react-app rick-and-morty

after the above command completes, open the generated folder in your Integrated Development Environment.

Install Dependencies

npm install apollo-boost graphql react-apollo

Connect Client

To connect the react application to the Graphql API, in the index.js file of your react application, add the following code below.

import ApolloClient from "apollo-boost";
import { ApolloProvider } from 'react-apollo';

const client = new ApolloClient({
    uri: 'https://rickandmortyapi.com/graphql/', //URL of the GraphQL server
  });

...then wrap your sub-components with the ApolloProvider, passing in the client we defined above as prop. An example is shown below.

ReactDOM.render(
  <ApolloProvider client={client}>
    <App />
  </ApolloProvider>,
  document.getElementById("root")
);

Once the above is done, we have successfully setup a basic apollo client connection to the backend GraphQL API.

Note: Find more here, for more advanced Apollo client setup and configurations.

There are different methods of consuming a Graphql API when using Apollo Client, they are:

Render Props
Hooks
Higher-Order Component (HOC)

All the different methods of consuming a GraphQL API can be done with the use of the react-apollo package we installed earlier.

Queries

Render Props

To make queries with the Render Prop method, we need to use the Query component from react-apollo. An example is shown below.

import React from "react";
import { Query } from "react-apollo";
import { gql } from "apollo-boost";

const GET_CHARACTERS = gql`
  query getCharacters {
    characters {
      results {
        id
        name
        image
      }
    }
  }
`;

export default function CharacterWithRender() {
  return (
    <Query query={GET_CHARACTERS}>
      {({ loading, error, data }) => {
        if (loading) return "Loading...";
        if (error) return `Error! ${error.message}`;

        return (
          <div className="characters">
            {data.characters.results.map(character => (
              <div key={character.name} className="character">
                <img src={character.image} alt={character.name} />
                <p>{character.name}</p>
              </div>
            ))}
          </div>
        );
      }}
    </Query>
  );
}

Hooks

To make queries with the Hooks method, we need to use the useQuery hook from react-apollo. An example is shown below.

An example is shown below

import React from "react";
import { gql } from "apollo-boost";
import { useQuery } from "react-apollo";

const GET_CHARACTERS = gql`
  query getCharacters {
    characters {
      results {
        id
        name
        image
      }
    }
  }
`;

function CharacterWithHook() {
  const { loading, error, data } = useQuery(GET_CHARACTERS);
  if (error) {
    return <div>Error</div>;
  }

  if (loading) {
    return (
      <div className="App">
        <h2>Loading...</h2>
      </div>
    );
  }
  if (data) {
    if (data.characters.results.length > 0) {
      return (
        <div className="characters">
          {data.characters.results.map(character => (
            <div key={character.name} className="character">
              <img src={character.image} alt={character.name} />
              <p>{character.name}</p>
            </div>
          ))}
        </div>
      );
    }
  }
}

export default CharacterWithHook;

Higher Order Component (HOC)

We can also use the withApollo Higher Order Component to make queries, you can do so by simply wrapping your component's export with withApollo. This injects a client prop into the component, thus enables you to make GraphQL queries.
An example is shown below

import React, { useState } from "react";
import { gql } from "apollo-boost";
import { withApollo } from "react-apollo";

const GET_CHARACTERS = gql`
  query getCharacters {
    characters {
      results {
        id
        name
        image
      }
    }
  }
`;

function CharacterWithHOC({ client }) {
  const [characters, setCharacters] = useState([]);

  client
    .query({ query: GET_CHARACTERS })
    .then(res => setCharacters(res.data.characters.results))
    .catch(err => console.log(err));

  if (characters.length > 0) {
    return (
      <div className="characters">
        {characters.map(character => (
          <div key={character.name} className="character">
            <img src={character.image} alt={character.name} />
            <p>{character.name}</p>
          </div>
        ))}
      </div>
    );
  }
  return (
    <div className="App">
      <h2>Loading...</h2>
    </div>
  );
}

export default withApollo(CharacterWithHOC);

Mutations

Render Props

To make mutations with the Render Prop method, we need to use the Mutation component from react-apollo. An example is shown below.

import React, { useState } from 'react';
import { Mutation } from 'react-apollo';
import { gql } from 'apollo-boost';

const LOGIN_MUTATION = gql`
  mutation userLogin($email: String!, $password: String!) {
    userLogin(email: $email, password: $password) {
      username
      email
      id
      token
    }
  }
`;

export default function MutationWithRender() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  return (
    <Mutation mutation={LOGIN_MUTATION}>
      {(loginUser, { loading, error, data }) => {
        if (loading) return 'Loading...';
        if (error) return `Error! ${error.message}`;

        return (
          <form
            id="signinForm"
            className="text-center  p-4"
            onSubmit={e => {
              e.preventDefault();
              loginUser({ variables: { email, password } });
            }}
          >
            <p className="h4 mb-4 f-1">Sign In</p>

            <input
              title="Email"
              id="email"
              name="email"
              value={email}
              onChange={e => setEmail(e.target.value)}
              type="email"
              required
            />
            <input
              title="Password"
              id="password"
              name="password"
              type="password"
              value={password}
              onChange={e => setPassword(e.target.value)}
              required
            />

            <div className="form-group my-4">
              <button className="btn btn-block" type="submit">
                Sign In
              </button>
            </div>
          </form>
        );
      }}
    </Mutation>
  );
}

Hooks

To make mutations with the Hooks method, we need to use the useMutation hook from react-apollo. An example is shown below.

An example is shown below

import React, { useState } from 'react';
import { useMutation } from 'react-apollo';
import { gql } from 'apollo-boost';

const LOGIN_MUTATION = gql`
  mutation userLogin($email: String!, $password: String!) {
    userLogin(email: $email, password: $password) {
      username
      email
      id
      token
    }
  }
`;

export function MutationWithHook() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  const [loginUser, { data, error, loading }] = useMutation(LOGIN_MUTATION);

  if (error) {
    alert('Error Logging In User');
  }

  if (data) {
    alert('Successfully Logged In');
  }

  return (
    <form
      id="signinForm"
      className="text-center  p-4"
      onSubmit={e => {
        e.preventDefault();
        loginUser({ variables: { email, password } });
      }}
    >
      <p className="h4 mb-4 f-1">Sign In</p>

      <input
        title="Email"
        id="email"
        name="email"
        value={email}
        onChange={e => setEmail(e.target.value)}
        type="email"
        required
      />
      <input
        title="Password"
        id="password"
        name="password"
        type="password"
        value={password}
        onChange={e => setPassword(e.target.value)}
        required
      />

      <div className="form-group my-4">
        <button className="btn btn-block" type="submit">
          Sign In
        </button>
      </div>
    </form>
  );
}

export default MutationWithHook;

Higher Order Component (HOC)

We can also use the withApollo Higher Order Component to make mutations, you can do so by simply wrapping your component's export with withApollo. This injects a client prop into the component, thus enables you to make GraphQL mutations.

An example is shown below

import React, { useState } from 'react';
import { withApollo } from 'react-apollo';
import { gql } from 'apollo-boost';

const LOGIN_MUTATION = gql`
  mutation userLogin($email: String!, $password: String!) {
    userLogin(email: $email, password: $password) {
      username
      email
      id
      token
    }
  }
`;

export function MutationWithHOC({ client }) {
  const [error, setError] = useState(false);
  const [success, setSuccess] = useState(false);
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  const { mutate } = client;

  const onSubmit = async e => {

    try {
      e.preventDefault();
      const res = await mutate({
        mutation: LOGIN_MUTATION,
        variables: {
          email,
          password
        }
      });

      setSuccess(res.data);
    } catch (err) {
      setError(err);
    }
  };

  if(error) {
    alert('Error Logging In User');
  }

  if (success) {
    alert('Successfully Logged In');
  }

  return (
    <form id="signinForm" className="text-center  p-4" onSubmit={onSubmit}>
      <p className="h4 mb-4 f-1">Sign In</p>

      <input
        title="Email"
        id="email"
        name="email"
        value={email}
        onChange={e => setEmail(e.target.value)}
        type="email"
        required
      />
      <input
        title="Password"
        id="password"
        name="password"
        type="password"
        value={password}
        onChange={e => setPassword(e.target.value)}
        required
      />

      <div className="form-group my-4">
        <button className="btn btn-block" type="submit">
          Sign In
        </button>
      </div>
    </form>
  );
}

export default withApollo(MutationWithHOC);

Conclusion

A lot more can be accomplished with the Apollo Client, like caching, refetching, subscriptions and a whole lot more.

In this article, we looked at how to set up a basic apollo client with react, the different methods we can use to make queries and mutations and also examples of how to make queries and mutations in our react components.

Find the code used in this project on Github
Find more information on Apollo Client here

If you have any questions or feedback about this article, feel free to leave a comment.

Thanks for reading.

This article was originally published on my blog

Setting up a Node API with Postgres and Knex

Ekunola Ezekiel — Mon, 16 Sep 2019 10:42:20 +0000

In this article, I would be setting up a Node project with Postgres database and Knex query builder.

What is Knex

Knex.js is a "batteries included" SQL query builder for Postgres, MSSQL, MySQL, MariaDB, SQLite3, Oracle, and Amazon Redshift designed to be flexible, portable, and fun to use.

To get started, we have to initialize our project to create our package.json file.

npm init -y

Database Setup

I would be using an online database called Elephantsql to set up my database. You can register here.

After registering, create a database. An example is shown below.

Setup Knex

Install dependencies needed for the project

npm i knex -g
npm i pg express dotenv --save

Create a .env file in the root of your project and add the database URL. Example below.

DB_URL=URL (where URL is the database connection string)

On your the terminal, run the command below to initialize knex

knex init

The above command would generate a knexfile.js in the root of your project and would look like below.

// Update with your config settings.

module.exports = {

  development: {
    client: 'sqlite3',
    connection: {
      filename: './dev.sqlite3'
    }
  },

  staging: {
    client: 'postgresql',
    connection: {
      database: 'my_db',
      user:     'username',
      password: 'password'
    },
    pool: {
      min: 2,
      max: 10
    },
    migrations: {
      tableName: 'knex_migrations'
    }
  },

  production: {
    client: 'postgresql',
    connection: {
      database: 'my_db',
      user:     'username',
      password: 'password'
    },
    pool: {
      min: 2,
      max: 10
    },
    migrations: {
      tableName: 'knex_migrations'
    }
  }

};

I am going to change the knexfile.js configuration file to use Postgres and also specify the directory where my migrations and seeds should be saved. Edit the knexfile.js file to the code below.

require('dotenv').config();

module.exports = {
  development: {
    client: 'pg',
    connection: process.env.DB_URL,
    migrations: {
      directory: './data/migrations',
    },
    seeds: { directory: './data/seeds' },
  },

  testing: {
    client: 'pg',
    connection: process.env.DB_URL,
    migrations: {
      directory: './data/migrations',
    },
    seeds: { directory: './data/seeds' },
  },

  production: {
    client: 'pg',
    connection: process.env.DB_URL,
    migrations: {
      directory: './data/migrations',
    },
    seeds: { directory: './data/seeds' },
  },
};

DB Config

Create a db.js file in the data directory that would hold our knex configuration in the data directory. This would hold the configuration for our environments.

Add the code below to the db.js file.

const knex = require('knex');

const knexfile = require('../knexfile');


const env = process.env.NODE_ENV || 'development';
const configOptions = knexfile[env];

module.exports = knex(configOptions);

Migrations

Migrations allow for you to define sets of schema changes so upgrading a database is a breeze.

To create/generate a migration file, run the command below.

knex migrate:make todo

Note: todo in the command above is the migration name.

The above command would create a migration file in the path specified for migrations. In our case /data/migrations

We can then edit the migration file to include the columns we would be needing in our todo table.

exports.up = knex =>
  knex.schema.createTable("todo", tbl => {
    tbl.increments();
    tbl.text("task", 128).notNullable();
  });

exports.down = knex => knex.schema.dropTableIfExists("todo");

To run the migrations, you can run the command below

knex migrate:latest

knex migrate:latest would run through all our migration files and run the up functions which would then create the tables in our database.

To rollback the migrations, you can run the command below

knex migrate:rollback

knex migrate:rollback would run through all our migration files and run the down functions which would then drop the tables in our database.

Seeds

Seed files allow you to populate your database with test or seed data independent of your migration files.

To generate seeds, run the command below on your terminal

knex seed:make todo

This would create a todo.js file in your seeds directory. specified for seeds in our knexfile.js, which can then be edited to include our test data.
Example of a seed file below.


exports.seed = function(knex) {
  // Deletes ALL existing entries
  return knex('todo').del()
    .then(function () {
      // Inserts seed entries
      return knex('todo').insert([
        {id: 1, task: 'Create API'},
        {id: 2, task: 'Watch Money Heist'},
        {id: 3, task: 'Do Dishex'}
      ]);
    });
};

To run the seeds files we can run the command below on your terminal

knex seed:run

The run command then gets all seeds files and then seeds them to our database.

Scripts

You can add scripts to package.json file.

 "scripts": {
    "start": "node index",
    "migrate": "knex migrate:latest",
    "unmigrate": "knex migrate:rollback",
    "seed": "knex seed:run "
  }

start: This command is to start our application.
migrate: This command is to add our migrations to our database.
unmigrate: This command is to rollback/remove all existing migrations from the database.

In order to query the database, all you need to do is to import in the db.js file we created and make the query. An example is shown below.

const db = require("./data/db.js"); // importing the db config

app.get("/todo", async (req, res) => {
  const todos = await db("todo"); // making a query to get all todos
  res.json({ todos });
});

Conclusion

In this article, we have been able to look at setting up a Node API with a Postgres database and Knex query builder.

The source code used in demonstrating this article can be found here.

Find more information on knex here

If you have any questions or feedback, please leave a comment.

Thanks for reading.

This article was originally posted on my blog

Integrating Continous Integration tools to Node API

Ekunola Ezekiel — Thu, 29 Aug 2019 13:06:01 +0000

In this article, I would be integrating Continous Integration (CI) tools (Travis CI & Coveralls) to a Node API.

In my previous article, I talked about writing tests for node API with Mocha and Chai, and I am going to be building on the project used in that article. Find the link to the article below.

Testing Node API with Mocha & Chai

Ekunola Ezekiel ・ Aug 22 '19 ・ 3 min read

#testing #javascript #node #tutorial

What is Continous Integration

Continuous Integration (CI) is a software development practice of integrating regular changes to a project via version control after which automated test builds are run. Each commits triggers a build process, during which tests are run to determine if anything is broken in the project.

Why is this necessary

CI tools are necessary for a project because it can help in quickly figuring out where bugs exist and also ensures quality code is been shipped/deployed.

Integrating Travis CI

Create an account on Travis CI, if you don't have one created yet.

After creating a Travis CI account, connect your Github to your Travis CI account.

Then select the repository you want to connect to Travis CI.

The next step is to create a .travis.yml file in the root of your project.

Then add the configuration below

language: node_js

node_js:
  - 10.14.1

Note: In the configuration above, we specified the language as nodejs and the version of nodejs we want Travis CI to install and use in running our tests. Also, different configurations could be specified based on the language used.

After adding the configuration above to the created .travis.yml file, push changes to Github. After pushing, Travis CI would create a build and automatically run your tests. An example of a build is shown in the image below.

Environment Variables

If you've made use of environment variables in your project, you can also add them to Travis CI by following the steps shown in the image below

Travis CI Badge

You can add the Travis CI status badge to your project readme file by copying the markdown on Travis to your project readme file. An example is shown below.

Integrating Coveralls

Create an account on Coveralls, if you don't have one created yet.

After creating a Coveralls account, connect your Github to your Coveralls account.

Then select the repository you want to connect to Coveralls. An example is shown in the image below

Back in our project, install the dependencies below

npm i nyc coveralls --save-dev

After installing the dependencies, add the scripts below to the package.json file.

"coverage": "nyc npm test && nyc report --reporter=text-lcov | coveralls"

Note: You can run coverage locally by running the command npm run coverage on your terminal. Example of coverage report below

Then edit the .travis.yml file by adding the command below

after_success:
  - npm run coverage

After adding the configuration above, push changes to Github. After pushing, Travis CI would create and run the coverage after running the test. Once this process is completed, your coveralls dashboard would be updated.

Note: In cases where coverage does not reflect on your coveralls dashboard, create a .coveralls.yml file in the root of your project and add the configuration below and push changes to Github.

repo_token: as8dgas87dgadasdasd // repo_token is gotten from your coveralls dashboard.

Coveralls Badge

You can add the Coverage status badge to your project readme file by copying the markdown on Travis to your project readme file. An example is shown below.

Conclusion

In this article, we have been able to look at how to integrate CI tools in our projects, and why it is needed to have them in our project.

Find more on Continous Integration here
Find more on Travis CI here
Find more on Coveralls here

If you have any questions or feedback about this article, feel free to leave a comment.

Thanks for reading.

This article was originally posted on my blog

DEV Community: Ekunola Ezekiel

Setting up Chakra UI Vue with Nuxt

Table Of Content

Prerequisite

What is Nuxt

What is Chakra UI Vue

Setup Nuxt App

Using Create-Nuxt-App

Starting from Scratch

Conclusion

Combining Stack, Tab & Drawer Navigations in React Native With React Navigation 5

Table Of Content

Prerequisite

Project Setup

React Navigation Dependencies & Setup

Screens setup

Stack Navigation

Tab Navigation

Drawer Navigation

Conclusion

My journey as a Technical Team Lead and the lessons learned

Lessons Learned

Conclusion

Deploying Vue App from Github to Netlify

Routing

Environment Variables

Conclusion

Understanding the package.json file

What is a package.json file

Creating a package.json file

Properties of a package.json file

name

version

description

engines

dependencies

devDependencies

scripts

main

homepage

private

license

author

repository

bugs

keywords

Custom Properties

Conclusion

Setting up Domain with Namecheap & Netlify

My 2019 Year In Review

Humbling moment of 2019 🙇🏾‍♂️

Work & Personal Projects 👨🏾‍💻

Work

Personal Projects

Writing ✍🏾

Testing Node API with Mocha & Chai

Ekunola Ezekiel ・ Aug 22 '19

Deploying React App from Github to Netlify

Ekunola Ezekiel ・ Jul 4 '19

Setting up a Node API with Postgres and Knex

Ekunola Ezekiel ・ Sep 16 '19

Getting started with React & Apollo Client

Ekunola Ezekiel ・ Sep 30 '19

My first experience with Gatsby

Ekunola Ezekiel ・ Nov 4 '19

Community

Open Source

Events

Mentorship

Shoutouts 📣

Plans for 2020

My first experience with Gatsby

What is Gatsby

What I enjoyed

Challenges I faced

Conclusion

My Hacktoberfest Contributions 😅

Contributions

Emoji Screen

Added Jersey Shore #454

Creating a `package.json` file