DEV Community: Samaila Bala

Deploying a React App to Firebase

Samaila Bala — Mon, 30 Mar 2020 20:37:47 +0000

Photo by Kvistholt Photography on Unsplash

This article was originally published on my Blog

With JAMSTACK gaining popularity in 2020, platforms that offer serverless services such as Firebase are also on the rise. In this article, we will be discussing on how to deploy a React app to Firebase.

Prerequisites

This tutorial assumes you have at least the following:

Beginner knowledge of JavaScript and React.
Node.js v10.x.x or higher
yarn or npm

Create a React App

To begin we are going to create a react app:

Create a React app

npx create-react-app deployFirebase

Start it to be sure everything is ok

npm start

Create a Firebase Project

Next, we create a firebase project:

Go to Firebase Console
Click on new and fill in the information relating to the project
On the Dashboard, create a web app for the project.
Open up a terminal and install the firebase-cli

npm install -g firebase-tools

firebase login

It'll launch a web browser for authentication, if the authentication is successful you should see an authentication success page.

Configuring the Firebase Project

Initialize the firebase project

firebase init

This command initializes the firebase project and allows you to choose the firebase products to integrate into your React project, for this tutorial we will be going with the hosting option.

Choose, Hosting: Configure and Deploy Firebase Hosting sites.
On the next prompt, choose an existing project.
Pick a project to be hosted on the list.
Press Enter on the next prompt to use the default public directory generated by React.
On the Configure as a Single Page App (SPA) prompt, input No as we will be using React for the SPA.
If it prompts you to overwrite any files input No as we don't want firebase overwriting the files generated by React.

Once the process is complete a firebase.json and .firebaserc files are created. The firebase.json file contains information on the location of files, assets, and settings relating to the project. The .firebaserc file stores project aliases which can be used in setting different hosting options for the same application, one for staging and the other for production.

Test and Deploy

After setting up and configuring the firebase project it is advisable to test it locally before deploying:

Run npm build to build the project, it should output a build folder in your project root directory with the compiled files of the project.
Run firebase serve --only hosting to view the static content of your firebase hosted app. It should launch the application in your web browser.
Run firebase deploy to deploy the React app to firebase.

After deploying the application you should see the URL in the console.

Conclusion

While this article focuses on deploying a React Application to Firebase the process can still be used for other Frontend frameworks with little modifications. Also, Firebase has a nice set of products that are worth checking out.

Git Tags: What are they and How to use them

Samaila Bala — Sat, 29 Feb 2020 17:42:37 +0000

Git Tags are references to a specific point in a repository's history, they are pointers to commits and are mostly used to mark release points i.e v0.0.1. Tags are different from branches because unlike branches after they are created commits can't be added to them.

Creating a Tag

There are two types of tags supported by git (Lightweight Tags and Annotated Tags)

Annotated Tags: are tags that store information relating to the tag such as the description, tagger, and date. To create an annotated tag we use the -a flag. The -m flag is also used to provide a custom message, if it isn't provided git launches your editor.

git tag -a v0.0.1 -m "An annotated Tag"

To see the information of an annotated tag run:

git cat-file tag v0.0.1

Lightweight Tags: are just pointers to a specific commit history and they don't provide any extra information relating to the tag.

git tag v0.0.2

Creating a Tag from a commit

By default, tags are created from the most recent commit. If you want to tag an older commit then run

git tag v0.0.3 <commit-id>

Listing Tags

To list the tags in your repository run git tag this list tags in alphabetical order

Searching For Tags

In a case where the tags are much and you are looking for a specific tag, you can add the -l flag to search for the specific tag needed

git tag -l v0.0.2

Pushing Tags to a Repository

A tag isn't pushed to a repository when you run git push. To push a tag to a repository you have to run

git push origin <tag-name>

Checkout a Tag

You can checkout a tag by running git checkout <tag-name> however this only allows you to view the state of the repository as of when the tag was created, to be able to make changes you have to create a branch from the existing tag by running

git checkout -b <new-branch> <tag-name>

Delete a Tag

To delete a tag on your local repository you can simply run

git tag -d v0.0.1

however, if the tag exists on your remote server you will have to run this command

git push origin --delete v0.0.1

In conclusion, you should use a tag to create a new release rather than branches and you can always create a branch off a tag to create patches to a release version.

Five Lessons from my first month working as a Software Developer

Samaila Bala — Sat, 15 Feb 2020 15:13:26 +0000

Disclaimer: These are my own opinions based on my own experiences and of course I might be wrong.

1. Languages and Frameworks are just tools:

I think we all know this but get carried away due to the complexity of the frameworks and the rate at which languages evolve. What I've learned of late is I should have focused more on problem-solving because I believe at the end of the day that's what matters, languages will always evolve and there will always be a new framework but what will keep you on the job is your ability to use those tools to bring solutions to the problems thrown at you.

2. Soft skills are underrated:

While I admit that this is still a work in progress I'm glad I paid attention to all the soft skills lessons thrown my way during my internship(well not all of them). The ability to empathize, communicate effectively, and work with your team members cannot be overstated and most times might be the key to holding your job and relationships for a long time.

3. Sleep is very important:

In 2019 I slept an average of 4 hours daily because I felt I had so much to learn and sleeping meant I was learning less, I've never been so wrong. I resolved this year to improve the average to 7 hours and it is paying off I no longer dread waking up in the morning. I also believe having enough sleep at night keeps the body and mind sharp and increases productivity.

4. Time management is essential:

As soon as I committed to sleeping more it meant I had less time to achieve my daily tasks or so I thought. I initially did the first thing that came to my head or whatever I felt was of priority at the moment but at the end of each day, I achieved less so I started scribbling down things I planned to do each day on a notepad and it helped to an extent. The issue with this method was I realized I spent more time on some tasks that shouldn't necessarily take time due to distractions. At this point, I decided to go with a Task planning application and eventually picked Google Tasks because of its integration with Google Calendar and I started assigning deadlines to each task. The jury is still out on this but I've noticed an improvement in the number of tasks I get to accomplish daily.

5. Creating a good work-life balance is the key to avoiding burnout:

I've been researching about burnout, the causes and how to avoid it and from what I've realized the major cause of burnout is not having the right work-life balance.
So how does one create a good work-life balance?

Enjoy your work.
Create personal time.
Make your health a priority.
Take a break.

My mantra has always been to live, learn and love and with each day that comes I try as much as possible to accomplish that and I hope what I've learned helps you too.

Setting up React Native with Expo and Android studio on Ubuntu 18.04

Samaila Bala — Fri, 10 Jan 2020 17:06:30 +0000

React-Native is a framework developed by Facebook to create applications for Android, IOS and Web Platforms. It is written in Javascript and renders to the native platform. It is advisable for beginners getting started in mobile development to use the Expo CLI. Expo is a framework built around React Native and native platforms and helps in building, deploying and quickly iterating IOS, Android and Web Apps.

The following instructions will show how to setup React Native with Expo and the Android Studio which is Android official IDE (Integrated Development Environment) and we will be using the Android Studio to access the Android Emulator a virtual device on Ubuntu 18.04.

Getting Started

This tutorial assumes you have Node.js installed on your machine if you don't, follow the installation instructions here to get started. We'll be using npm which is a package manager and comes with Node.js to install the packages needed.

Once the above step is done open up your terminal and run the code below:

npm install -g expo-cli

The above command installs the expo-cli globally which allows us to create and manage our react native apps with expo.

After that run:

expo init hello-mobile
cd hello-mobile
expo start

This creates a new react native project with expo and starts it up. If everything was successful, the results should be similar to the screenshot below:

At this point, we have expo and react-native up and running.

Setting up Android Studio

As mentioned above Android Studio is Android's official IDE and it comes with a lot of features beyond the scope of this article. The one feature we are interested in is AVD(Android Virtual Device) which is an interface that allows us to emulate Android Devices.

Before we install Android studio run the following command in your terminal to check if your Ubuntu Machine supports virtualization.

egrep --color 'vmx|svm' /proc/cpuinfo | wc -l

If the result returns a value greater than zero it means the machine has virtualization support. Virtualization is required to run the emulator smoothly.

We can now go on to install some necessary utilities needed for Android studio. Run the following:

sudo apt-get install qemu-kvm libvirt-daemon-system libvirt-clients bridge-utils

This installs KVM which is a kernel-based virtual machine and libvirt the toolkit and API for KVM.

After that run kvm-ok to verify if the installation was successful.

Next, we add users to kvm and libvirt group:

sudo adduser `id -un` kvm
sudo adduser `id -un` libvirtd

Once this is completed log out and log in for changes to take effect.

Open the Ubuntu software center and search for Android Studio once found click the install button to start the installation. It takes a while so you can grab a cup of coffee while waiting. Launch the Android studio when it is completed and you should be presented with a screen similar to the screenshot below:

Click Configure and then click on SDK Manager on the dropdown that opens to open the SDK Manager.

On the SDK Platform make sure you have at least the top 2 API levels installed and on the SDK tools make sure the Android Emulator, Android SDK Platform Tools, Android SDK Tools, and Google Play Services are installed. Once that is done click on Apply and then Ok.

Go back to the Start Screen and click on Configure and then AVD Manager on the dropdown that shows up to open the AVD Manager.

Click on create a new virtual device on the screen that follows I suggest you pick a device with PlayStore support. On the Select a system image window, choose a system image and download it if it is not available.

Once that is completed click next and enter the name of the device, after that click on finish to be done setting up the virtual device.

Click on the play button on the start screen of the AVD to start up the virtual android device and give it some time to start up.

Go back to the expo dev tools in the browser and click on Run on Android Device/Emulator to start your android app on the emulator. You should have a screenshot similar to the one below.

At this point, the Android emulator is ready and you can start building and testing Android applications with React Native, Expo, and Android Studio.

Testing Material UI form components

Samaila Bala — Thu, 21 Nov 2019 20:09:37 +0000

I used Material-UI for a side project and I ran into problems when trying to write a test for form components, this article illustrates the problem and how it was solved.

React Testing Library was used to write the tests which is a cool library for testing react components and also jest-dom which provides custom matchers that can be used to extend that of jest.

This is my App.js file

import React, { useState } from 'react';
import {
  FormControl,
  Input,
  InputAdornment,
  IconButton,
  InputLabel
} from '@material-ui/core';
import { makeStyles } from '@material-ui/core/styles';
import Send from '@material-ui/icons/Send';

const useStyle = makeStyles((theme) => ({
  root: {
    marginLeft: theme.spacing(1),
    marginRight: theme.spacing(1),
    width: 200
  }
}));
const App = () => {
  const classes = useStyle();
  const [input, setInput] = useState('');
  const [output, setOutput] = useState('');

  const handleChange = (event) => {
    setInput(event.target.value);
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    setOutput(`Hello ${input}`);
  };

  return (
    <div data-testid="form">
      <h3>Material Form</h3>
      <FormControl className={classes.root}>
        <InputLabel htmlFor="adornment-send-title" data-testid="label">
          Enter Name
        </InputLabel>
        <Input
          id="adornment-send-title"
          type="text"
          value={input}
          onChange={handleChange}
          data-testid="nameInput"
          endAdornment={
            <InputAdornment position="end">
              <IconButton
                aria-label="submit answer"
                onClick={handleSubmit}
                data-testid="submit"
              >
                <Send className={classes.iconColor} />
              </IconButton>
            </InputAdornment>
          }
        />
      </FormControl>
      <p data-testid="output">{output}</p>
    </div>
  );
};

export default App;

This is a screenshot of the App:

It renders a simple form component that has a text field and a button. When an input is entered and the button is clicked it displays a message.

This is the test for the App component:


import React from 'react';
import { render, fireEvent } from '@testing-library/react';
import '@testing-library/jest-dom/extend-expect';
import App from './App';

it('check if form displays', () => {
  const { getByTestId } = render(<App />);
  const form = getByTestId('form');
  const output = getByTestId('output');
  const label = getByTestId('label');
  const nameInput = getByTestId('nameInput');
  const submit = getByTestId('submit');

  expect(form).toBeInTheDocument();
  expect(output).toBeEmpty('');
  expect(label).toHaveTextContent('Enter Name');
  expect(nameInput).toHaveValue('');
  expect(submit).toBeInTheDocument();
});

it('should check if message is displayed when button is clicked', () => {
  const { getByTestId } = render(<App />);
  const output = getByTestId('output');
  const nameInput = getByTestId('nameInput');
  const submit = getByTestId('submit');

  expect(output).toBeEmpty('');
  expect(nameInput).toHaveValue('');

  fireEvent.change(nameInput, { target: { value: 'Sama' } });
  fireEvent.click(submit);
  expect(nameInput).toHaveValue('Sama');
  expect(output).not.toBeEmpty('');
});

There are two tests in the file, the first checks if the page renders correctly and the second checks if the button performs the actions it is expected to perform.

Problem

When you run npm test you get the following errors:

From the test errors, we can clearly see that

 const nameInput = getByTestId('nameInput');

returns undefined which is odd considering the component value is supposed to be an empty string

<Input
  required
  id="adornment-send-title"
  type="text"
  value={input}
  data-testid="nameInput"
  onChange={handleChange}
  endAdornment={
    <InputAdornment position="end">
      <IconButton
        type="submit"
        aria-label="submit answer"
        data-testid="submit"
      >
        <Send className={classes.iconColor} />
      </IconButton>
    </InputAdornment>
  }
/>

Solution

So after being stuck for a while I decided to inspect the input element in the browser and realized that the Material UI TextField has a div wrapped around the input so I further explored by checking the TextField API documentation which can be accessed here. It confirmed my suspicion and further explained that to alter the props to the input element then inputProps has to be used so I moved the data-testid attribute to inputProps and it resulted in this:

<Input
  id="adornment-send-title"
  type="text"
  value={input}
  onChange={handleChange}
  inputProps={{
    'data-testid': 'nameInput'
  }}
  endAdornment={
    <InputAdornment position="end">
      <IconButton
        type="submit"
        aria-label="submit answer"
        data-testid="submit"
      >
        <Send className={classes.iconColor} />
      </IconButton>
    </InputAdornment>
  }
/>

After that, I ran the tests again and viola the results of the tests were successful.

So, shameless plug this is the app created with Material UI, it is a lyric trivia app that tests knowledge of lyrics and this is the repo for it.

How did you get your first dev job?

Samaila Bala — Wed, 16 Oct 2019 13:31:47 +0000

I'm looking for my first job as a Full Stack Developer and seriously confused about the transition from learning to getting the job. So I'll love to hear your opinions on what worked for you and how long it took.

React with WebSockets

Samaila Bala — Thu, 10 Oct 2019 20:45:05 +0000

So I was tasked with building a component that connects to a WebSocket API to fetch a data stream from Bitstamp, you can check the API docs here. The main reason for going with a Websocket API rather than a Fetch API was to get realtime data. This article illustrates how I went about it.

What is a WebSocket API?

According to MDN, the WebSocket API is an advanced technology that makes it possible to open a two-way interactive communication session between the user's browser and a server. With the WebSocket API, you can send messages to a server and receive event-driven responses without having to poll the server for a reply. This link explains the differences between a WebSocket API and a FETCH API.

In this app, we'll be fetching a live order book stream from the bitstamp API. You can view the complete app on Code Sandbox

Setting up React

I'll be using create-react-app for creating the react app. So fire up your command line and let's start working:

npx create-react-app orderbook

Once it is done open the root directory with cd orderbook and run npm start to be sure the app is working.

We'll refactor and get rid of the boilerplate code that we won't need. Run cd src to switch to the src directory and then run rm serviceWorker.js logo.svg to delete serviceWorker.js and logo.svg. The app will crash after doing this because index.js and App.js imported the files that were deleted. Refactor your index.js to look like this:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

and App.js to look this way:


import React from 'react';
import './App.css';

const App = () => {
  return (
    <div>
      <h2> Crypto Order Book </h2>
    </div>
  )
}

export default App;

At this point, the react-app should be working and displaying Crypto Order Book in the browser

Creating the OrderBook Component

Create an OrderBook component in the src file

cd src 
touch OrderBook.js

Time to get our hands dirty. We would be using react hooks

OrderBook.js


import React, { useState, useEffect } from 'react';

const OrderBook = () => {
  const [orders, setOrders] = useState([]);
  const currencyPair = 'btcusd';

  const currencyArray = currencyPair.toUpperCase().match(/.{1,3}/g);

  useEffect(() => {
    const subscribe = {
      event: 'bts:subscribe',
      data: {
        channel: `order_book_${currencyPair}`
      }
    };
    const ws = new WebSocket('wss://ws.bitstamp.net');

    ws.onopen = () => {
      ws.send(JSON.stringify(subscribe));
    };
    ws.onmessage = (event) => {
      const response = JSON.parse(event.data);
      setOrders(response.data);
    };
    ws.onclose = () => {
      ws.close();
    };

    return () => {
      ws.close();
    };
  }, [currencyPair]);

  const { bids, asks } = orders;
  const orderRows = (arr) =>
    arr &&
    arr.map((item, index) => (
      <tr key={index}>
        <td> {item[1]} </td>
        <td> {item[0]} </td>
      </tr>
    ));
  const orderHead = (title) => (
    <thead>
      <tr>
        <th colSpan="2">{title}</th>
      </tr>
      <tr>
        <th>Amount ({currencyArray[0]})</th>
        <th>Price ({currencyArray[1]})</th>
      </tr>
    </thead>
  );
  return (
    <div className="order-container">
      <table>
        {orderHead('Bids')}
        <tbody>{orderRows(bids)}</tbody>
      </table>

      <table>
        {orderHead('Asks')}
        <tbody>{orderRows(asks)}</tbody>
      </table>
    </div>
  );
};

export default OrderBook;

We import React, useState, and useEffect. If you have no idea about useState and useEffect I suggest you check the React documentation on hooks here

The next thing we do is to create our orders state, initialize our currencyPair to btcusd, split the currency pair into separate currencies and store in currencyArray.


 const [orders, setOrders] = useState([]);
 const currencyPair = 'btcusd';

 const currencyArray = currencyPair.toUpperCase().match(/.{1,3}/g);

Next, we want to make sure that when the component mounts and updates it fetches the data from the WebSocket API:

useEffect(() => {
    const subscribe = {
      event: 'bts:subscribe',
      data: {
        channel: `order_book_${currencyPair}`
      }
    };
    const ws = new WebSocket('wss://ws.bitstamp.net');

    ws.onopen = () => {
      ws.send(JSON.stringify(subscribe));
    };
    ws.onmessage = (event) => {
      const response = JSON.parse(event.data);
      setOrders(response.data);
    };
    ws.onclose = () => {
      ws.close();
    };

    return () => {
      ws.close();
    };
  }, [currencyPair]);

We initialize ws to be an instance of the WebSocket connection. Then we send a subscription message when the onopen event is called. The onopen event is an event that is fired whenever the WebSocket is open.

onmessage event is fired to get data back from the server and store it in our orders state.

Whenever the onclose event is fired we terminate the connection to the WebSocket with ws.close(). After that, we clean up so as not to have a memory leak.

return () => {
      ws.close();
    };

If you noticed we didn't import the OrderBook in the App component. We will do that now. So open the App component it should look like this:

App.js

import React from 'react';
import OrderBook from './OrderBook';
import './App.css';

const App = () => {
  return (
    <div>
      <h2>Crypto Order Book </h2>
      <OrderBook/>
    </div>
  )
}

export default App;

Then we add a little styling to App.css to beautify it

App.css

.order-container {
  display: flex;
  width: 100%;
}
table {
  border-collapse: collapse;
  width: 100%;
  text-align: center;
}
h1,
h2 {
  text-align: center;
}
td,
th {
  padding: 6px;
}
tr:nth-child(even) {
  background-color: #f2f2f2;
}

tr:hover {
  background-color: #ddd;
}

After that save and open your browser you should be seeing a data stream of currency orders.