Last week I started building a Chrome extension for a product. The extension was built with React as a view engine to render a popup. So I thought to document it to make anyone getting started on this to get along.

In this blog, We will go through the process of building a Chrome extension using React. After this, you can add more functionalities to it very conveniently.

Link for Github Repository: https://github.com/onlyoneaman/chrome-extension-react

So Let’s get started.

Features of the extension

This extension can access your active tab and change the background colour of the page.

In this blog, we will set up a simple Rails API App from scratch. We won’t be going through building models or controllers here.

Installing Rails

Let’s install rails first, we will be using Rails 5.1 here for example, if you don’t have it run

gem install rails -v '~> 5.1'

And your rails version should be ready

Setting up a Rails API app

To install rails, run the command below it has got flags to skip the parts we won’t need in our project. Run it now we will pick it apart next:

rails new repo-backend -T --skip-spring -C -M -d postgresql --api

Whew! That’s a mouthful…

Cookies

Cookies are small data strings, stored directly in the browser. They are included in the HTTP protocol.

As a rule, the web-server sets cookies with the help of a response Set-Cookie HTTP header. After that, the browser adds them to each request to the same domain, using the Cookie HTTP header.
Cookies are used in many cases to store information and sensitive-data, the most common being authentication
During the sign-in, the server applies the Set-Cookie HTTP header in the response for setting a cookie with a specific “session identifier”.

1. The next time if the request is set to the same…

In this blog, we will be looking at how to work with cookies to setup authentication or session management in your web application.

Check this Session Management: Cookies vs localstorage for why we are using cookies to handle session management.

We can work with cookies via HTML or JS directly, but there are various npm packages to ease this out for us. We will use universal-cookies npm package for this.

1. Install Universal-Cookie npm package

npm install universal-cookie --save

2. Add this file content to your repository in a new file.

3. Now, you can call these functions anywhere from your repository.

a. After successful login response from the server, you have to set the authentication token in cookies, you can do that directly via server or…

Brief about localStorage

localStorage is a way to store data on the client’s computer. It allows the saving of key/value pairs in a web browser and it stores data with no expiration date. localStorage can only be accessed via JavaScript, and HTML5. However, the user has the ability to clear the browser data/cache to erase all localStorage data. Web storage can be viewed simplistically as an improvement on cookies, providing much greater storage capacity The available size is 5MB, which is more space to work with than a typical 4KB cookie. In addition with localStorage, the data is not sent back to the…

While working on an idea you want to invest most of your effort in building the business model and logic.

Generic Login Portal helps you in that way by giving you a head start on your frontend development. Just clone the repository on your system and change the API Url and boom!! You have a fully functional Login Portal.

A Login Portal is a basic and must to have to run your business and enable end-users to use your software. …

How to run rails server (or any server) on a VM?

1. Make sure Nginx is installed. Else follow this simple guide first — https://www.digitalocean.com/community/tutorials/how-to-install-nginx-on-ubuntu-18-04
2. Go to cd /etc/nginx/sites-available
3. Add below details. Replace your server_name and proxy_pass (Where your server is running) with correct values

server{
        server_name api.grambuddy.com; 
        location / {
                proxy_pass http://localhost:3002;
                proxy_http_version 1.1;
        }listen 80;
        listen [::]:80;
}

4. Create a symlink for it:

sudo ln -s /etc/nginx/sites-available/testapp /etc/nginx/sites-enabled/testapp

5. Restart Nginx:

sudo nginx -s reload

How to run service?

cd etc/systemd/system/<Create a new file - grambuddy-server.service> and enter the below details in it[Unit]
Description= instance to start grambuddy backend server
After=network.target[Service] …