/template-web

⭕ Template Web • Quick starter kit project using React and Redux

Primary LanguageJavaScriptGNU Affero General Public License v3.0AGPL-3.0

⭕ Template Web

Template Web is a quick starter kit project to build a complete web app using React and Redux.

Website Netlify Status License

The complete list of all features are located at azobu-projects/template or live on template.azobu.com

Table of Contents

Repositories

You should clone all of the required repositories:

Tech Stack

All the frontend/web dependencies sorted by priority:

  • Git — Distributed version control system
    • GitHub — Provides hosting for software development and version control using Git
  • JavaScript — The primary programming language
    • Node.js — JavaScript runtime environment and package manager
    • npm, Yarn — JavaScript runtime environment and package manager
  • REST API — REpresentational State Transfer, architectural style for distributed hypermedia systems
  • React — JavaScript library for building user interfaces
  • Redux — Predictable state container for JavaScript apps
  • React Redux — Official React binding for Redux
  • React Router — Declarative routing for React
  • React Hook Form — Simple React forms handling and validation
  • Connected React Router — Redux binding for React Router v4
    • query-string — Parse and stringify URL query strings
  • Redux DevTools Extension — Tools for debugging Redux state changes
  • Redux Logger — Logger for Redux
  • Redux Thunk — Redux middleware for asynchronous actions with Thunk
  • React Helmet Async — Thread-safe Helmet for React 16+
  • React-GA — React Google Analytics Module
  • CSS-in-JS — Pattern which CSS is composed using JavaScript
    • xstyled — Consistent theme based CSS for styled-components and emotion
    • Emotion — Library designed for writing CSS styles with JavaScript
  • Axios — Promise based HTTP client for the browser and Mode.js
  • JSON Web Token (JWT) — Compact URL-safe means of representing claims
    • jwt-decode — Library that helps decoding JWT
  • dayjs — Small immutable date time library alternative to Moment.js
  • React HTML Parser — Converts HTML strings directly into React components
  • React Lazy Load Image Component — React Component to lazy load images and components using a HOC
  • Draft.js — Rich Text Editor Framework for React
  • Serve — Static file serving and directory listing.
  • ESLint — Pluggable and configurable linter tool for identifying and reporting on patterns in JavaScript
    • Prettier — Opinionated code formatter and extension for code editor
    • Standard — JavaScript style guide, linter, and formatter
  • Netlify — All-in-one platform for automating modern web projects
  • Cloudflare — Enterprise-grade authoritative DNS service
  • Uniregistry — Retail domain name registrar

Alternative or future dependencies:

  • Maps API
    • Google Maps — Web mapping service developed by Google
    • Mapbox — Mapping platform for custom designed maps
  • Alternative of REST API:
    • GraphQL API — Data query and manipulation language for APIs
      • Apollo — Data graph platform to unify APIs, microservices, and databases with GraphQL
  • Cypress — JavaScript end-to-end testing framework
  • Jest — Delightful JavaScript testing framework
  • React Testing Library — Very light-weight solution for testing React components
  • Sinon — Standalone test spies, stubs and mocks for JavaScript
  • TypeScript — Typed JavaScript at application-scale JavaScript
  • Redux Saga — Redux middleware for asynchronous actions or side effects with Saga
  • Marked.js — Markdown parser and compiler
  • Docker — Virtualization to deliver software in packages called containers
    • Docker Compose — Provides a way to document and configure all of the app service dependencies

Never be dependencies:

  • Other non-JavaScript family languages
  • Other non-Redux state management solutions
  • Other non-React frameworks

For dependencies in the API part, see template-api.

Application Structure

template-web
├── LICENSE    # License
├── README.md  # Documentation
├── coverage   # Test coverage files
├── package.json    # Node.js package configuration
├── postinstall.sh  # Script to be run after dependencies installation
├── public
│   ├── _redirects     # Setup redirect index.html for static hosting like Netlify
│   ├── assets         # Various asset files
│   ├── favicon.ico    # Favicon
│   ├── index.html     # Primary HTML file for application root
│   ├── manifest.json  # Application manifest meta data
│   └── robots.txt     # Rules for search engine crawlers
├── src
│   ├── App.js        # Primary React application configuration
│   ├── App.test.js   # Test file for App.js
│   ├── components    # Stateless functional components or dumb components
│   ├── containers    # Stateful containers or smart components
│   ├── data          # JSON data files
│   ├── index.js      # Entry point for the React application
│   ├── pages         # Pages for React Router
│   ├── redux         # Files for Redux
│   │   ├── actions   # Redux actions with thunks
│   │   ├── reducers  # Redux reducers
│   │   └── store.js  # Redux store
│   ├── serviceWorker.js  # Setup Service Worker
│   ├── setupTests.js     # Setup Jest test suite
│   ├── site.json         # Metadata for the application
│   └── utils  # Various utility functions
└── yarn.lock  # Lock version of dependencies

There are various dotfiles related to environment variables, ESLint, Git ignore, and Prettier.

Getting Started

Installation

Install dependencies using yarn:

yarn

You should also install and run template-api before continuing.

Setup Environment Variables

For development, edit .env.development.local file:

REACT_APP_API_URL=http://localhost:3000
REACT_APP_GOOGLE_ANALYTICS_UA=UA-xxxxxxxxx-x

For production, edit .env.production.local file:

REACT_APP_API_URL=http://api.example.com
REACT_APP_GOOGLE_ANALYTICS_UA=UA-xxxxxxxxx-x

Run

yarn dev

Access the web app on http://localhost:8000.

Lint

yarn lint

To fix basic issues:

yarn lint --fix

Test

yarn test

Build

yarn build
yarn serve

Access the built web app on http://localhost:5000.

Deployment

If deployment is taken care of by Netlify, setup:

# Build command
yarn build
# Publish directory
build/

Tips

Authors

License

See LICENSE