Overview:

This product is a boilerplate template for a web application built with Express, Webpack, React, Redux, and TypeScript. It includes various dependencies and features such as a todo list, async server calls, multi-language support, and a 404 page with random moe images. The template follows industry-standard practices including RESTful API design, linting, testing, and continuous integration. It can be run using Docker or customized as needed.

Features:

• Dependency management with Yarn
• Backend framework with Express
• Advanced open-source database with PostgreSQL
• Responsive front-end framework with Materialize
• CSS pre-processors with Sass and PostCSS
• Default scoped/local CSS with CSS Modules
• Typed superset of JavaScript with TypeScript
• Module bundling with Webpack 4
• Development mode with hot reload using webpack-dev-server
• ES6 support with Babel JavaScript compiler
• Building user interfaces with React
• Hot module reload with React Hot Loader 4
• Declarative routing for React with React Router 4
• State container for JavaScript apps with Redux 4
• Asynchronous flows made easy with Redux Saga
• React-Redux bindings with Connected React Router 6
• Internationalization for React with React-i18next
• Immutable data structures for React Redux state management with Immutable.js
• Consistent coding styles with EditorConfig
• JavaScript linting with ESLint
• TypeScript linting with TSLint
• Style linting with Stylelint
• Git commit message linting with Commitlint
• JavaScript testing with Jest
• Test coverage reporting with Coveralls
• Git hooks with Husky
• Continuous integration with CircleCI 2
• Deployment on Heroku platform as a service (PaaS)
• Application containerization with Docker
• Follows RESTful API design best practices

Installation:

To run the sample code, you will need the following prerequisites:

• Yarn or npm (optional)
• Docker with Docker Compose

The quickest way to run the example project is to use Docker Compose. Simply clone the project repository and run the following command in the project root directory:

docker-compose up

This will set up and run the project with all dependencies. If you prefer to customize the project, you can follow the instructions below.

1. Install project dependencies:

   • Navigate to the project root directory:

   cd project_directory
   

   • Install dependencies with Yarn or npm:

   yarn install
   

2. Set up the database and session store:

   • You can either set up PostgreSQL and Redis using Docker images:

   docker-compose up -d postgresql redis
   

   • Alternatively, you can set up and maintain the database and session store yourself. Make sure to set the correct configurations in the backend/config.json file.

3. Build and run the application:

   • For development mode with hot reload, use the following command:

   yarn dev
   

   • For production mode with optimizations, use the following command:

   yarn build
   yarn start
   

4. Profile assets bundle:

   • The assets bundle can be analyzed using the webpack-bundle-analyzer tool.

Summary:

The Express-Webpack-React-Redux-TypeScript boilerplate is a feature-rich template for building web applications. It provides a comprehensive set of tools, libraries, and best practices to enable efficient development and deployment. With support for popular technologies and frameworks, as well as essential features like internationalization and testing, this boilerplate can serve as a solid foundation for building robust web applications.