rokoroku / react-redux-typescript-boilerplate

A bare minimum frontend boilerplate with React 16, Typescript 3 and Webpack 4

Frontend Boilerplate with React, Redux & TypeScript

A bare minimum react-hooks-redux-webpack-typescript boilerplate with TodoMVC example.

Note that this project does not include Server-Side Rendering, Static code analysis, Testing Frameworks If needed, please fork this repository and add your own that meets your requirements.

Ideal for creating React apps from the scratch.

Contains

• Typescript 3.8
• React 16.12
• Redux 4
• Redux Thunk 2.3
• React Router 5.1
• Redux DevTools Extension
• TodoMVC example

Build tools

• Webpack 4
  • Tree Shaking
  • Webpack Dev Server
• Typescript Loader
• PostCSS Loader
  • PostCSS Preset Env
  • CSS modules
• React Hot Loader
• Mini CSS Extract Plugin
• HTML Webpack Plugin

Installation

$ npm ci

Running

$ npm start

Build

$ npm run build

Deploy (to the GitHub Pages)

$ npm run deploy

License

MIT

react-redux-typescript-boilerplate's Issues

Demo not working

Demo link is not working

Update description for this repo

Description says "React 15". It now uses React 16, so maybe bump that up?

Missing @types/webpack-env

I get this error with it: Property 'hot' does not exist on type 'NodeModule'

Nested routes

Hi, can you please provide an example of using nested routes? Thank you

Adding new route does not render the component

Could you please explain how to create new routes?

I'm trying with the following:

<Provider store={store}>
    <Router history={history}>
        <Route path="/" component={App}>
          <Route path="/new-route" component={Matrix} />
        </Route>
    </Router>
  </Provider>,

and then

<Link to="/new-route">New route</Link>

But it does not work. URL is changed, but content is not refreshed.

VSCode

How do I set up VSCode to debug with breakpoints?

Event handlers are not work properly.

Seems like issues with preact & preact-compat.

Why no strictNullChecks?

I think it is better to switch this on by default (if possible). It's much easier to switch it off later, than to switch it on later.

It also forces us all to be honest about our typing discipline. Not having it on is a bit of a read flag, IMHO, when evaluating this project.

Replace webpack-cleanup-plugin

Each time after running a warning can be seen: DeprecationWarning: Tapable.plugin is deprecated. Use new API on .hooks instead. This comes from webpack-cleanup-plugin, which is now discontinued, so they won't fix it. However, replacing this package with clean-webpack-plugin is straightforward and fixes the issue.

Tons of @types errors with @types/react & @types/react-dom

Any ideas? I'm brand new to Typescript so I don't understand why this is throwing errors

[Error] Type us not assignable to type...

Hello, first time transpiling I got this error:

ERROR in [at-loader] ./src/index.tsx:17:25
    TS2322: Type 'ComponentClass<{}>' is not assignable to type 'StatelessComponent<void | RouteComponentProps<any>> | ComponentClass<void |
 RouteComponentProps<a...'.
  Type 'ComponentClass<{}>' is not assignable to type 'ComponentClass<void | RouteComponentProps<any>>'.
    Type '{}' is not assignable to type 'void | RouteComponentProps<any>'.
      Type '{}' is not assignable to type 'RouteComponentProps<any>'.

ERROR in [at-loader] ./src/index.tsx:17:25
    TS2322: Type 'ComponentClass<{}>' is not assignable to type 'StatelessComponent<void | RouteComponentProps<any>> | ComponentClass<void |
 RouteComponentProps<a...'.
  Type 'ComponentClass<{}>' is not assignable to type 'ComponentClass<void | RouteComponentProps<any>>'.
    Type '{}' is not assignable to type 'void | RouteComponentProps<any>'.
      Type '{}' is not assignable to type 'RouteComponentProps<any>'.
        Property 'match' is missing in type '{}'

outdated dependencies

warning [email protected]: 'postcss-cssnext' has been deprecated in favor of 'postcss-preset-env'. Read more at https://moox.io/blog/deprecating-cssnext/
warning [email protected]: 🙌 Thanks for using Babel: we recommend using babel-preset-env now: please read babeljs.io/env to update!
warning [email protected]: Package no longer supported. Contact [email protected] for more info.

warning "[email protected]" has incorrect peer dependency "babel-core@6".
warning "[email protected]" has incorrect peer dependency "ajv@^6.0.0".
warning "[email protected]" has incorrect peer dependency "caniuse-lite@^1.0.30000697".
warning "[email protected]" has incorrect peer dependency "redux@^3.1.0".

Install with yarn

when i run start the boilerplate, it take an error:

ERROR in /Users/twer/Desktop/jay/react-redux-typescript-boilerplate/src/main.tsx
./main.tsx
[tsl] ERROR in /Users/twer/Desktop/jay/react-redux-typescript-boilerplate/src/main.tsx(14,3)
TS2345: Argument of type 'Element' is not assignable to parameter of type 'ReactElement[]'.
Property 'includes' is missing in type 'Element'.
ℹ ｢wdm｣: Failed to compile.

how to resolve it?

Consider adding typedoc to the readme

https://github.com/TypeStrong/typedoc

npm install typedoc --global
//cd to project root, i.e. above src
typedoc --out ./ ./docs

Free docs is a pretty killer feature, and it worked on this boilerplate out of the box.

IE error

I see errors when run in Internet Explorer (screenshot attached).
Appreciate any help.

Regards
Manohar

Typescript compilation failures

After cloning the repo at the current master, I'm seeing the following compilation issues:

node_modules/redux-devtools-extension/index.d.ts:1:32 - error TS2305: Module '"/data/tmp/redux-async-ts/node_modules/redux/index"' has no exported member 'GenericStoreEnhancer'.

1 import {Action, ActionCreator, GenericStoreEnhancer, compose} from "redux";
                                 ~~~~~~~~~~~~~~~~~~~~
types/global.d.ts:11:48 - error TS2344: Type 'keyof T' does not satisfy the constraint 'string'.
  Type 'string | number | symbol' is not assignable to type 'string'.
    Type 'number' is not assignable to type 'string'.

11 type Omit<T, K extends keyof T> = { [P in Diff<keyof T, K>]: T[P] };
                                                  ~~~~~~~

Steps:

• Clone this repo
• npm install
• npx tsc

The second error appears to be related to known breaking changes in Typescript 2.9 with keyof. I'm assuming the first issue is just an out of sync typing file.

Downgrading to Typescript 2.8.4 got rid of the second issue.

IE

Hi, hot-reloading is not working in IE.
And also there is no TSX files under debug in IE.

Npm build not working

For me, npm build does not work. Initially I did not have webpack installed, so I thought this might be the problem, but even after installing webpack globally I still have the same problem.

how to apply code splitting?

�I tried dynamic import, but failed.
any examples?

run by docker

I cannot run this project by Docker. anyone tries to run inside of a docker?

Unused package?

webpack-hot-middleware

how is this package used?

Can you please give an example for API action with redux-action?

Remove deprecated repo of React Router Redux

hey.
since React Router Redux is deprecated i think it's time to remove it from the project.
if you are agree on it i can send PR for that.

[HOW] React Hot Loader integrating

This package is awesome!
I would like to apply React Hot Loader in my project. But I config same as you but still not working.
Tell me if I missing

webpack.config.js

// about plugins
// 1st Remove new webpack.HotModuleReplacementPlugin(),
// 2nd about devServer
devServer: {
	hot: true,
	inline: true,
},
 // 3rd about module
module: {
	rules: [
	//...
	{
		test: /\.(ts|tsx)?$/,
		include: appPath.appSrc,
		use: [
					{
						loader: 'babel-loader',
						options: { plugins: ['react-hot-loader/babel'] }
					},
					{
						loader: require.resolve('ts-loader'),
						options: {
							// disable type checker - we will use it in fork plugin
							transpileOnly: true,
						},
					},
				],
	},
],

App.js

// 4th import hot
export default hot<any>(module)(AppConfig)

Handling dots in path

I have issue to pass a param in path with dots inside it. I have a route (/mi/{token}) and when I am passing a token like 1.1 then WebPackDevServer can't handle the request.

I tried to use historyapifallback (https://webpack.js.org/configuration/dev-server/#devserver-historyapifallback), something like this:

historyApiFallback: {
      disableDotRule: true,
    },

or

historyApiFallback: {
      rewrites: [
        { from: /^\/mi/, to: 'index.html' }
      ]
    },

But it's not working for me. Is there any plugin or library that has conflict with that?
Thanks

Issue with router. It uses relative paths. Getting error: `expected expression, got '<'`

My routes work fine unless they are nested more than one level deep.

If I have this:

<Switch>
    <Route path="/rooms/:id" component={ShowRoom} />
    ...
</Switch>

I get errors on that page:

The script from “http://localhost:3000/rooms/b26a5036f70d782b55c3.js” was loaded even though its MIME type (“text/html”) is not a valid JavaScript MIME type.
d1e1eb23-80b3-4b62-af38-1baa520c1b3c
The script from “http://localhost:3000/rooms/vendor.b26a5036f70d782b55c3.js” was loaded even though its MIME type (“text/html”) is not a valid JavaScript MIME type.
d1e1eb23-80b3-4b62-af38-1baa520c1b3c
The script from “http://localhost:3000/rooms/app.b26a5036f70d782b55c3.js” was loaded even though its MIME type (“text/html”) is not a valid JavaScript MIME type.
d1e1eb23-80b3-4b62-af38-1baa520c1b3c
SyntaxError: expected expression, got '<'
b26a5036f70d782b55c3.js:1
SyntaxError: expected expression, got '<'
vendor.b26a5036f70d782b55c3.js:1
SyntaxError: expected expression, got '<'

It looks like somewhere it's injecting the .js file as a relative path <... src="app.xxxxx.js">, instead of <... src="/app.xxxxxx.js">

I can't find where it is. Any help?

npm install error

Weird.

npm ERR! code 1
npm ERR! Command failed: /usr/local/bin/git clone --depth=1 -q -b Feature-getArgument git://github.com/ev1stensberg/generator.git /Users/usernamee/.npm/_cacache/tmp/git-clone-44a65de9
npm ERR! /Users/usernamee/.npm/_cacache/tmp/git-clone-44a65de9/.git: Permission denied
npm ERR!

npm ERR! A complete log of this run can be found in:
npm ERR! /Users/usernamee/.npm/_logs/2018-04-06T10_24_21_125Z-debug.log

I keep getting this error. This happens only on this repository. Other any repository works fine.

No issue

Sorry wrong boilerplate 👎

'history' has incorrect types

Cloning the project and running yarn install + yarn start will result in the following typescript error being thrown:

Module '"/Users/xtdbp/Playground/react-redux-typescript-boilerplate/node_modules/@types/history/index"' has no exported member 'createBrowserHistory'

By the looks of it, it's caused by an export mismatch between history and it's associated @types/history/

I'm pretty sure that the fix is to add the latest @types/history/ as dependency to package.json

Error while running code with yarn

I am getting this error when using yarn i.e. I did yarn install instead of npm install.
After npm start I am getting this error in terminal and browser console, although the app is running normally.

I tried tried this on node v6.9.2 and v7.9.0

[at-loader] ./src/components/MainSection/index.tsx:89:23 
    TS2322: Type '{ readonly addTodo: ActionFunctionAny<Action<TodoItemData>>; readonly editTodo: ActionFunctionAny...' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<TodoItem> & Readonly<{ children?: ReactNode; }> & ...'.
  Property 'addTodo' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<TodoItem> & Readonly<{ children?: ReactNode; }> & ...'.

PNG load error

When using somethign like this:

.logo {
background-image: url("server-icon.png");
}

I get this error

ERROR in ./~/css-loader?{"modules":true,"sourceMap":true,"importLoaders":1,"localIdentName":"[local]__[hash:base64:5]"}!./~/postcss-loader!./src/assets/logo.css
Module not found: Error: Can't resolve 'server-icon.png' in '/web/src/assets'
 @ ./~/css-loader?{"modules":true,"sourceMap":true,"importLoaders":1,"localIdentName":"[local]__[hash:base64:5]"}!./~/postcss-loader!./src/assets/logo.css 6:157-183
 @ ./src/assets/logo.css
 @ ./src/components/LogoFont.tsx
 @ ./src/components/index.tsx
 @ ./src/containers/Home.tsx
 @ ./src/index.tsx
 @ multi (webpack)-dev-server/client?http://localhost:3000 webpack/hot/dev-server ./index.tsx

unable to include css and js

whenever i add local script to index.html it shows Error: Parse Error

• htmlparser.js:240 new HTMLParser
  [wt-hrm]/[html-minifier]/src/htmlparser.js:240:13

  • htmlminifier.js:966 minify
    [wt-hrm]/[html-minifier]/src/htmlminifier.js:966:3

  • htmlminifier.js:1326 Object.exports.minify
    [wt-hrm]/[html-minifier]/src/htmlminifier.js:1326:16

  • index.js:437 HtmlWebpackPlugin.postProcessHtml
    [wt-hrm]/[html-webpack-plugin]/index.js:437:34

  • index.js:270 Promise.all.then.then
    [wt-hrm]/[html-webpack-plugin]/index.js:270:25

  • next_tick.js:188 process._tickCallback
    internal/process/next_tick.js:188:7

Contribute react-redux typings to DTS

Issue mentioned in the comment reduxjs/react-redux#541 (comment) is closed and looks like those additional typings needs to be contributed into the react-redux from @types. I think your code inside your typings must be contributed into there.

Devtools

Inject redux-devtools into development build

RFC Typesrcript strictness

Hi, thank you for such a great boilerplate

What do you think about:

1. Changing "noImplicitAny": false, to "noImplicitAny": true,. This will force users to use types as much as possible. We use your boilerplate for quite a big project and enabling this flag saved us many times (e.g. when mapStateToProps has no ownProps and return value types, it's impossible for compiler to understand if the component is properly initialized)

2. Changing "noImplicitReturns": false, to "noImplicitReturns": true,. This just forces users to always have return value if function signature requires it, in each if()/ else() branches. I see no reason to keep it disabled

So the main idea of these 2 proposals is to require as more strictness as it is possible

Thank you

Cannot find Component in react-redux.d.ts

Hey guys. I get this error when doing npm install && npm start. Any ideas?

Implement linting & travis-ci

I think in general it would be good for people contributing to this repository as well as beginners using this boilerplate if there is some linting included e.g. ESLint or something like this.

If linting will be included, it would be great to also integrate travis, to automatically lint new pull-requests.

Add husky

since there is a prettier config in the project. Should I add husky to the project for only staged files?

Error in types/react-redux-d.ts

Cloned the repo, npm install, npm start and the following error is displayed in the console.

ERROR in [at-loader] ./types/react-redux.d.ts:11:18
    TS2314: Generic type 'MergeProps<TStateProps, TDispatchProps, TOwnProps, TMergedProps>' requires 4 type argument(s).

Ready for production?

as title, please :)

Upgrade to babel 7

:)

Willing to accept a PR?

Do you have any sample for API integrations using NodeJs?

same as title

Is there a sample for writing tests with this starter kit ?

Update dependencies

Considering package update
PR #73