DEV Community: calebdeji

Automate Firebase cloud functions deployment with Github actions.

calebdeji — Sun, 04 Jul 2021 08:31:38 +0000

Deployment automation refers to the process that enables you to deploy your code to various environments at the occurrence of an event without human intervention. Deployment automation enables you to give little to no focus on the deployment process, hence saving you time that could be spent on other activities.

Firebase cloud functions is a serverless framework that lets you automatically run backend code in response to events triggered by Firebase features and HTTPS requests. You can read more about that here.

Github actions provide a workflow that can help carry out various actions such as build the code in your repository, deploy to your production or staging environment, run tests on your code before carrying out some crucial operations, and so on. You can read more about Github actions here

This article assumes that you as a reader have some experience with firebase cloud functions, npm installed on your terminal, a firebase project created, and your cloud functions defined in your firebase project.

To deploy any firebase cloud functions project, you need to be authenticated via Firebase CLI but since GitHub actions will solely be responsible for the deployment process, you need to generate an authentication token from Firebase CLI and save it as a secret in your repository settings.

To install Firebase CLI, open your terminal and run

npm install -g firebase-tools

To generate the authentication token, run

firebase ci:login

The command above opens your browser and asks you to log in to the Google account connected to your firebase project. Upon login, a new token will be generated on your terminal. Open your Github repository and go to the Settings tab, click on the Secrets pane, copy and save the token generated on your terminal as a new secret. Once that's done, click on the Action tab, and click on setup a workflow yourself.
Read and copy the following gist content to the new workflow file created.

If you have custom environment variables used in your project, you need to store the environment data. You can use the below workflow code

Thanks for reading! Feel free to drop suggestions and questions in the comment box 😊.

Optimise rendering of children tree subscribed to Context API

calebdeji — Mon, 14 Sep 2020 11:26:43 +0000

A few months ago, I got to develop a web application that required optimal state management in the sense that each component in the application needs to re-render only when changes are made to state data bound to the component. Thinking of the perfect architecture that seemed to fit the project, I came up with an architectural pattern which followed the rule stating that the app should be contained in a global state manager ( that holds data that rarely change such as authentication data) and also each route should have its own state manager ( Context API), hence to prevent unnecessary re-render whenever there's a change in data other routes.

This article assumes that you as a reader have some experience with state management using React. If you are new to React state management, I recommend that you check out this article by Kent Dodds before proceeding.

Notice how each route encompasses a state manager that contains the route component. Putting this kind of structure in place is particularly important for the sake of readability, scalability, and maintainability. It is easy to handle errors in each route’s state manager, and separation of concern actually makes development easy.

I completed the project and it seemed perfect but then I noticed that each component subscribed to each route state manager re-rendered whenever changes were made to data held by the manager. The following is an example of what I meant

This is cool, so what is the problem?

It works pretty well. However, the issue is that for every update made in the context data, all components that subscribed to the context API re-renders. We really do not want each expensive component subscribed to a particular context manager to re-render every time we update the state even though the data attached to the component didn't change. What shall we do to prevent this?

What's the solution to the problem then?

If we were using class-based components, we could easily prevent re-renders with the shouldComponentUpdate method or employ the use of pure React components that are made for issues like this but these are functional components. Don't be scared, we have a savior called useMemo. useMemo?? Ah Yes.

useMemo is a built-in React hook that returns a memoized value. It allows you recompute expensive functions only when one of the dependencies has changed

Note the following:

useMemo will only recompute the memoized value when one of the dependencies has changed. This optimization helps to avoid expensive calculations on every render. Remember that the function passed to useMemo runs during rendering. Don’t do anything there that you wouldn’t normally do while rendering. For example, side effects belong in the useEffect hook, not useMemo. You can read more on useMemo here.

How do we use useMemo in this kind of scenario? The answer to the “how” is shown in the code snippet below.

Note: Our components would still re-execute, but React wouldn't re-render the child tree if all useMemo inputs were the same.

This pattern helps us to solve the problem we have at hand - any child of each component that subscribed to a particular context API only re-renders when the necessary data attached to its useMemo changes.

Context API shouldn't be used as a global state manager that holds data that changes frequently for performance's sake, you can use Redux for that. Thanks for reading.

Feel free to drop suggestions and questions in the comments section below.

NextJS throws error on navigating from the page that imports a script in the head tag

calebdeji — Wed, 22 Apr 2020 06:11:53 +0000

NextJS throws error on navigating from the page that imports a script in the head tag

Apr 22 '20 Comments: 1 Answers: 0

I have been facing an issue with NextJS. I tried to import a CDN script on a particular page. It works on the first load but then throws an error whenever I navigate to another page, thereby making it unusable when navigating to the initial page.

import React, { useState,

…

Open Full Question

Question: How do I deal with environment variables in production?

calebdeji — Fri, 06 Dec 2019 00:09:36 +0000

So I was checking the source code (in browser) of some of my projects and I discovered that even though I used environment variables to store sensitive information I could still see the values when rendered in the browser, meaning that my values are injected during runtime, hence still makes my projects vulnerable. How do I deal with env variables in production so that no one will see the values when the page source is viewed?