keokilee / react-typescript-boilerplate Goto Github PK

Boilerplate project for setting up Typescript and React with Babel and Webpack.

License: ISC License

TypeScript 65.47% HTML 2.47% JavaScript 32.05%

react-typescript-boilerplate's Introduction

Typescript + React + Webpack Boilerplate

Base project for setting up a frontend application using Typescript and React. Heavily based off of Dan Abramov's React Transform Boilerplate.

Prerequisites

Typescript Definition Manager (TSD) npm install -g tsd

Installation

npm install
tsd install

Running the Dev Server

After setting up the project, type npm start to start the Express dev server.

Compiling for production

To compile the Javascript bundle for production, use npm run build.

react-typescript-boilerplate's People

Contributors

Stargazers

Watchers

react-typescript-boilerplate's Issues

Upgrade to Babel 6

I attempted the upgrade to Babel 6 thanks to #21, but it can't be done without the react transform plugin being updated as well. See gaearon/babel-plugin-react-transform#46.

PostCSS

Possibly using postcss-loader: https://github.com/postcss/postcss-loader

Add unit tests

It would be great to have unit tests written in typescript and an easy way to run it.

TypeError: Cannot read property 'children' of undefined

HMR is not working when i changed the code inside reducers.ts.

I am getting following error
"app.js:462 Uncaught TypeError: Cannot read property 'children' of undefined"

Redux Middleware

Have you tried adding any redux middleware like thunk or logger?

TS Errors

I cloned the project, ran npm install, then tsd install, then npm start.

I got the following errors:
ERROR in C:\dev\ts-hot-reload\react-typescript-boilerplate\node_modules\tslint\lib\language\walker\skippableTokenAwareRuleWalker.d.ts
(1,21): error TS2307: Cannot find module 'typescript'.

ERROR in C:\dev\ts-hot-reload\react-typescript-boilerplate\node_modules\tslint\lib\language\rule\abstractRule.d.ts
(1,21): error TS2307: Cannot find module 'typescript'.

ERROR in C:\dev\ts-hot-reload\react-typescript-boilerplate\node_modules\tslint\lib\language\walker\syntaxWalker.d.ts
(1,21): error TS2307: Cannot find module 'typescript'.

ERROR in C:\dev\ts-hot-reload\react-typescript-boilerplate\node_modules\tslint\lib\language\walker\ruleWalker.d.ts
(1,21): error TS2307: Cannot find module 'typescript'.

ERROR in C:\dev\ts-hot-reload\react-typescript-boilerplate\node_modules\tslint\lib\language\languageServiceHost.d.ts
(1,21): error TS2307: Cannot find module 'typescript'.

ERROR in C:\dev\ts-hot-reload\react-typescript-boilerplate\node_modules\tslint\lib\language\utils.d.ts
(1,21): error TS2307: Cannot find module 'typescript'.

ERROR in C:\dev\ts-hot-reload\react-typescript-boilerplate\node_modules\tslint\lib\enableDisableRules.d.ts
(1,21): error TS2307: Cannot find module 'typescript'.

ERROR in C:\dev\ts-hot-reload\react-typescript-boilerplate\node_modules\tslint\lib\language\rule\rule.d.ts
(1,21): error TS2307: Cannot find module 'typescript'.

ERROR in C:\dev\ts-hot-reload\react-typescript-boilerplate\node_modules\tslint\lib\lint.d.ts
(12,15): error TS2307: Cannot find module './language/walker'.

When I navigate to http://localhost:3000 the browser downloads /static/app.js which has the same contents as index.html, so there is an error in the console Uncaught SyntaxError: Unexpected token

I am on node version 5.3.0.
Anything I am doing wrong?

Thanks,
Hamish

Change to babel-preset-react-hmre

It might be good to switch to Change to babel-preset-react-hmre to make this configuration a little easier.

gaearon/react-transform-boilerplate#83

Example errors out with Typescript no output

I'm having a ton of trouble trying to get the example to run. I cloned the repository and ran npm install and tsd install. After running npm start, I get the following output:

C:\Users\joe\prog\react-typescript-boilerplate>npm start

> [email protected] start C:\Users\joe\prog\react-typescript-boilerplate
> node dev_server.js

Listening at http://localhost:3000
ts-loader: Using [email protected] and C:\Users\joe\prog\react-typescript-boilerplate\tsconfig.json
webpack built abbe0a7a735d670bb7c7 in 2155ms
Hash: abbe0a7a735d670bb7c7
Version: webpack 1.12.14
Time: 2155ms
 Asset     Size  Chunks       Chunk Names
app.js  32.4 kB       0       main
chunk    {0} app.js (main) 8.29 kB [rendered]
    [0] multi main 40 bytes {0} [built] [1 error]
    [1] (webpack)-hot-middleware/client.js 3.43 kB {0} [built]
    [2] (webpack)/buildin/module.js 251 bytes {0} [built]
    [3] ./~/strip-ansi/index.js 161 bytes {0} [built]
    [4] ./~/ansi-regex/index.js 135 bytes {0} [built]
    [5] (webpack)-hot-middleware/client-overlay.js 1.01 kB {0} [built]
    [6] (webpack)-hot-middleware/process-update.js 3.27 kB {0} [built]
ERROR in ./app/index.tsx
Module build failed: Error: Typescript emitted no output for C:\Users\joe\prog\react-typescript-boilerplate\app\index.tsx
    at Object.loader (C:\Users\joe\prog\react-typescript-boilerplate\node_modules\ts-loader\index.js:437:15)
 @ multi main

If I browse to localhost:3000, I get index.html but static/app.js seems has the same contents as index.html so Chrome fails to parse the the javascript file.

Did I miss a step?

Too much bloat

167 Megabytes for a boilerplate?
With all of the dependencies here, this boilerplate generated paths so long that windows was not even able to delete the files!
Need to google search just to figure out how to delete this thing now!

Set Up Webpack Hot Loader

Because hot loading is hot.

Error: EACCES: permission denied, access '/usr/local/lib/node_modules'

Werdasliestistdoof-MacBook-Pro:lx-repository nobody1$ npm install -g tsd
npm WARN checkPermissions Missing write access to /usr/local/lib/node_modules
npm ERR! path /usr/local/lib/node_modules
npm ERR! code EACCES
npm ERR! errno -13
npm ERR! syscall access
npm ERR! Error: EACCES: permission denied, access '/usr/local/lib/node_modules'
npm ERR!  { [Error: EACCES: permission denied, access '/usr/local/lib/node_modules']
npm ERR!   stack:
npm ERR!    'Error: EACCES: permission denied, access \'/usr/local/lib/node_modules\'',
npm ERR!   errno: -13,
npm ERR!   code: 'EACCES',
npm ERR!   syscall: 'access',
npm ERR!   path: '/usr/local/lib/node_modules' }
npm ERR! 
npm ERR! The operation was rejected by your operating system.
npm ERR! It is likely you do not have the permissions to access this file as the current user
npm ERR! 
npm ERR! If you believe this might be a permissions issue, please double-check the
npm ERR! permissions of the file and its containing directories, or try running
npm ERR! the command again as root/Administrator (though this is not recommended).

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/nobody1/.npm/_logs/2019-06-09T22_18_08_294Z-debug.log

https://stackoverflow.com/questions/51967335/npm-install-permission-denied-macos/51968980#51968980

this didn't work for me.

Can you help me?

Flux Architecture

Probably Redux + React-Router?

Hot Reloading of Reducers

I couldn't quite get this to work in #7. See the closed PR for more information.

Update Definitions for React DOM

Looks like the PR mentioned in the README has been merged in. Need to update the README and update tsd.json to reflect this change.

Redux devtools

This could well be the best React developer experience out there:

static typing
hot reloading using the latest React Transform

One thing that would be awesome would be to include the Redux Devtools:

Thanks for keeping the dependencies up-to-date

David

bash-3.2$ curl http://localhost:3000/static/app.js
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Home</title>
</head>
<body>
  <div id="app"></div>

  <script src="/static/app.js"></script>
</body>
</html>

Possibly related I am seeing this as the last input in the terminal that is running npm start:

ERROR in [default] /Users/jason/dev/react-typescript-boilerplate/typings/node/node.d.ts:54:12 
Subsequent variable declarations must have the same type.  Variable 'require' must be of type 'WebpackRequire', but here has type 'NodeRequire'.

Changing that line does indeed get it to work correctly.

Thanks