Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

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

🚀 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 🚀
https://github.com/haoict/production-ready-webapp-boilerplate

expressjs modern-web nextjs node react redux server-side-rendering single-page-applications

Last synced: about 2 months ago
JSON representation

Host: GitHub
URL: https://github.com/haoict/production-ready-webapp-boilerplate
Owner: haoict
License: mit
Created: 2019-12-26T04:15:20.000Z (about 5 years ago)
Default Branch: master
Last Pushed: 2023-01-27T03:49:25.000Z (almost 2 years ago)
Last Synced: 2024-05-01T12:48:14.332Z (8 months ago)
Topics: expressjs, modern-web, nextjs, node, react, redux, server-side-rendering, single-page-applications
Language: JavaScript
Homepage: https://production-ready-webapp-boilerplate.vercel.app/
Size: 118 MB
Stars: 104
Watchers: 6
Forks: 18
Open Issues: 13
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE

Awesome Lists containing this project

README

# production-ready-webapp-boilerplate

[![CircleCI](https://circleci.com/gh/haoict/production-ready-webapp-boilerplate/tree/master.svg?style=svg)](https://circleci.com/gh/haoict/production-ready-webapp-boilerplate/tree/master)
[![CodeFactor](https://www.codefactor.io/repository/github/haoict/production-ready-webapp-boilerplate/badge)](https://www.codefactor.io/repository/github/haoict/production-ready-webapp-boilerplate)
[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)
[![License: MIT](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/haoict/production-ready-webapp-boilerplate/blob/master/LICENSE)

[![All Contributors](https://img.shields.io/badge/all_contributors-6-orange.svg?style=flat-square)](#contributors-)

* [About](#About)
* [Motivation](#Motivation)
* [Features](#Features)
* [Setup & Documentation](#SetupDocumentation)
* [Deploying on Production](#DeployingonProduction)
* [Directly run](#Directlyrun)
* [Docker support](#Dockersupport)
* [Advance](#Advance)
* [Storybook](#Storybook)
* [VR-testing (visual regression testing)](#VR-testingvisualregressiontesting)
* [Debug visual regression test](#Debugvisualregressiontest)
* [License](#License)
* [Contributors ✨](#Contributors)

## About

- 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
2. Put above files to public folder like this
```

```

## 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

```bash
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**

```bash
yarn vr-test:chrome src/components//stories/vr-test/index.spec.ts
```

**Smartphone**

```bash
yarn vr-test:chrome:sp src/components//stories/vr-test/index.spec.ts
```

**Both Desktop and Smartphone**

```bash
yarn vr-test src/components//stories/vr-test/index.spec.ts
```

**Run all tests**

```bash
yarn vr-test
```

#### Debug visual regression test

##### Mac

**Screen Sharing**

To debug visual regression testing

1. Open the `Screen Sharing`

```bash
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](https://github.com/davidnguyen179), you can check his work about React + Storybook + Visual Regression Testing at: [storybook-wdio](https://github.com/davidnguyen179/storybook-wdio)

## License

## Contributors ✨

Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):

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

_{David Nguyen}
💻 🐛 🤔 🔌

_{NGOC Duong Kim}
💻

_{Ben Lee}
💻 🔌

_{Pranab Mitra}
💻

_{NguyenThanhDat}
💻

This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!