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. …
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.
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.
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.
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
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.
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
To receive notification we need to have a service worker in our application . …
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. . .
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.
To Follow along with me i assume you already have
Let’s get started . . .
Spoiler : Build libraries
To be a better React programmer I have a few tips for you …
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
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. …
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. …
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 .
We have a default environment variable named NODE_ENV in react applications. …