DEV Community: Tayyib Cankat

How to persistently store state in React? [usePersist]

Tayyib Cankat — Wed, 01 Jun 2022 18:20:59 +0000

useState is one of the basic hooks in React. But you can not keep your state persistent with useState. When the user refreshes the page, the state is gone. So How do we keep persistent data/state in React? We can write a custom hook that persists data.

Show Me the Code

usePersist.ts

import { useCallback, useState } from "react";

interface UsePersistProps<T> {
    stateName: string;
    initialValue: T;
}

const usePersist = <T>({ stateName, initialValue }: UsePersistProps<T>): [T, (value: T) => void] => {
    const name = `persist/${stateName}`;

    const getFromStorage = <T>(name: string, defaultValue?: T) => {
        try {
            const val = JSON.parse(localStorage.getItem(name) + "");
            if (val !== null) {
                return val;
            } else {
                localStorage.setItem(name, JSON.stringify(defaultValue));
            }
        } catch {
            return defaultValue;
        }
    };

    const [state, setState] = useState<T>(getFromStorage<T>(name, initialValue));

    const setValue = useCallback(
        (value: T) => {
            localStorage.setItem(name, JSON.stringify(value));
            setState(value);
            console.log(name, value);
        },
        [name]
    );

    return [state, setValue];
};

export default usePersist;

Usage

const [persistedState, setPersistedState] = usePersist<string>({
    stateName: "myPersistedState",
    initialValue: "Hello World",
});

How?

OK, the code above might look confusing. I might have messed up, or that may be the ideal solution for this specific task. You be the judge.

The custom hook saves the state in localStorage and returns it when needed. This is basically it.

Let's rewrite it step by step to understand it better.

Step 1

We have to give a name to save the data to the localStorage. We also may want to give an initial value to the custom hook like we do for useState. Like in useState, we also may want to know the type of the data that we are going to save. To do this, we can use generics.

interface UsePersistProps<T> {
    stateName: string;
    initialValue: T;
}

const usePersist = <T>({ stateName, initialValue }: UsePersistProps<T>) => {
    const name = `persist/${stateName}`;

    const setValue = (value: T) => {};
};

export default usePersist;

Step 2

Let's start writing the set logic. First, let's keep the data in useState.

import { useState } from "react";

interface UsePersistProps<T> {
    stateName: string;
    initialValue: T;
}

const usePersist = <T>({ stateName, initialValue }: UsePersistProps<T>) => {
    const name = `persist/${stateName}`;
    const [state, setState] = useState<T>(initialValue);
};

export default usePersist;

Onto the set logic. As you might have guessed, we save the data to the localStorage. But I also want to save the data to the useState. This way, we won't have to read the data from the localStorage to return the data.

const setValue = (value: T) => {
    localStorage.setItem(name, JSON.stringify(value));
    setState(value);
};

It's pretty straightforward, right? However we will have an infinite render loop issue if we don't wrap this inside useCallback. React doesn't know if the setValue function will change or not. But we do. We might skip adding the function to the dependency array when we use it inside useEffect but eslint will annoy us.

Further readings:
https://reactjs.org/docs/hooks-reference.html#usecallback
https://github.com/facebook/react/issues/14920

Let's wrap it inside the useCallback hook and pass the name dependency even we know that we won't change the name.

const setValue = useCallback(
    (value: T) => {
        localStorage.setItem(name, JSON.stringify(value));
        setState(value);
    },
    [name]
);

Step 3

Let's write the get logic.

const getFromStorage = () => {
    try {
        const val = JSON.parse(localStorage.getItem(name) + "");
        if (val !== null) {
            return val;
        } else {
            localStorage.setItem(name, JSON.stringify(initialValue));
        }
    } catch {
        return initialValue;
    }
};

Basically, we are trying to get the data from the localStorage. If the data does not exist, then we save it to the localStorage. The code is wrapped inside the try-catch block just in case if the data cannot be parsable. If happens so, the code returns the initialValue.

Step 4

Let's finalize the code

Put the getFromStorage function above the useState.
Pass the getFromStorage() function call to the useState as so

const [state, setState] = useState<T>(getFromStorage());

Now it should look like this

import { useCallback, useState } from "react";

interface UsePersistProps<T> {
    stateName: string;
    initialValue: T;
}

const usePersist = <T>({ stateName, initialValue }: UsePersistProps<T>) => {
    const name = `persist/${stateName}`;
    const getFromStorage = () => {
        try {
            const val = JSON.parse(localStorage.getItem(name) + "");
            if (val !== null) {
                return val;
            } else {
                localStorage.setItem(name, JSON.stringify(initialValue));
            }
        } catch {
            return initialValue;
        }
    };

    const [state, setState] = useState<T>(getFromStorage());

    const setValue = useCallback(
        (value: T) => {
            localStorage.setItem(name, JSON.stringify(value));
            setState(value);
        },
        [name]
    );
};

export default usePersist;

Now let's return the set and get functions like React does for useState.

return [state, setValue];

Now the final code should be as such

import { useCallback, useState } from "react";

interface UsePersistProps<T> {
    stateName: string;
    initialValue: T;
}

const usePersist = <T>({ stateName, initialValue }: UsePersistProps<T>): [T, (value: T) => void] => {
    const name = `persist/${stateName}`;

    const getFromStorage = () => {
        try {
            const val = JSON.parse(localStorage.getItem(name) + "");
            if (val !== null) {
                return val;
            } else {
                localStorage.setItem(name, JSON.stringify(initialValue));
            }
        } catch {
            return initialValue;
        }
    };

    const [state, setState] = useState<T>(getFromStorage());

    const setValue = useCallback(
        (value: T) => {
            localStorage.setItem(name, JSON.stringify(value));
            setState(value);
        },
        [name]
    );

    return [state, setValue];
};

export default usePersist;

Usage

Let's use it inside a component

function App() {
    const [persistentState, setPersistentState] = usePersist<string>({
        stateName: "myState",
        initialValue: "Hello World",
    });

    useEffect(() => {
        setPersistentState("Hello, I'm persistent");
    }, [setPersistentState]);

    useEffect(() => {
        console.log(persistentState);
    }, [persistentState]);

    return (
        <>
            <p>{persistentState}</p>
        </>
    );
}

You can verify it working by checking your developer console. You might also want to delete the entry in your localStorage.

You can also use the usePersist in Context API.
I am using it for changing between the dark mode and the light mode.

import { usePersist } from "hooks";
import { createContext, FC, useEffect, useState } from "react";
interface DarkModeContextState {
    darkMode: boolean;
    setDarkMode: (darkMode: boolean) => void;
}

const contextDefaultValues: DarkModeContextState = {
    darkMode: true,
    setDarkMode: () => {},
};

export const DarkModeContext = createContext<DarkModeContextState>(contextDefaultValues);

const DarkModeProvider: FC = ({ children }) => {
    const [persistedDarkMode, setPersistedDarkMode] = usePersist<boolean>({
        stateName: "darkMode",
        initialValue: contextDefaultValues.darkMode,
    });
    const [darkMode, setDarkMode] = useState<boolean>(persistedDarkMode);

    useEffect(() => {
        setPersistedDarkMode(darkMode);
    }, [darkMode, setPersistedDarkMode]);

    return (
        <DarkModeContext.Provider
            value={{
                darkMode,
                setDarkMode: (val: boolean) => {
                    setDarkMode(val);
                },
            }}
        >
            {children}
        </DarkModeContext.Provider>
    );
};

export default DarkModeProvider;

Conclusion

Thanks for reading so far.

You might ask

"Why don't you use a package to handle this?".
We can, of course. But, I wanted to give an idea of how to solve a pretty basic problem. I prefer understanding the solution that I am using.

"Why don't we set to and get from the local storage right inside the component?"
That should work but I wanted to go with a more elegant solution.

If you have any more questions or any feedback, please let me know. Hopefully this might be a solution to your problem and/or give you an insight how to write a custom hook.

How to CI/CD using PM2 for your Node.js project

Tayyib Cankat — Mon, 15 Feb 2021 20:06:02 +0000

Why?

You have a Node.js project in your local machine but you don't know how to deploy it to your remote server or you use old fashioned way by copying the contents from your computer to the remote server using FTP?

Well, you can automate this process and make your life easier using PM2 *insert hooray gif here*

What?

PM2 is a Process Manager for Node.js. It's like Task Manager in Windows and Activity Monitor in macOS.

You can -including but not limited to- manage your application, scale, start and stop. But the most important feature we want is deploying.

In this post, we will learn how to deploy our application to our remote server and run/build it with a single console command.

How?

Step 1: Create a Project

First, we obviously need a project.
We create a folder and cd into it.

mkdir pm2-deploy; cd pm2-deploy

Then we initialize the folder as a node project.

npm init -y

We can then go ahead and install express to serve static files in node environment.

npm i express

And we need to create a JS file to write our code that will serve the folder public which we also need to create.

I have created index.js in the root directory. You can rename it whatever you want but don't forget that you need to change the main field in the package.json file also.

We also need an HTML file to be served in that public folder.

Your file structure now looks like this:

Here's my index.js

express is serving a static folder named public and its contents in port 3000; Nothing fancy here.

In index.html we do nothing special.

Now we can use

npm start

We should see the console.log output which is PM2 Project is now live @ localhost:3000.

We can check if that's working by going to that port. Go to localhost:3000 in the browser, If you see YAY! that's great.

Step 2: Install PM2 globally

We need to install PM2 npm package globally. We can install it by using

npm i -g pm2

Now onto Step 3!

Step 3: Initialize git

We cannot have a CI/CD without a version control system, right? So we need to push our project to a git service. I will use Github for that.

When you create a git repo you will see the necessary instructions on how to push an existing project.
But here are the necessary commands, just in case:

git init
git remote add origin git@github.com:<your_github_username>/<your_repository_name>.git
git add .
git commit -m "Initial Commit"
git branch -M main
git push -u origin main

Note: I strongly recommend using SSH Connection instead of using HTTPS for Github. Your life will get better and securerer :)

Step 4: Configuring the remote machine

In this step, I won't go into the details of how to create/reserve a virtual remote machine but keep in mind that I am using Ubuntu on an EC2 (AWS) machine.

First, we need to connect to the remote machine using SSH

ssh -i path_to_key_file remote_username@remote_ip

I assume you have already done nvm, npm installations, if not you can go ahead and check the nvm repo here: https://github.com/nvm-sh/nvm#installing-and-updating

One important thing to do here. We need to move the lines that were added by nvm to our .bashrc file to the top. Your system may be using .bash_profile or something else. Just pay attention to the output of the nvm installation.

These are the lines we need to move. Open your favorite editor and move them to the top of the file.

export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"  # This loads nvm
[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"  # This loads nvm bash_completion

After saving and exiting the file we can install PM2 here too as we did in Step 2.

npm i -g pm2

After the installation

pm2 startup

will give you a simple instruction on how to make PM2 start automatically every time your remote system reboots. I strongly recommend doing that.

Now that we installed PM2, we need to create an SSH key and add it to Github.

In the remote machine, you can go ahead and type

ssh-keygen -t ed25519 -C "<your_github_email>"

Further reading on how to create ssh key https://docs.github.com/en/github/authenticating-to-github/generating-a-new-ssh-key-and-adding-it-to-the-ssh-agent

The keygen will ask you the name of the key. If you want to change it (I strongly advise you not to do that) you need to give the full path here.

You may just hit Enter when asking for password.

After creating the key we need to copy the contents of the public key.

cat /home/ubuntu/.ssh/id_ed25519.pub

Go ahead and copy the text you see starting with ssh- and ending with your e-mail (included).

Then go to https://github.com/settings/keys while logged in to Github then click New SSH Key button. You can give a title and paste the copied text into the key field.

We now have given authorization to our remote machine to connect to our Github. But we need to connect to Github just once to mark the connection trusted in our remote machine. To do that we can clone the repository into the remote machine.

git clone git@github.com:T410/pm2-deploy.git

Of course, it will be your username and your repo name.
The console will ask you if you want to continue connecting. Type yes end hit Enter.

Note: We cloned the repo into the user folder. /home/ubuntu for me. Now the full project path is /home/ubuntu/pm2-deploy. We will use this path to update the ecosystem.config.js file in the next step.

And now we are good to close the remote connection to the server.

Step 5: Configuring the ecosystem.config.js file

Now that we have a remote server up&running and have already pushed the project into our repository, we need to properly configure the ecosystem.config.js file to tell PM2 where our project is, what to do with that, and where to push that.

The file will look like this:

Notice there are 2 sections we are exporting:

apps
deploy

The name field in the apps section is the name of our project which will be shown in PM2 process list.

The script field is the script that PM2 will run when we deploy the project to the remote server. In this case, it will be the same as the main field in the package.json file.

The rest of the fields are pretty self-explanatory.

user is the username that you use to connect to the remote server using SSH
host is the IP of the remote server
path where do you want your project to be deployed in your remote server? Remember we already cloned the repo into our remote server. We can go ahead and write that path here
repo is the repository URL in a format like git:github.com:/user/repo.git
ref is the reference branch. Which branch we want the remote server to pull
key is the LOCAL PATH of the key that we use to connect our machine using SSH
"post-deploy" takes commands which will be run at the remote machine after pulling the repo from Github

Step 6: Deploying

We have configured our machine and PM2. We can now deploy our project to the remote machine.

Before deploying we need to commit and push the changes we have made. After that, for the first run, we need to tell PM2 that it needs to setup the project.

pm2 deploy ecosystem.config.js production setup

With this command PM2 connects to the remote, clones the repo from Github. We can now deploy the project.

pm2 deploy ecosystem.config.js production

Yay!

Now you are asking yourself: Now what?
Well, we didn't set up a server like nginx but we can test if the project is working or not with curl. Of course, we need to connect to the remote machine before doing that.

curl http://localhost:3000

If you see the index.html output on the screen that's great news! You have done it!

And also you can list the apps PM2 running with this command

pm2 ls

Conclusion

We made great progress here. We learned how to deploy our project with just one command.

Here's the sample Repo:

T410 / pm2-deploy

Description

This is a sample project that demonstrates how to configure ecosystem.config.js file for PM2 made for this tutorial https://dev.to/t410/how-to-ci-cd-using-pm2-for-your-node-js-project-404f

View on GitHub

I know I didn't tell you how to install nginx and serve the port we are using for our project but I will definitely do that in the near future and update here.

If you have any issues with anything, feel free to tell me what's wrong on the comments section.

How to deploy SSL Certificate [nginx]

Tayyib Cankat — Thu, 11 Feb 2021 22:56:12 +0000

So you want to install/deploy an SSL Certificate to your website? Great! In this post, you can see how to do so with simple steps with 2 options.

Option 1: Use Certbot (Easy one)

You can see the instructions based on your setup here
https://certbot.eff.org/instructions

Option 2: Manual Setup (A little bit hard one)

I will assume you are using a UNIX based system (Linux, macOS, etc.)

Requirements

A live website
SSH access to your server
nginx server running in your server
SSL Certificate

Step 1: Connect to your server with SSH

Using the i flag lets us pass the path of the identity file to access the remote server

You can connect to your server
ssh -i path_to_pem_file username@server_ip

In my case
ssh -i ~/.ssh/pem_file ubuntu@my_server_ip

Step 2: Copy SSL files to your server using SCP

SCP command will help us copy from one computer to another using SSH protocol. We need to copy the crt and the key file to the remote server.
Notice the i flag here. It does the same job

scp filename remote_username@server_ip:/home/user
user at the end of the line here represents the folder of the user. This is ubuntu in my case. You can change the path whatever you want if remote_username has access to those paths.

Step 3: Configure nginx

We have copied the crt and the key to the remote server. Great! Now we need to configure nginx to listen 443 (HTTPS).

First I suggest you move the crt and key files (In the remote server of course) to a different location other than your /home/user folder. You can move them into /etc/ssl/. But you will need sudo access to do that operation since accessing system paths require to have it.

Go into the path your files are located in. I am assuming yours are in /home/user.

cd /home/user
Again, user here is the username in the remote server. This is ubuntu in my case.

By the way, you may already in the correct location. You can see the current location you are in by using pwd command.

Move the files to /etc/ssl
We need sudo access to do this operation
sudo mv filename /etc/ssl
Go into nginx folder
cd /etc/nginx
Edit the nginx.conf file using a text editor
You can use nano for that.
We need sudo access for this operation too.
sudo nano nginx.conf

Now you are looking at the content of nginx.conf.
Look down a little bit and you will see this block

##
# SSL Settings
##

Notice the # sign. Those are for commenting out the lines.

Just below that block, you need to tell nginx where our crt and key files are located.

##
# SSL Settings
##

ssl_certificate /etc/ssl/ssl-bundle.crt;
ssl_certificate_key /etc/ssl/ssl.key;

My files are named ssl-bundle.crt and ssl.key. If you have different filenames you need to change them of course.

You can go ahead and close nano by hitting ctrl+X. It will ask you Save modified buffer? which you can answer it by hitting Y for yes or X for no. Or you can hit ctrl+C to cancel the operation.

We need to hit Y for nano to save the file.

Step 4: Restarting nginx

Now we need to restart nginx to see if it gives any error. Again, sudo access...
sudo service nginx restart

If you see nothing happens, that's great. But if you see lines like this

Job for nginx.service failed because the control process exited with error code.
See "systemctl status nginx.service" and "journalctl -xe" for details.

it means we made something wrong.

We can see what's wrong with nginx by typing this in the console
sudo nginx -t

Which may tell us some info like this

nginx: [emerg] cannot load certificate key "/etc/ssl/ssl.keya": BIO_new_file() failed (SSL: error:02001002:system library:fopen:No such file or directory:fopen('/etc/ssl/ssl.keya','r') error:2006D080:BIO routines:BIO_new_file:no such file)
nginx: configuration file /etc/nginx/nginx.conf test failed

From the info I understand that I made a typo. I typed ssl.keya instead of typing ssl.key. Fixing the typo and restarting nginx fixes the problem.

Step 5: Making nginx to listen to 443 for your site

This is the final step. We need to change the port that nginx listens to from 80 to 443.

There is a folder in the nginx folder which is named sites-available which you should already know because I am assuming you have an already live website. Maybe I need to create a tutorial named How to create and deploy a website.

Go into sites-available folder We are currently in /etc/nginx. If you are not you can use this command cd /etc/nginx. Now we can use cd sites-available.

There should be a file for your website. Let's call it mysite

We need to configure the file by using nano again.

Edit the file

sudo nano mysite
There is a block like this. You can tell that nginx is listening port 80 (HTTP) for your site. We need to change that into 443 (HTTPS).

server {
    listen 80;
...

Changing the block above to below is what we desire.

server {
    listen 443 ssl;
...

And we can exit the editor by hitting ctrl+X and then Y.

Step 6: We need to restart nginx

sudo service nginx restart
If you don't see any errors then you are good to go!

Step 7: Check your site

Now you can check your site if the certificate is correctly installed or not. And let me know in the comments if you have any issues.

Some Notes

The console commands were used in Ubuntu 20.04.1 LTS (GNU/Linux 5.4.0-1028-aws x86_64) in AWS EC2. Yours may be different. So maybe some commands will be different too.
Typing the paths of the crt and the key files paths directly into the nginx.conf file allows you to have only 1 domain. If you have a wildcard SSL Certificate you still have 1 domain but you can have multiple subdomains. So if you want to have more than 1 domain you can define the certificate paths in the respective files under sites-available folder. Not in global nginx.conf file.
If I made any typos or did not use best case usages please let me know so I can update this document.

Error: Request failed with status code 400 [expo-cli]

Tayyib Cankat — Wed, 15 Jan 2020 18:31:42 +0000

TL; DR

Logout from expo-cli and log in again

Intro

Yesterday I had an issue with expo-cli. I was testing some stuff on my phone and everything was great. I have used expo start to preview. After a few moments I kept expo-cli running and put my computer to sleep. A few hours later I've tried to preview the project following the same steps, which threw the error shown here

The issue seemed to be caused by axios. I have tried everything. I mean everything.
Removed all api calls, no help.
Reinstall expo, no help.
Reinstall expo-cli, no help.

I have almost started pulling my hair and then out of thin air I have come up with this idea which is explained down below.

I am not sure but I think this error was caused because I have left the expo-cli open.

I won't dive deep into the details here because I am mostly certain that this error is because of expo-cli itself.

Well, I have found some solutions for the issue but non of them worked for me.

Here's how I solved the issue

Solution

Just log out from expo-cli and log in again. That's just it

DEV Community: Tayyib Cankat

How to persistently store state in React? [usePersist]

Show Me the Code

How?

Step 1

Step 2

Step 3

Step 4

Usage

Conclusion

How to CI/CD using PM2 for your Node.js project

Why?

What?

How?

Step 1: Create a Project

Step 2: Install PM2 globally

Step 3: Initialize git

Step 4: Configuring the remote machine

Step 5: Configuring the ecosystem.config.js file

Step 6: Deploying

Conclusion

T410 / pm2-deploy

Description

How to deploy SSL Certificate [nginx]

Option 1: Use Certbot (Easy one)

Option 2: Manual Setup (A little bit hard one)

Requirements

Step 1: Connect to your server with SSH

Step 2: Copy SSL files to your server using SCP

Step 3: Configure nginx

Step 4: Restarting nginx

Step 5: Making nginx to listen to 443 for your site

Step 6: We need to restart nginx

Step 7: Check your site

Some Notes

Error: Request failed with status code 400 [expo-cli]

TL; DR

Intro

Solution

More detailed approach of the solution