armour/express-webpack-react-redux-typescript-boilerplate

:tada: A full-stack boilerplate that using express with webpack, react and typescirpt!

express-webpack-react-redux-typescript-boilerplate

Example

• Demo Page - contains classic todo list, async server call, and 404 page with random moe images. (Support multi-language, currently English, Chinese, and Japanese)

  

  

  

Stack

• yarn - dependency manager
• express - node.js web framework for backend
• postgresql - advanced open source database
• materialize - a modern responsive front-end framework based on Material Design
• sass - CSS pre-processors
• postcss - CSS post-processor
• css-modules - for default scoped/local css
• typescript - a typed superset of javascript that scales
• webpack 4 - module bundler
• webpack-dev-server - serves a webpack app in development mode with hot reload
• followed ES6 standard
• babel - a JavaScript compiler that compile ES6 to ES5
• react - a JavaScript library for building user interfaces
• react-hot-loader 4 - hot module reload!
• react-router 4 - declarative routing for React
• react-redux 6 - the official react bindings for redux 4 (a predictable state container for js apps)
• react-saga - make redux asynchronous flows easy to read, write and test, the replacement for redux-thunk
• connected-react-router 6 - a redux binding for react-router 4, the replacement for react-router-redux v5
• react-i18next - internationalization for react done right
• immutable.js - persistent Immutable data structures for react redux state management
• editorconfig - maintain consistent coding styles between different editors and IDEs
• eslint - lint javascript files (.js, .jsx)
• tslint - lint typescript files (.ts, .tsx)
• stylelint - lint style files (.css, .scss)
• commitlint - lint git commit messages
• jest - painless javascript testing
• coveralls - test coverage
• husky - git hooks
• circle-ci 2 - continuous integration tool for testing and deployment
• heroku - a platform as a service (PaaS) that enables developers to build, run, and operate applications entirely in the cloud.
• docker - the open-source application container engine
• RESTful API design - follow RESTful api design best practice

How to run the sample code

Prerequisite

• yarn or npm
• (optional) docker with docker-compose

Quickest way

The easiest way to run the example project is to use docker-compose:

docker-compose up --build

that's it :)

You can also follow instructions below if you want to customize it.

Install project dependencies

Go to project root directory:

yarn install

If you find permission problem when trying to install yarn globally, check this out.

Setup database and session store

You can either

• setup postgresql and redis using docker images:

docker-compose up -d postgres redis

or

• maintain it by yourself, if so, make sure you set the right config in backend/config.json.

Build & Run

On development (with hot reload):

yarn dev

On production (with terser and other optimazitions):

yarn prod

Profile assets bundle

Thanks to webpack-bundle-analyzer, assets bundle can be analyzed and optimized through DLL Plugin.

yarn profile

Run test

yarn test

Code coverage

yarn coverage

Deployment

Every push on master branch will trigger Github Actions for heroku deployment.

Contributing

See CONTRIBUTING.md

License

MIT License

express-webpack-react-redux-typescript-boilerplate's Issues

Insecure dependency: event-stream 3.3.6

We noticed this repo pulls in event-stream at version 3.3.6 as a dependency. This version has had malicious code injected into it (see dominictarr/event-stream#116 for more information) and we recommend that you either upgrade to 4.0.1 or downgrade to 3.3.4 as soon as possible. You can do this by setting a Yarn resolution in your package.json.

(Dependabot can't generate downgrade PRs for sub-dependencies at the moment, but we wanted to warn you about the issue all the same.)

Libpng error

StackTrace:

ERROR in ./frontend/src/image/parallax2.jpg
Module build failed: Error: dyld: Library not loaded: /usr/local/opt/libpng/lib/libpng16.16.dylib
  Referenced from: /Users/armour/Express-Webpack-React-Typescript-HMR-Boilerplate/node_modules/mozjpeg/vendor/cjpeg
  Reason: image not found

    at Promise.all.then.arr (/Users/armour/Express-Webpack-React-Typescript-HMR-Boilerplate/node_modules/execa/index.js:201:11)
    at process._tickDomainCallback (internal/process/next_tick.js:135:7)
 @ ./~/css-loader!./~/postcss-loader!./~/sass-loader/lib/loader.js!./frontend/src/sass/index.scss 6:109041-109074
 @ ./frontend/src/sass/index.scss
 @ ./frontend/src/App.tsx
 @ ./frontend/src/index.tsx
 @ multi react-hot-loader/patch webpack-hot-middleware/client ./frontend/src/index

Test backend api in circle-ci

currently all backend tests are skipped 😱

lazy error

Error: Objects are not valid as a React child (found: object with keys {$$typeof, _ctor, _status, _result}). If you meant to render a collection of children, use an array instead.

Better immutable.js support

I'm submitting a

• Bug report
• Feature request
• Performance issue
• Regression (a behavior that used to work and stopped working in a new release)
• Documentation issue or request
• Other... Please describe:

Current behavior

Currently, the global state is not an Immutable Map or Record, only childrens are

Expected behavior

The global state should use Immutable.js and combine with redux-immutable

What is the motivation / use case for changing the behavior?

For better reducers!

Blocked

• stable immutable.js v4 release
• better connected-react-router typescript support

Add async server api call example

React Tree Snapshot Testing

See references:
http://facebook.github.io/jest/blog/2016/07/27/jest-14.html
https://github.com/facebook/react/tree/master/packages/react-test-renderer

Bug in close dropdown

I'm submitting a bug report

Current behavior

when close the dropdown by clicking other area(it wouldn't happen if click on the dropdown button to close it), there would be an unexpected border on the dropdown button.

Expected behavior

Minimal reproduction of the problem with instructions

• click the dropdown button to open it
• click other area to close the dropdown list

Yarn error: event-stream

I'm submitting a

Bug Report

Temporary fix

As per this issue, I've added the following to the package.json file and now everything works. Maybe a PR with that is necessary?

"resolutions": {
    "**/event-stream": "^4.0.1"
  }

Current behavior

By running yarn on a fresh copy of this repo I get the following error: error https://registry.yarnpkg.com/event-stream/-/event-stream-3.3.6.tgz: Extracting tar content of undefined failed, the file appears to be corrupt: "Unexpected end of data"

Expected behavior

Yarn should run without any problems.

Minimal reproduction of the problem with instructions

• Run yarn on a fresh copy of the main branch

What is the motivation / use case for changing the behavior

• Using the boilerplate code.

Environment

• any.

word misspelled in project description

typescript

Use docker with circle-ci (╯°□°）╯︵ ┻━┻)'

Also I can create a docker image so that people don't need to setup the environment if they want to test my example code.

React-hot-loader v4 not working

I'm submitting a

Feature request

Current behavior

If upgrade react-hot-loader from v3 to v4, it will trigger a full-page reload instead of HMR

Expected behavior

Use react-hot-loader v4 without full-page reload

What is the motivation / use case for changing the behavior

Keep it up-to-date

use React Router 4

currently there is no typescript declaration files for react-router 4?
will upgrade my code to use react-router 4 later.

upload the example image

Add i18n support

I'm submitting a

feature request

Current behavior

no i18n support

Expected behavior

at least support en, zh and jp

What is the motivation / use case for changing the behavior

for easily adapting to specific local languages and cultures

References

react-i18next

Enable sourceMap in devMode without FOUC

I'm submitting a

• Bug report
• Feature request
• Performance issue
• Regression (a behavior that used to work and stopped working in a new release)
• Documentation issue or request
• Other... Please describe:

Current behavior

Enable css-loader sourceMap option will cause FOUC.

Expected behavior

No FOUC when sourceMap enabled for css-loader.

Minimal reproduction of the problem with instructions

In webpack.config.base.babel.js:

...
      // Use a list of loaders to load css files
      {
        test: /\.css$/,
        use: [
          devMode ? 'style-loader' : MiniCssExtractPlugin.loader,
          { loader: 'css-loader', options: { sourceMap: !devMode, importLoaders: 1 } }, // TODO: enable sourceMap in devMode without FOUC
          { loader: 'postcss-loader', options: { sourceMap: true, plugins: () => [postcssImport, postcssPresetEnv, cssnano] } },
        ],
      },
      // Use a list of loaders to load scss files
      {
        test: /\.scss$/,
        use: [
          devMode ? 'style-loader' : MiniCssExtractPlugin.loader,
          { loader: 'css-loader', options: { sourceMap: !devMode, importLoaders: 2 } }, // TODO: enable sourceMap in devMode without FOUC
          { loader: 'postcss-loader', options: { sourceMap: true, plugins: () => [postcssImport, postcssPresetEnv, cssnano] } },
          { loader: 'sass-loader', options: { sourceMap: true } },
        ],
      },
...

simply change !devMode to true will cause the FOUC.

What is the motivation / use case for changing the behavior?

SourceMap support in development.

Coverage support for typescript

Now the coverage line number seems to be matching compiled js file, properly need to find a way to remap it using sourcemap?

Webpack 4 support

😢 another update on webpack

Add tests and mocks for backend

I'm submitting a

• Bug report
• Feature request
• Performance issue
• Regression (a behavior that used to work and stopped working in a new release)
• Documentation issue or request
• Other... Please describe:

Current behavior

No backend tests

Expected behavior

Add backend tests with mocks

What is the motivation / use case for changing the behavior?

Of course we need it. 😀

Use jest build-in coverage mapping

see jestjs/jest#2290