And with it, 3 years of work.

Image for post
Image for post
Photo by Nick Jio on Unsplash

The year was 2018. We were about to graduate. We had a great idea which we thought would make us billionaires (spoiler: It didn’t).

But once a great mind said that a great idea itself doesn’t count. You need execution.

So needed to build the damn thing. And we had to do it fast. But we were a team of only 4 members.

So we all started doing our research (Google Search Mainly 👊) to find out the fastest and easiest way to build something that we could ship to millions of our customers overnight.

The answer was Firebase. We were promised great things. It was the perfect solution for us. …

In 5 Simple Steps

Image for post
Image for post
Photo by Guillaume Bolduc on Unsplash

If you are working in web development then probably you already know about the idea of containerization and how it’s so great and everything.

But when working with Docker image size is a great concern. It’s often over 1.43 GB for just the boilerplate project that we get from create-react-app

Today we will containerize a ReactJS application and learn some tricks about how we can reduce the image size and at the same time improve performance.

The tricks will be shown for ReactJS but it’s applicable for any kind of NodeJS application.

Step 1. Create Your Project

  • Simply go to your terminal and type
npx create-react-app…

A great framework for React developers

Image for post
Image for post
image credit : google

What is Next.js?

Next.js is a framework for React. It makes developing with React much cleaner and more efficient. In their documentation they define Next.js as: “the React Framework for Production”

And its features truly justified the claim. We will talk about them later.

Why Next.js?

Next.js gives you the best developer experience with all the features you need for production. Both hybrid static & server rendering, TypeScript support, smart bundling, route pre-fetching, and more. No configuration needed.

One bad (or good?) thing about React is that it is highly un-opinionated. It doesn’t force the developer to use some specific library for specific tasks.

But this comes with some cost. Most of the time you have to reach out to an external library or community support for even the most common features like routing, optimisation etc. …

Using firebase push notification

Image for post
Image for post
Photo by Luís Perdigão on Unsplash

Notifications are an important part of good user experience. You can keep your users updated about your product and offers by using notification properly .

Today we will see how we can receive notification in our ReactJS web application. I assume you already have a basic react application to follow along. We will use firebase for the notification part.

STEP 1 : Install Firebase Dependency

You should install required dependencies

yarn add firebase

Now go to your firebase console -> create a project -> grab your firebase projects configuration details . You can learn more from here

STEP 2: Add Service Worker to Project

To receive notification we need to have a service worker in our application . …

Image for post
Image for post
Photo by Scott Webb on Unsplash

Security is a very important for website now days . Customers don’t feel confident to provide their information in an unsecured website. If you have a React app served over S3 you can secure it very easily using AWS service.

Today we will use 2 services provided by AWS. CloudFront and ACM . Let’s Start. . .

STEP 1: Get a certificate from ACM

  • First we need a certificate from ACM (Amazon Certificate Manager)
  • We will apply for a new certificate ,The certificate must be from North Verginia region (us-east-1) as CloudFront doesn’t support other regions yet.
  • Along the way we will select option to request a public…

Image for post
Image for post
Photo by Fernando Hernandez on Unsplash

For hosting React applications there are many good options . AWS s3 is one of them and its very cheap and reliable too.

Deployment can be a real boring part of your day-to-day job. We should automate as much as possible.

Today we will see how we can create a continuous deployment pipeline using github actions that will automatically build and deploy our website to aws s3.

Pre Requisites

To Follow along with me i assume you already have

  • A github account
  • An AWS account
  • A ReactJS project

Let’s get started . . .

STEP 1 : Create S3 Bucket

  1. Login to AWS console
  2. Search S3 from your services and click Create…

Spoiler : Build libraries

Image for post
Image for post
Photo by Alfons Morales on Unsplash

To be a better React programmer I have a few tips for you …

  1. Write clean and small functional component
  2. DRY (Don’t repeat yourself)
  3. Separate logic from view
  4. Reduce dependency among components
  5. Organise your files and folders
  6. Use custom hooks for repeated tasks
  7. Ask others for advice or get review of your code

One glorious way to achieve all this at once and taking your skills to the next level what you can do is

Build and publish npm packages

This is applicable for almost any technology. First it feels like a daunting task for beginner or mid-level developers . We see many awesome libraries in our day to day task but we don’t often feel that we can build that kind of stuff by ourself. …

Use Linter and Formatter to make your life easy

Image for post
Image for post
Photo by Clément H on Unsplash

Every developer has his own style of coding. When you start working on some project with several other developers you may spend a good amount of time just re-structuring the code written by others. It can cost you valuable working hour. So it’s important to enforce consistent styling on a project.

One easy way of doing this is to use Linters. Linters are static checker of your code. It can format your code and find some common errors while writing code.

We will learn to use 2 libraries to make our life easier. …

Image for post
Image for post
Photo by RKTKN on Unsplash

So you have built an awesome react application. How can you show it to people? A good thing about react is it generates static assets . So you can serve it just like any other static website.

Today we will see how we can serve our react app using nginx in ubuntu server. NGINX is a powerful tool which we can use with react to levarage its awesomeness.

Our target server can be any ubuntu server instance like EC2 Instance in AWS or a Droplet in Digital ocean or even your local machine.

There are tons of tutorial on how you can setup your own server in aws or digital ocean. I am not going over that . We will keep our focus on the setup of nginx with react. …

Image for post
Image for post
credit : unsplash

When working in a react project generally we need to store some information about the specific environment that we are working with. For example we may have separate BASE_URL for development , test and production servers.

But it is not practical to change the endpoint manually inside code every time when we need to deploy the app for separate environment. It may create disaster if anyone forget to change the endpoint for production and our production app is deployed with development server .

What’s the solution ?

We have a default environment variable named NODE_ENV in react applications. …


Mohammad Faisal

Passionate about Clean code and SOLID Architecture

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store