Progressive web apps (PWA) allow users to add the web app to the home screen. The goal is to make a web app look like a native app. So, a PWA is responsive and adjusts well to appear good in any mobile device. Even when the device is offline, it should render some content. Optionally, it should respond to push notifications, sync the app content in the background and have the capability to access camera, location, etc.…
Tag: CRA
CRA or create-react-app helps to create a react app with just a single command. It has a package called react-scripts that can run an app in dev mode, run tests or build the app for production. It is quite useful for demos, prototypes and internal apps. But I still don’t like it as much. Here are the top 3 reasons why I still don’t like it in the year 2021!…
Istanbul is a code coverage utility for JavaScript apps. It is integrated with most unit-testing frameworks like Jest. It is also possible to produce an instrumentation build with a babel plugin named babel-plugin-istanbul. This works for any React app scaffolded with Webpack configuration. However, it does not work for create-react-app (CRA). CRA does not expose webpack.config or .babelrc file, files where we can add the istanbul plugin.…
Parcel is a zero configuration bundler for React apps. By default, it applies transforms like Babel and is capable of bundling styles and images. It is much easier and faster to scaffold a React app with Parcel compared to create-react-app or CRA. In this tutorial, I will provide step-by-step instructions to scaffold a React app using Parcel bundler. The tutorial helps to build demo React apps for learning or reproducing a bug.…
With earlier CRA version, it was not possible to use SASS out-of-the-box. But the new version 2 supports SASS without ejecting. This was one of my prime motivations to start using CRA version 2 for my hobby project.
The upgrade is smooth. I did pretty much everything in a single commit within 20 minutes.
How to upgrade
In package.json, replace the version of react-scripts to 2.0.3.…
Deployment should be easy. It is not as I found out today. There are various requirements to consider:
- Website should work with root domain as well as www domain. (example.com, www.example.com)
- Only HTTPS should be supported.
- Deploy to AWS EC2 instance with no other features like EBS or load balancer
- There is no need for docker containers or hosted CI like Jenkins
I came up with the above requirements based on some research which I will outline shortly.…
This is my attempt to help beginners learn React. React is a declarative UI framework. Component is the fundamental building block in React. It renders HTML based on data it has. React app contains a tree of component elements each rendering a little piece of HTML on the browser.
Analyse create-react-app
Install Node first and also Yarn which is a package manager (similar to NPM).…