The example I am going to use:
What is a white-label app? According to Wikipedia:
A white-label product is a product or service produced by one company (the producer) that other companies (the marketers) rebrand to make it appear as if they had made it.
To build a white-label app, it needs some customization, it is not just simply change the logo or font style. However, it also could not be infinitely customizable; otherwise, it is building 2 completely different apps.
This blog shows how to create a white-label react application. The goal of this white-label react app that satisfies the below requirements:
Unit testing is critical for development, no matter how small the app is. This article blog will go through how I wrote unit tests for an example app.
It’ll explain some of my unit-testing strategies for different parts of a React app:
Nx is a set of dev tools for monorepos. It provides a lot of things out of the box, such as ESLint and Jest integration.
However, there are still additional setups I usually add to my Nx project. Here are still things I would like to do as boilerplate:
My Nx GitHub repo: https://github.com/xiongemi/white-label-airline
For Nx, it already installed a few ESLint plugins and provides a lot of ESLint rules. However, I still prefer to add ESLint rules to sort imports and audit accessibility. …
Adding ESLint rules to sort imports statements and audit accessibility will ensure code consistency across the team and catch some errors early.
This blog shows how to:
It assumes that your project already has ESLint installed.
This is the GitHub project I got with these ESLint rules added: https://github.com/xiongemi/white-label-airline.
Even though ESLint has this
sort-imports rule (https://eslint.org/docs/rules/sort-imports); however,
--fix will not reorder automatically for multiple lines.
However, we could use library eslint-plugin-import that allows
--fix. To install:
npm install eslint-plugin-import --save-dev# yarn
yarn add eslint-plugin-import --dev
Add the below line to your
If you have an Nx React project on GitHub, do you want to have free hosting of this app? This blog shows how to deploy an Nx React app to GitHub pages. GitHub pages provides free hosting for static pages for a GitHub repository. I am going to show you how to:
GitHub Repo: https://github.com/xiongemi/white-label-airline
GitHub Pages: https://xiongemi.github.io/white-label-airline
I am a developer in Toronto right now and I mostly use Angular Material. I think NG-ZORRO is definitely popular in China. I always want to try it out so I have created a simple project using this library. This blog describes my developer experience using NG-ZORRO for the first time.
Below is a website I create using NG-ZORRO, it is a discussion…
Problem I got: form handling is definitely a difficult task in Angular, or in any front-end frameworks. There are limitless interactions users could do with a form. I need to validate, show errors, and keep track of form status.
This blog will go through steps to create a pretty complex checkout form in Angular: https://xiongemi.github.io/angular-form-ngxs.
Github repo: https://github.com/xiongemi/angular-form-ngxs.
This blog will show my solution to these problems:
We don’t need to re-invite the wheels, we are still using HTML form. …
As an Angular developer, I have been working with NgRx for a while. However, recently I keep hearing about this state management NGXS. I heard many good things about this library and one pro of this library is that it has a better “developer experience”. As a developer, I want to try it out to see what kind of experience this library would give me and see whether it could “convert” me.
I have create this sample project using NGXS:
It is a simple web app that allows you to search a superhero by name, race and gender: https://xiongemi.github.io/superhero-search-engine/.
For almost every Angular project, I got asked to solve this question. This is an open-ended question that does not have the right answer, more like a trial and error experiment.
This blog will show you some tools and tricks that I used to improve your app performance.
It is very important to measure a benchmark of the performance metrics. For example:
When I tweak our apps for better performance, I need to find out whether it would be worthy to implement those changes. …