🚀 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 🚀
MIT License
🚀 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 🚀
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!
This project provides a lot of features out of the box. Here's an overview of the included components and tools.
git clone https://github.com/haoict/production-ready-webapp-boilerplate.git
yarn install (or npm install if you prefer npm, remember to remove yarn.lock first)
yarn dev
Launch http://localhost:3001
(Change .env file for customize host and port)
yarn build
yarn start
You can build and run production with docker
docker build . -t production-ready-webapp-boilerplate
docker run -d -p 3001:3001 production-ready-webapp-boilerplate
public
|__ manifest.json
|__ images
|__ icons
|__ (icon png files)
|__ splashscreens
|__ (splashscreen image files)
yarn storybook
Launch http://localhost:9090
Follow above step
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
)
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
Screen Sharing
To debug visual regression testing
Screen Sharing
Hostname: YOUR_MACHINE_IP:5900 (normally 127.0.0.1)
Password: secret
Screen Sharing
to see the step by step for running the testBig thank to davidnguyen179, you can check his work about React + Storybook + Visual Regression Testing at: storybook-wdio
Licensed under the MIT License, Copyright © 2020-present Hao Nguyen [email protected]
Thanks goes to these wonderful people (emoji key):
This project follows the all-contributors specification. Contributions of any kind welcome!