• Stars
    star
    104
  • Rank 328,697 (Top 7 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created over 4 years ago
  • Updated over 1 year ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

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

production-ready-webapp-boilerplate

CircleCI CodeFactor PRs Welcome License: MIT

All 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 🚀

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
  1. Install the dependencies:
yarn install (or npm install if you prefer npm, remember to remove yarn.lock first)
  1. 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
  1. 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
  1. 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)

  1. 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)

  1. 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
  1. Run test
  2. 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!

More Repositories

1

tiktok-god

🎶 The best free & open source tweak for TikTok app on iOS
Logos
267
star
2

instagram-no-ads

📸 Tweak to remove ads on Instagram app for iOS!
Logos
136
star
3

messenger-no-ads

✨ The best free & open source tweak for Facebook Messenger & Messenger Lite app for iOS!
Objective-C
83
star
4

twitter-no-ads

🐦 Free & Open Source Tweak for Twitter app on iOS!
Logos
66
star
5

facebook-no-ads

👍 ❤️ 😂 😯 😢 😡 Free & Open source tweak Facebook app for iOS!
Logos
64
star
6

reddit-no-ads

Tweak to remove "Promoted" post on Reddit app for iOS!
Logos
41
star
7

haoict.github.io

My Github page
HTML
36
star
8

iconcert

Tweak to show remaining certificate time on app icon
Logos
30
star
9

microsoft-detection-bypass

iOS tweak for bypassing Jailbreak detection of Microsoft Enterprise Apps (Outlook, Teams, ...)
Makefile
18
star
10

the-shy

Logos
14
star
11

ios-tweak-development-scripts

Python
13
star
12

weather-plus

🌞 Free & Open source tweak to add date to each day row to Weather app
Logos
11
star
13

SimpleTerminal

Simple Virtual Terminal- updated for Anbernic RG35XX-Plus/H, TrimUI Smart Pro
C
11
star
14

libhdev-public

This is developer library for better preferences and useful utilities - iOS jailbreak.
Objective-C
10
star
15

lock-screen-without-button

📱🔐 Simple tweak to lock Screen without button. Super lightweight. No battery affect.
Makefile
9
star
16

camera-shutter-sound-disabler

Tweak to completely disable camera shuttle sound for iOS devices in some regions like Japan, Korea
Shell
8
star
17

time-in-a-bottle

A mod for Minecraft - This item allows you to accelerate the rate at which blocks tick, ported to 1.16 - 1.19
Java
7
star
18

counter

How many times have you unlocked your device? - Adds a CC Module which shows you how many times your device has been unlocked
Objective-C
7
star
19

next-dict

Next generation of web-app based dictionary 📚. Direct message me for databases
JavaScript
6
star
20

gmail-no-ads

✉️ Free & Open Source Tweak for Gmail app on iOS!
Logos
5
star
21

debian-repo-cloner

Cloner for Debian repositories
JavaScript
5
star
22

dictation-key-hook

😃 Emoji++ Tweak to hook dictation key and replace it with Emoji for iOS!
Logos
5
star
23

MusicBeQuiet

Pause Music At 0% Volume, Neat When Wearing Headphones
Logos
4
star
24

haoict

3
star
25

xgesture

iPhone X gestures for iPhone 5-8, minimalist code to not affect battery
Logos
2
star
26

searchable-book-fullstack

This repository is sunset, everything is client render, we now are migrating to nextjs to support SSR, new repo is named: epubvn
JavaScript
2
star
27

AmongLock

You were not the owner of this device
Objective-C
2
star
28

iPhoneLockedFix

Objective-C
2
star
29

crackerxi-searchbar

Logos
2
star
30

IntegratedSocialNetwork

C#
1
star
31

hook-hook

Logos
1
star
32

maps-in-java

a simple maps view in java
Java
1
star
33

distributed-system-project

Java
1
star
34

nbttool

A mod for Minecraft - to show items NBT (The Named Binary Tag (NBT) format is used by Minecraft for the various files in which it saves data.)
Java
1
star
35

next-dict-objc

Objective-C
1
star
36

searchable-book-crawler

Python
1
star
37

npm-stat-d3

JavaScript
1
star
38

tns

Jailbreak ios10
HTML
1
star
39

sawyergis

Automatically exported from code.google.com/p/sawyergis
Java
1
star
40

iDineSwiftUI

Swift
1
star
41

Lecture-ElevatorSimulator

Java
1
star
42

minecraft-forge-practice

Java
1
star
43

WP_project

PHP
1
star
44

storybook-wdio

TypeScript
1
star
45

settings-tweak-life

Open Settings app straight to tweaks section! - Clone from Cardboard Face
Makefile
1
star
46

WSNv2

Java
1
star
47

buildroot-r36s

CFW for R36S
Makefile
1
star
48

BusFinderUniversal

C#
1
star
49

pdf-resizer-python

Pdf Resizer Python is a simple tool to resize PDF files
Python
1
star