production-ready-webapp-boilerplate

• About
• Motivation
• Features
• Setup & Documentation
• Deploying on Production
  • Directly run
  • Docker support
• Advance
  • Storybook
  • VR-testing (visual regression testing)
    • Debug visual regression test
• License
• Contributors ✨

About

🚀 A well-structured production ready modern web application boilerplate (Single Page Application with Server Side Render to boost SEO). With Next.js, React, Redux, Express.js, Less, Axios, Request Caching, EnvConfig, Storybook, Workbox for PWA and more 🚀

• Demo: https://pokemon.haoict.co
• Demo Storybook: https://storybook.haoict.co

Motivation

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.

Happy coding!

Features

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.
• Redux - A predictable state container for JavaScript apps.
• Express.js- A minimal and flexible Node.js web application framework that handles server-side rendering and integrates with Next.js.
• PWA Support - Integrated Workbox for Progressive Web App support
• 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.
• Jest - Javascript testing framework , created by developers who created React.
• Storybook - An open source tool for developing UI components in isolation for React, Vue, and Angular. It makes building stunning UIs organized and efficient
• Babel - The compiler for next generation JavaScript.
• ESLint - The pluggable linting utility.
• Bundler Analyzer - Visualize the size of webpack output files with an interactive zoomable treemap.
• Jest - Javascript testing framework , created by developers who created React.
• dotenv - Expose environment variables to the runtime config

Setup & Documentation

1. Clone the repository:

git clone https://github.com/haoict/production-ready-webapp-boilerplate.git

2. Install the dependencies:

yarn install (or npm install if you prefer npm, remember to remove yarn.lock first)

3. Start the development server:

yarn dev

Launch http://localhost:3001

(Change .env file for customize host and port)

Deploying on Production

Directly run

1. Build with production optimization

yarn build

2. Just Start

yarn start

Docker support

You can build and run production with docker

1. Build docker image

docker build . -t production-ready-webapp-boilerplate

2. Run it with your prefer port

docker run -d -p 3001:3001 production-ready-webapp-boilerplate

PWA support

Setup

1. Go to https://app-manifest.firebaseapp.com/ to create manifest.json and icons bundle
2. Go to https://appsco.pe/developer/splash-screens to create splash screen images
3. Put above files to public folder like this

public
|__ manifest.json
|__ images
    |__ icons
        |__ (icon png files)
    |__ splashscreens
        |__ (splashscreen image files)

Advance

Storybook

1. Start the storybook:

yarn storybook

Launch http://localhost:9090

VR-testing (visual regression testing)

0. Start storybook

Follow above step

1. Start Selenium of web drivers

docker run --name storybook-wdio-chrome -d -p 4444:4444 -p 5900:5900 selenium/standalone-chrome-debug

if error 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)

2. Run test

Desktop

yarn vr-test:chrome src/components/<component-name>/stories/vr-test/index.spec.ts

Smartphone

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

yarn vr-test

Debug visual regression test

Mac

Screen Sharing

To debug visual regression testing

1. Open the Screen Sharing

Hostname: YOUR_MACHINE_IP:5900 (normally 127.0.0.1)
Password: secret

2. Run test
3. Navigate to Screen Sharing to see the step by step for running the test

Big thank to davidnguyen179, you can check his work about React + Storybook + Visual Regression Testing at: storybook-wdio

License

Licensed under the MIT License, Copyright © 2020-present Hao Nguyen [email protected]

Contributors ✨

Thanks goes to these wonderful people (emoji key):

Nguyen Van Hao 📖 💻 🐛 🤔 🎨 🌍 👀 🔌 🚇

David Nguyen 💻 🐛 🤔 🔌

NGOC Duong Kim 💻

Ben Lee 💻 🔌

Pranab Mitra 💻

NguyenThanhDat 💻

This project follows the all-contributors specification. Contributions of any kind welcome!