- Setup & Documentation
- Deploying on Production
When Create React App first launched in July of 2016, it was considered the best way for beginners to get started with React. I find that it is too restrictive, and I find the ejection process to be painful, with resulting configuration being far to complex to easily tinker. Also, Create React App and almost boilerplate you find in Github is just Client-side rendering.
Next.js is a minimalistic React framework that runs on the browser and the server. It offers developers an easy way to get started, and as it uses React.js for templating, it's also a straightforward way for developers with React experience to get productive quickly.
The advantage of this approach is to be able to create rich user experiences in a uniform way, without compromising SEO (Search Engine Optimisation) factors that are key to good ranking on Google and other search engines.
This boilerplate makes it easier to get up and running with a well-structured Next.js.
This project provides a lot of features out of the box. Here's an overview of the included components and tools.
- Next.js - Minimalistic framework for single page with server-rendered React applications.
- React - Awesom library for building user interfaces. It is maintained by Facebook and a community of individual developers and companies.
- Express.js- A minimal and flexible Node.js web application framework that handles server-side rendering and integrates with Next.js.
- Less - CSS preprocessor, which adds special features such as variables, nested rules and mixins (sometimes referred to as syntactic sugar) into regular CSS.
- Axios - Promise based HTTP client. Integrated with axios-cache-adapter to cache the reponse to improve performance
- Docker - A tool designed to make it easier to create, deploy, and run applications by using containers.
- Storybook - An open source tool for developing UI components in isolation for React, Vue, and Angular. It makes building stunning UIs organized and efficient
- ESLint - The pluggable linting utility.
- Bundler Analyzer - Visualize the size of webpack output files with an interactive zoomable treemap.
- dotenv - Expose environment variables to the runtime config
- Clone the repository:
git clone https://github.com/haoict/production-ready-webapp-boilerplate.git
- Install the dependencies:
yarn install (or npm install if you prefer npm, remember to remove yarn.lock first)
- Start the development server:
(Change .env file for customize host and port)
- Build with production optimization
- Just Start
You can build and run production with docker
- Build docker image
docker build . -t production-ready-webapp-boilerplate
- Run it with your prefer port
docker run -d -p 3001:3001 production-ready-webapp-boilerplate
- Start the storybook:
- Start storybook
Follow above step
- Start Selenium of web drivers
docker run --name storybook-wdio-chrome -d -p 4444:4444 -p 5900:5900 selenium/standalone-chrome-debug
Bind for 0.0.0.0:5900 failed: port is already allocated comes, you can change that port to other number, like 5901 (
docker run --name storybook-wdio-chrome -d -p 4444:4444 -p 5901:5900 selenium/standalone-chrome-debug)
- Run test
yarn vr-test:chrome src/components/<component-name>/stories/vr-test/index.spec.ts
yarn vr-test:chrome:sp src/components/<component-name>/stories/vr-test/index.spec.ts
Both Desktop and Smartphone
yarn vr-test src/components/<component-name>/stories/vr-test/index.spec.ts
Run all tests
To debug visual regression testing
- Open the
Hostname: YOUR_MACHINE_IP:5900 (normally 127.0.0.1) Password: secret
- Run test
- Navigate to
Screen Sharingto see the step by step for running the test
Licensed under the MIT License, Copyright © 2020-present Hao Nguyen email@example.com
Thanks goes to these wonderful people (emoji key):
Nguyen Van Hao
NGOC Duong Kim
This project follows the all-contributors specification. Contributions of any kind welcome!