react-boilerplate / react-boilerplate-typescript

⚠️ MOVED TO react-boilerplate/react-boilerplate-cra-template

⚠️ Moved to https://github.com/react-boilerplate/react-boilerplate-cra-template

This boilerplate is now being developed as a custom create-react-app template. Much better and stronger with many more features. Powered by Create React App.

Please support us there with your opinions and pull requests :) And with stars ofc :)

---

Start your next react project in seconds

A highly scalable, offline-first foundation with the best DX and a focus on performance and best practices

_{Created by Max Stoiber and maintained with ❤️ by an amazing team of developers.}

This is the TYPESCRIPT implementation of the original react-boilerplate with extra features and powers of Typescript

⚠️ Please refer to the react-boilerplate for the details and the documentation

---

Boilerplate version: 4.1

Overview

• For the detailed documentation: Typescript Docs

• Example projects built with this boilerplate (if you are looking for advanced examples):

  • Example 1 (in-production) (boilerplate version: 3)

  • Example 2 (in-production) (boilerplate version: 4)

• Want to deploy to AWS S3/CloudFront with a single script? -> S3 deployment script

---

Getting Started & Features & Documentations and More...

You can find all the documentation in the original react-boilerplate

For the typescript related documentation: Typescript Docs

Quick start

1. Make sure that you have Node.js v10.13.0 and npm v6.4.1 or above installed.
2. Clone this repo using git clone --depth=1 https://github.com/react-boilerplate/react-boilerplate-typescript.git <YOUR_PROJECT_NAME>
3. Move to the appropriate directory: cd <YOUR_PROJECT_NAME>.
   
4. Run npm run setup in order to install dependencies and clean the git repo.
   At this point you can run npm start to see the example app at http://localhost:3000.
5. Run npm run clean to delete the example app.

Now you're ready to rumble!

---

Ongoing Work

In between releases, we work on the dev branch and rarely ever update master. For that reason, it sometimes look like the repo isn't actively maintained. This isn't the case, React Boilerplate is alive and kicking.

Please feel free to check out:

• our dev branch for the latest updates. You are always welcome to use it as the basis for your project. We only merge to dev projects which are fully ready.
• our open issues and pull requests to see what we are currently working on. Suggestions and contributions are always welcome!

_{Keywords: React Boilerplate, Typescript, React.js, Redux, Hot Reloading, ESNext, Babel, react-router, Offline First, ServiceWorker, styled-components, redux-saga, FontFaceObserver}

Contributors

Only typescript contributors are displayed here.

Can Sahin 💻 📖 🤔 👀 ⚠️

Gray Strider 💻 🔧 👀

Rajat Kanti Nandi 🔧

This project follows the all-contributors specification. Contributions of any kind welcome!

Supporters

This project would not be possible without the support of these amazing folks. Become a sponsor to get your company in front of thousands of engaged react developers and help us out!

---

License

This project is licensed under the MIT license, Copyright (c) 2019 Maximilian Stoiber. For more information see LICENSE.md.

react-boilerplate-typescript's Issues

update git link in getting started to point to the correct repo

Step 2 of the quick start should be changed from the non-typescript repo to this repo

git clone repo and npm run setup gives error

Description

git clone repo and then npm run setup gives error

Steps to reproduce

$ git clone --depth=1 https://github.com/react-boilerplate/react-boilerplate-typescript.git web-chat
$ npm run setup

Screenshots
NA

Versions

• React-Boilerplate:4.1.0
• Node/NPM:v4.2.6
• Browser:NA

Details

npm run setup

[email protected] presetup /home/syed/data/code/skunkworks/web-chat
npm i chalk shelljs

▄ ╢░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░╟
WARN engine [email protected]: wanted: {"node":">=8"} (current: {"node":"4.2.6","npm":"3.5.2"})
loadDep:supports-color → ▐ ╢██████████████████░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░╟
WARN engine [email protected]: wanted: {"node":">=8"} (current: {"node":"4.2.6","npm":"3.5.2"})
loadDep:color-convert → 3 ▌ ╢██████████████████░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░╟
loadDep:has-flag → 304 ▌ ╢█████████████████████░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░╟

[email protected] setup /home/syed/data/code/skunkworks/web-chat
node ./internals/scripts/setup.js

/home/syed/data/code/skunkworks/web-chat/internals/scripts/setup.js:3
const { exec } = require('child_process');
^

SyntaxError: Unexpected token {
at exports.runInThisContext (vm.js:53:16)
at Module._compile (module.js:374:25)
at Object.Module._extensions..js (module.js:417:10)
at Module.load (module.js:344:32)
at Function.Module._load (module.js:301:12)
at Function.Module.runMain (module.js:442:10)
at startup (node.js:136:18)
at node.js:966:3

npm ERR! Linux 4.15.0-50-generic
npm ERR! argv "/usr/bin/nodejs" "/usr/bin/npm" "run" "setup"
npm ERR! node v4.2.6
npm ERR! npm v3.5.2
npm ERR! code ELIFECYCLE
npm ERR! [email protected] setup: node ./internals/scripts/setup.js
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] setup script 'node ./internals/scripts/setup.js'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the react-boilerplate-typescript package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! node ./internals/scripts/setup.js
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs react-boilerplate-typescript
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls react-boilerplate-typescript
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR! /home/syed/data/code/skunkworks/web-chat/npm-debug.log

Log

0 info it worked if it ends with ok
1 verbose cli [ '/usr/bin/nodejs', '/usr/bin/npm', 'run', 'setup' ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ 'presetup', 'setup', 'postsetup' ]
5 info lifecycle [email protected]presetup: [email protected]
6 verbose lifecycle [email protected]presetup: unsafe-perm in lifecycle true
7 verbose lifecycle [email protected]presetup: PATH: /usr/share/npm/bin/node-gyp-bin:/home/syed/data/code/skunkworks/web-chat/node_modules/.bin:/home/syed/bin:/home/syed/.local/bin:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/usr/games:/usr/local/games:/snap/bin:/opt/mssql-tools/bin:/opt/mssql-tools/bin:/opt/mssql-tools/bin:/opt/mssql-tools/bin:/opt/mssql-tools/bin:/opt/mssql-tools/bin:/opt/mssql-tools/bin
8 verbose lifecycle [email protected]presetup: CWD: /home/syed/data/code/skunkworks/web-chat
9 silly lifecycle [email protected]presetup: Args: [ '-c', 'npm i chalk shelljs' ]
10 silly lifecycle [email protected]presetup: Returned: code: 0 signal: null
11 info lifecycle [email protected]setup: [email protected]
12 verbose lifecycle [email protected]setup: unsafe-perm in lifecycle true
13 verbose lifecycle [email protected]setup: PATH: /usr/share/npm/bin/node-gyp-bin:/home/syed/data/code/skunkworks/web-chat/node_modules/.bin:/home/syed/bin:/home/syed/.local/bin:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/usr/games:/usr/local/games:/snap/bin:/opt/mssql-tools/bin:/opt/mssql-tools/bin:/opt/mssql-tools/bin:/opt/mssql-tools/bin:/opt/mssql-tools/bin:/opt/mssql-tools/bin:/opt/mssql-tools/bin
14 verbose lifecycle [email protected]setup: CWD: /home/syed/data/code/skunkworks/web-chat
15 silly lifecycle [email protected]setup: Args: [ '-c', 'node ./internals/scripts/setup.js' ]
16 silly lifecycle [email protected]setup: Returned: code: 1 signal: null
17 info lifecycle [email protected]~setup: Failed to exec setup script
18 verbose stack Error: [email protected] setup: node ./internals/scripts/setup.js
18 verbose stack Exit status 1
18 verbose stack at EventEmitter. (/usr/share/npm/lib/utils/lifecycle.js:232:16)
18 verbose stack at emitTwo (events.js:87:13)
18 verbose stack at EventEmitter.emit (events.js:172:7)
18 verbose stack at ChildProcess. (/usr/share/npm/lib/utils/spawn.js:24:14)
18 verbose stack at emitTwo (events.js:87:13)
18 verbose stack at ChildProcess.emit (events.js:172:7)
18 verbose stack at maybeClose (internal/child_process.js:821:16)
18 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:211:5)
19 verbose pkgid [email protected]
20 verbose cwd /home/syed/data/code/skunkworks/web-chat
21 error Linux 4.15.0-50-generic
22 error argv "/usr/bin/nodejs" "/usr/bin/npm" "run" "setup"
23 error node v4.2.6
24 error npm v3.5.2
25 error code ELIFECYCLE
26 error [email protected] setup: node ./internals/scripts/setup.js
26 error Exit status 1
27 error Failed at the [email protected] setup script 'node ./internals/scripts/setup.js'.
27 error Make sure you have the latest version of node.js and npm installed.
27 error If you do, this is most likely a problem with the react-boilerplate-typescript package,
27 error not with npm itself.
27 error Tell the author that this fails on your system:
27 error node ./internals/scripts/setup.js
27 error You can get information on how to open an issue for this project with:
27 error npm bugs react-boilerplate-typescript
27 error Or if that isn't available, you can get their info via:
27 error npm owner ls react-boilerplate-typescript
27 error There is likely additional logging output above.
28 verbose exit [ 1, true ]

after run npm clean thrown some error

Description

After clone and run setup and npm start every thing is working, but after run npm run clean I got some error:

✖ ｢atl｣: Checking finished with 3 errors
webpack built 3a0d1f697f3794a2671b in 8013ms
✖ ｢wdm｣: 
ERROR in ./app/reducers.ts
Module not found: Error: Can't resolve 'containers/App/reducer' in '/home/saeed/kamva/rbt-2/app'
 @ ./app/reducers.ts 4:0-51 9:12-25
 @ ./app/configureStore.ts
 @ ./app/app.tsx
 @ multi ./node_modules/react-app-polyfill/ie11.js webpack-hot-middleware/client?reload=true ./app/app.tsx

ERROR in [at-loader] ./app/types/index.d.ts:4:44 
    TS2307: Cannot find module 'containers/App/types'.

ERROR in [at-loader] ./app/types/index.d.ts:5:45 
    TS2307: Cannot find module 'containers/HomePage/types'.

ERROR in [at-loader] ./app/reducers.ts:9:27 
    TS2307: Cannot find module 'containers/App/reducer'.

Steps to reproduce

Steps to reproduce the behavior:

1. run npm run setup
2. run npm run clean

Versions

• React-Boilerplate: 3.7.0
• Node/NPM: 10.11.0/6.4.1
• Browser: Chrome Version 70.0.3538.77 (Official Build) (64-bit)
• Os: Linux ubuntu 18.04

Remove project fork status to properly display contributions

Perhaps not neccesarily an issue with this particular project, but I would like to hear a commentary on that: Why Commits to Forks on GitHub Don't Apply to Contributions

Quote:

Forks are designed as temporary places where you can work before merging your commits into the upstream repository. <...>
If a fork becomes a different project from it’s upstream repository, and will never have commits merged into the upstream repository, then you can ask GitHub Support to detach the fork and turn it into a standalone repository. This will make the commits count towards your contributions.

In our case this is true; "fork" status simply points to the upstream repository and provides little utility function; how about we remove it? Then all activity of contributors will be displayed on their profiles correctly.
This project is the first result in Google on "react boilerplate typescript" regardless:)
I've successfully removed fork status from my other project by asking support (and commits seem to have appeared in my activity log), so there shouldn't be any problems.

Of course we would still merge updates from upstream, but that doesn't require the project to have "fork" status.

Should reducers clone initalState to guard against mutation?

Is your feature request related to a problem? Please describe.
It's easy to accidentally mutate the initialState in reducers, especially from tests.

Describe the solution you'd like
Guard against mutation for initialState.

Describe alternatives you've considered
I really wouldn't want to introduce immutablejs, but maybe just lodash cloneDeep in the reducer:

export const initialState: ContainerState = {
  someDeepObject: new Map<string, ISomeInterface>(),
};

function myReducer(
  state: ContainerState = cloneDeep(initialState),
  action: ContainerActions): ContainerState {
  switch (action.type) {

Any other ideas?

Additional context
Thanks for the typescript fork of the awesome boilerplate!

Add tsc --noEmit for type checking on pre-commit hook

something like that
https://dev.to/robertcoopercode/comment/8o44

invalid align-items property value

https://github.com/Can-Sahin/react-boilerplate-typescript/blob/680899427618341cbfa89bce0b48d538ec85fc8f/app/containers/RepoListItem/Wrapper.ts#L7

Reasons for omitting immer

Could you please elaborate on your choice to not include immer?
I've seen you referring to TypeScript "readonly" feature as a reason, but isn't Immer also provides some performance optimizations besides immutable state?
Also, given that we're trying to match this repo with upstream as much as possible, perhaps it's worth bringing it in?

.

Syncing with the original upstream

@GrayStrider

There is a problem. I mentioned it at #43

So far, I tried to keep this forks changes to very minimal. Only for synching the upstream. Because typescript changes aren't easily merging. I ve been doing it manually and lesser the changes easier it gets.

Now that you are fixing lot of things the fork is running far apart from the original one even more which will make merging harder (its already painful)

My idea was, keep changes minimum with extra type definitions and use exact implementation. But like in #35 you are changing the implementation too, which is good but raises my concern about merging more.

What do you suggest ?

Why you didn't exclude .tsx or .ts files from eslinter?

Hi,
I can't figure out that why you should using eslinter for typescript files, even though you installed tslint for these type files?

delete `revert-26-patch_types`

code splitting not work

Description

Page chunks code splitting not work in this typescript version

Steps to reproduce

clone the repo
npm install
npm start
visit the main page on chrome
check out the 'Sources' tab of chrome devtools and compare with react-boilerplate es version

Expected behavior

Screenshots

Versions

• React-Boilerplate: 3.7.0
• Node/NPM: 11.3.0 / 6.4.1
• Browser: chrome 70.0.3538.110

`useInjectReducer` generates error in the console.

Description

I've got error message in the browser console.

I've generate two components with npm run generate command:

• NewPage
• SecondPage

with their own reducer's.

Now, when I switching from Home page to the NewPage and then to the SecondPage I've got message:

Warning: Cannot update a component from inside the function body of a different component.
....

in this line:

  useInjectReducer({ key: 'SecondPage', reducer: reducer });

Steps to reproduce

Steps to reproduce the behavior:
0) setup boilerplate 4.1

1. npm run generate for two containers

• NewPage
• SecondPage

2. add to app/components/Header/index.tsx

        <HeaderLink to="/new-page">
          new page
        </HeaderLink>
        <HeaderLink to="/second-page">
          second page
        </HeaderLink>

Expected behavior
Need to have no warnings or errors from react in the console.

Screenshots

Versions

• React-Boilerplate:

  "name": "react-boilerplate-typescript",
  "version": "4.1.0",
  "description": "A highly scalable, offline-first foundation with the best DX and a focus on performance and best practices",
  "repository": {
    "type": "git",
    "url": "git://github.com/react-boilerplate/react-boilerplate-typescript.git"
  },
  "engines": {
    "npm": ">=6.4.1",
    "node": ">=10.13.0"
  },

• Node/NPM:

node -v
v10.16.0
npm -v
6.9.0

• Browser:
  Google Chrome
  Version 84.0.4104.0 (Official Build) canary (64-bit)

Webstorm is showing error because can't import webpack.prod.babel.js

Description

Webstorm is showing error when I open just installed project which says cannot import module 'webpack.prod.babel.js'

Steps to reproduce

• clone boilerplate
• npm run setup
• npm run clean
• all Loadable files are marked as error

(Add link to a demo on https://jsfiddle.net or similar if possible)

Expected behavior
No error

Screenshots

Versions

• React-Boilerplate:
• Node/NPM: 12.6.1 on nvm/ 6.13.4
• Browser: Chrome Canary 84.0.4104.0

Additional Info:

I have no error and everything works for me when I've added this lines to eslintrc.js
But I didn't test it deeply

Not working.

Description

The boilerplate is not generated

Steps to reproduce

npx create-react-app --template cra-template-rb myapp-test
docker run --interactive -t node npx create-react-app --template cra-template-rb myapp-test

/myapp-test/node_modules/react-scripts/scripts/utils/verifyTypeScriptSetup.js:231
        appTsConfig.compilerOptions[option] = suggested;
                                            ^

TypeError: Cannot add property noFallthroughCasesInSwitch, object is not extensible
    at verifyTypeScriptSetup (/myapp-test/node_modules/react-scripts/scripts/utils/verifyTypeScriptSetup.js:231:45)
    at module.exports (/myapp-test/node_modules/react-scripts/scripts/init.js:336:5)
    at [eval]:3:14
    at Script.runInThisContext (vm.js:122:20)
    at Object.runInThisContext (vm.js:329:38)
    at Object.<anonymous> ([eval]-wrapper:6:22)
    at Module._compile (internal/modules/cjs/loader.js:778:30)
    at evalScript (internal/bootstrap/node.js:590:27)
    at startup (internal/bootstrap/node.js:265:9)
    at bootstrapNodeJSCore (internal/bootstrap/node.js:623:3)

Aborting installation.
  node  has failed.

Deleting generated file... node_modules
Deleting generated file... package.json
Deleting generated file... yarn.lock
Done.

Expected behavior
Should be working

Versions

• React-Boilerplate: npx one, must be latest
• Node/NPM: latest

How can I inject reducer before render

Is your feature request related to a problem? Please describe.
inject reducer namespace before render

https://github.com/Can-Sahin/react-boilerplate-typescript/blob/fd08d71ea50f5f258f080a5c4d61532ec9ef8b45/app/containers/HomePage/selectors.ts#L10

just return state.home

Can't import png file

Description

Can't import img file (problem with webpack.base.babel.js)
Error says: Expected options.quality to be of type array but received string

Steps to reproduce

• clone boilerplate
• npm run setup
• npm run clean
• try import .png file

Expected behavior
File should be imported

Screenshots

Versions

• React-Boilerplate: 4.1
• Node/NPM: 12.6.1/6.13.4
• Browser: Chrome Canary 84.0.4104.0

Possible fix

I think it will (works on my pc) work but I didnt run any coverage
I changed quality property to this in the image

Guidance for downstream forks?

Is your feature request related to a problem? Please describe.

Hi, first, thanks for this awesome fork! I'm considering forking this to add support for micro-frontends and serverless aws deployment and I guess I'm looking for some guidance. It looks like you are intending to pull in changes from the RBP upstream as they release, which appears to be a fair amount of work! Do you expect you'll continue?

I just did a dry run from master/dev and it did not go as well as I had hoped!

Describe the solution you'd like

Do you think we'd benefit from some type of quick guide to pulling upstream changes in? Do you have any automation or tricks to help work through the js->ts renames and conflicts?

Describe alternatives you've considered

I'm considering tracking the upstream directly but I'm not sure I'm skilled enough ;)

Additional context

Again, just much thanks for the fork!

Update generator templates with latest changes

We have 3 additional things to keen an eye on while introducing changes:

• internals/templates
• internal/generators
• tests

I suppose it's possible to eliminate the first 2 by adding additional tests for generators?
Thoughts?

Not working with IE11 and some older edge versions

The upstream boilerplate is working with IE11, but this typescript fork seems to not work with it. I get a blank screen with Script error. I tried to add browserslist in package.json without any success. I'll continue digging why it's not working, meanwhile if someone has an idea for a solution, I'm all ears 👍

Uncaught exception in promise: openSansObserver.load()

Before opening a new issue, please take a moment to review our community guidelines to make the contribution process easy and effective for everyone involved.

Description

After a clean clone + clean + run, on app load we recieve the following exception:

Uncaught (in promise) A {family: "Open Sans", style: "normal", weight: "normal", stretch: "normal"}
Promise.then (async)
(anonymous) | @ | app.tsx?f817:40

Steps to reproduce

Steps to reproduce the behavior:

clone full repo
npm run setup
npm run clean
npm start

: Navigate to homepage, see error in console

Expected behavior

Clean console. NOTE: The base react-boilerplate did not have this error

Screenshots
If applicable, add screenshots to help explain your problem.

Versions

• React-Boilerplate: 3.7.0
• Node/NPM: 10.10.0
• Browser: Chrome 71

NOTE: This is my first TS project, so it could be something very simple, but as it's the first thing I see on run I figure it's worth creating an issue for

extract-intl not working

extract-intl script isn't working. I commented it out because its blocking language generation script #23

@GrayStrider you are currently working on this as I see the pull requests. Thanks for it alot. I really dont have time now. If you are up for fixing it, would be super cool

ngrok - platform darwinarm64 is not supported.

Description

I am trying to install this boilerplate in Apple M1 but this issue is showing up.

npm ERR! code 1
npm ERR! path /Users/jeetdhandha/MyStuff/XXXXX/node_modules/ngrok
npm ERR! command failed
npm ERR! command sh -c node ./postinstall.js
npm ERR! ngrok - platform darwinarm64 is not supported.

Steps to reproduce

Steps to reproduce the behavior:

1. git clone --depth=1 https://github.com/react-boilerplate/react-boilerplate.git XXXXX
2. npm run setup

Expected behavior
Should install without any error.

Versions

• React-Boilerplate : Current latest version.
• Node/NPM: Node - v16.3.0 | npm - 7.15.1

Convert server to use typescript

Current the main node server is still plain JS, can we update it to use typescript as well?

Language Generation

Before opening a new issue, please take a moment to review our community guidelines to make the contribution process easy and effective for everyone involved.

Description

A clear and concise description of what the bug is.

Steps to reproduce

Try Adding a new language through the generator Command
npm run generate language

Expected behavior
The new language should be generated successfully. instead an error appears

Screenshots

Versions

4.1

development build is taking too long.

Is your feature request related to a problem? Please describe.
When I start to run in development mode, build time is very long. For example 161674ms.

Update the project with stricter typings

• add linter warning for any/unknown
• update any/unknown types wherever possible
• enable noImplicitAny

Babel Error: Unexpected Token

Description

I am trying to use draft-js-inline-toolbar-plugin inside react-boilerplate-typescript and I am getting the following error:

I have tried to use the same library in react-boilerplate, and it's working fine.

Steps to reproduce

Steps to reproduce the behavior:

Clone the following repo:

https://github.com/ashishkumar-compro/draft-js-inline-toolbar-plugin-react-boilerplate-typescript.git

Run the following commands:

1. npm install
2. npm start

Expected behavior
The Babel error should not come.

Versions

• React-Boilerplate: 4.1
• Node/NPM: 10.16.3 / 6.9.0
• Browser: Chrome Version 77.0.3865.90

[Feature Request] test runner for pull requests

https://github.com/marketplace/travis-ci

error loading js file

Mark the repository as template

Settings -> ☑️ Template repository

Missing build:dll script in package.json

Description

Hi,
in postsetup script run npm run build:dll`, but seems it missed in the package.json file.

Versions

• React-Boilerplate: 3.7.0

Replace tslint with eslint

tslint is being superceded by eslint
https://eslint.org/blog/2019/01/future-typescript-eslint

• add support for eslint
• move all rules from tslint to eslint, keeping it as close as possible to upstream