rangle / rangle-starter Goto Github PK

I received the following error:

When I run npm run build, each of the .tsx files in src are being transpiled into .js and .js.map files in the same place as the .tsx file.

I'd like a way to clean these files after the build is completed, or when npm run clean is executed.

We should make sure the app, tests, etc. run with the latest stable node release (currently 4.3.1). This can be done by updating circle.yml.

Getting some PRs from the community now which is great.

We should post some contribution guidelines. Tips on rangle-flow, CI, etc.

Might be able to recycle from other open Rangle projects?

The current approach. based on serve-webpack-client, makes hot reloading and live reloading harder than they should be. It's also non-standard.

Chalk was missing from npm, I had to install it manully to make it work

run: npm install
webpack

and get the following errors:¨

ERROR in multi vendor
Module not found: Error: Cannot resolve module 'angular2/bundles/angular2-polyfills' in C:\Users\Hans\Web\js\angular20-redux\angular2-redux-starter
@ multi vendor

ERROR in multi vendor
Module not found: Error: Cannot resolve module 'angular2/bootstrap' in C:\Users\Hans\Web\js\angular20-redux\angular2-redux-starter
@ multi vendor

ERROR in multi vendor
Module not found: Error: Cannot resolve module 'angular2/platform/browser' in C:\Users\Hans\Web\js\angular20-redux\angular2-redux-starter
@ multi vendor

ERROR in multi vendor
Module not found: Error: Cannot resolve module 'angular2/platform/common_dom' in C:\Users\Hans\Web\js\angular20-redux\angular2-redux-starter
@ multi vendor

ERROR in multi vendor
Module not found: Error: Cannot resolve module 'angular2/core' in C:\Users\Hans\Web\js\angular20-redux\angular2-redux-starter
@ multi vendor

ERROR in multi vendor
Module not found: Error: Cannot resolve module 'angular2/router' in C:\Users\Hans\Web\js\angular20-redux\angular2-redux-starter
@ multi vendor

ERROR in multi vendor
Module not found: Error: Cannot resolve module 'angular2/http' in C:\Users\Hans\Web\js\angular20-redux\angular2-redux-starter
@ multi vendor

ERROR in multi vendor
Module not found: Error: Cannot resolve module 'redux' in C:\Users\Hans\Web\js\angular20-redux\angular2-redux-starter
@ multi vendor

ERROR in multi vendor
Module not found: Error: Cannot resolve module 'redux-thunk' in C:\Users\Hans\Web\js\angular20-redux\angular2-redux-starter
@ multi vendor

ERROR in multi vendor
Module not found: Error: Cannot resolve module 'ng2-redux' in C:\Users\Hans\Web\js\angular20-redux\angular2-redux-starter
@ multi vendor

ERROR in multi vendor
Module not found: Error: Cannot resolve module 'redux-logger' in C:\Users\Hans\Web\js\angular20-redux\angular2-redux-starter
@ multi vendor

ERROR in Entry module not found: Error: Cannot resolve module 'ts' in C:\Users\Hans\Web\js\angular20-redux\angular2-redux-starter
Child html-webpack-plugin for "index.html":
+ 1 hidden modules
npm WARN optional Skipping failed optional dependency /chokidar/fsevents:
npm WARN notsup Not compatible with your operating system or architecture: [email protected]

Hans@HP-HANS C:\Users\Hans\Web\js\angular20-redux\angular2-redux-starter

(edit: tracking items with a tasklist)

Doing typescript with react is still a bit unconventional, but I think there's a lot of promise there. However the current starter has a few outstanding questions I'd like us to resolve.

• Drop React.PropTypes in favour of specifying a props interface for all components. Since this is checked at build time instead of runtime, it's a stronger check and makes React.PropTypes redundant for TypeScript projects. Syntax is also cleaner.
• VSCode gives red squigglies every time a stateless functional component is used in TSX. Need to make the editor use the correct version of TS (in this case 1.8).
• TS barfs any time we try to wrap a stateless functional component in a call to react-redux connect. Looks like react-redux needs an overload for it's connect decorator (see comment below). We should contribute a PR to the community typings.
• Same as above, but for redux-form's decorator. We should contribute a PR to the community typings.
• Remove the webpack config hack to suppress certain TS errors. It's no longer needed since 1.8.

• typescript-react-redux-starter and react-redux-starter are using different versions
• the authors renamed it: reactjs/react-router-redux#80

On heroku, the following error is happening in the console:

You are currently using minified code outside of NODE_ENV === 'production'. This means that you are running a slower development build of Redux. You can use loose-envify (https://github.com/zertosh/loose-envify) for browserify or DefinePlugin for webpack (http://stackoverflow.com/questions/30030031) to ensure you have the correct code for your production

This started happening due to a change in redux v3.0.6: https://github.com/rackt/redux/releases/tag/v3.0.6

The solution is to modify the webpack.config.js:

new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
}),

From neilff:

RHL is going to be deprecated in favour of React Transform.

This change is quite significant.

I'd recommend looking at their boilerplate project and bringing the changes in from over there https://github.com/gaearon/react-transform-boilerplate

There are some great features that come along with the React Transform ecosystem, we should look into taking advantage of what it offers.

Minifies bundled styles using postcss

From igor-ka:

It is possible to generate css into a stand-alone bundle, and might be preferable in some situation. The steps required to generate a stand-alone css bundle can be found here.

When I tried this, the bundling worked but the source-maps became broken. I could get it to work for either .ts files or .css files, but not both, by playing with css loaders source maps parameter and devtools: source-map option of the webpack config.

Even though the app.json file seems to configure NPM_CONFIG_PRODUCTION=false, deployment attempts on Heroku do not work until this setting is manually added to heroku using the heroku toolbelt.

Steps to reproduce ( at least on my heroku account ):

• clone the starter repo and setup a new github repo with it
• setup Heroku to deploy from the new github repo
• attempt to manually deploy will fail
  

Workaround :

mbuchetics/heroku-buildpack-nodejs-grunt#5 (comment)

Other notes:

• PR Apps work out of the box.
• I've experienced this with the angular starters as well as the typescript react starter
• Other people, using other heroku accounts, indicated that they cannot reproduce

npm WARN deprecated [email protected]: lodash@<2.0.0 is no longer maintained. Upgrade to lodash@^3.0.0
npm WARN engine [email protected]: wanted: {"node":">= 0.10.0 <= 0.11.0"} (current: {"node":"4.0.0","npm":"2.14.2"})

Currently there are a few things that could be improved about CSS for the react starters.

1. inline styles should use Radium so we can benefit from vendor prefixing etc.
2. we pass className around a lot when it should be part of the base styles for a component.
3. es6 react
4. typescript react
5. ng1
6. ng2

Official redux typings are afoot: reduxjs/redux#1413. When they're ready we should fold them into the ts-react starter.

I'm thinking we're limited by what the main frameworks support, but that we need to decide what we're willing to worry about as well. I suggest the following:

es6-react, ts-react:

• IE9, Android 4.1, iOS 8

angular1:

• IE9, Android 4,1, iOS8

angular2:

• IE9, Android 4,1, iOS8? Depends on what ng2 supports in the end.

See #17.

There are a number of events that log errors throughout the npm install process.
All there errors seem to be around the gentlyRM and the node_modules.staging folder
I've include an excerpt. If you'd like more please let me know.

63159 silly gunzTarPerm extractEntry web/immediate.js
63160 silly gunzTarPerm extractEntry web/index.js
63161 silly gentlyRm c:\Projects\REACT\typescript-react-redux-starter\node_modules\.staging\tslint-d9521495\node_modules is being purged
63162 verbose gentlyRm don't care about contents; nuking c:\Projects\REACT\typescript-react-redux-starter\node_modules\.staging\tslint-d9521495\node_modules
63163 silly gunzTarPerm extractEntry web/timers.js
63164 silly gentlyRm c:\Projects\REACT\typescript-react-redux-starter\node_modules\.staging\lodash-8cbee679\node_modules is being purged
63165 verbose gentlyRm don't care about contents; nuking c:\Projects\REACT\typescript-react-redux-starter\node_modules\.staging\lodash-8cbee679\node_modules
63166 silly gentlyRm c:\Projects\REACT\typescript-react-redux-starter\node_modules\.staging\lodash-es-b83bbc1c\node_modules is being purged
63167 verbose gentlyRm don't care about contents; nuking c:\Projects\REACT\typescript-react-redux-starter\node_modules\.staging\lodash-es-b83bbc1c\node_modules
63168 silly gentlyRm c:\Projects\REACT\typescript-react-redux-starter\node_modules\.staging\caniuse-db-56371315\node_modules is being purged
63169 verbose gentlyRm don't care about contents; nuking c:\Projects\REACT\typescript-react-redux-starter\node_modules\.staging\caniuse-db-56371315\node_modules
63170 silly gentlyRm c:\Projects\REACT\typescript-react-redux-starter\node_modules\.staging\core-js-593eb406\node_modules is being purged
63171 verbose gentlyRm don't care about contents; nuking c:\Projects\REACT\typescript-react-redux-starter\node_modules\.staging\core-js-593eb406\node_modules
63172 silly gentlyRm c:\Projects\REACT\typescript-react-redux-starter\node_modules\.staging\lodash-81788f91\node_modules is being purged
63173 verbose gentlyRm don't care about contents; nuking c:\Projects\REACT\typescript-react-redux-starter\node_modules\.staging\lodash-81788f91\node_modules
63174 silly gentlyRm c:\Projects\REACT\typescript-react-redux-starter\node_modules\.staging\lodash-20a473b4\node_modules is being purged
63175 verbose gentlyRm don't care about contents; nuking c:\Projects\REACT\typescript-react-redux-starter\node_modules\.staging\lodash-20a473b4\node_modules
63176 silly gentlyRm c:\Projects\REACT\typescript-react-redux-starter\node_modules\.staging\lodash-928b1699\node_modules is being purged
63177 verbose gentlyRm don't care about contents; nuking c:\Projects\REACT\typescript-react-redux-starter\node_modules\.staging\lodash-928b1699\node_modules
63178 verbose unlock done using C:\Users\mdentremont\AppData\Roaming\npm-cache\_locks\staging-72a4912d4ab12fd9.lock for c:\Projects\REACT\typescript-react-redux-starter\node_modules\.staging
63179 silly rollbackFailedOptional Starting
63180 silly rollbackFailedOptional Finishing
63181 silly runTopLevelLifecycles Starting
63182 silly runTopLevelLifecycles Finishing
63183 silly install printInstalled
63184 warn optional Skipping failed optional dependency /chokidar/fsevents:
63185 warn notsup Not compatible with your operating system or architecture: [email protected]
63186 verbose stack Error: ENOENT: no such file or directory, open 'c:\Projects\REACT\typescript-react-redux-starter\node_modules\.staging\basscss-radium-11304021\Icon
'
63186 verbose stack     at Error (native)
63187 verbose cwd c:\Projects\REACT\typescript-react-redux-starter
63188 error Windows_NT 6.1.7601
63189 error argv "c:\\Program Files\\nodejs\\node.exe" "c:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "install"
63190 error node v5.6.0
63191 error npm  v3.6.0
63192 error path c:\Projects\REACT\typescript-react-redux-starter\node_modules\.staging\basscss-radium-11304021\Icon
63193 error code ENOENT
63194 error errno -4058
63195 error syscall open
63196 error enoent ENOENT: no such file or directory, open 'c:\Projects\REACT\typescript-react-redux-starter\node_modules\.staging\basscss-radium-11304021\Icon
'
63197 error enoent ENOENT: no such file or directory, open 'c:\Projects\REACT\typescript-react-redux-starter\node_modules\.staging\basscss-radium-11304021\Icon
'
63197 error enoent This is most likely not a problem with npm itself
63197 error enoent and is related to npm not being able to find a file.
63198 verbose exit [ -4058, true ]

Automated npm dependency checks: http://greenkeeper.io/

Jason's looking into trying it out on the ng2 starter.

Should run as part of npm test (for CI) and optionally as a webpack preloader.

There are dependencies for redux-devtools, but that they are not used.
Are you guys manually adding and removing redux-devtools?
I was thinking that it would be good if we could get them included via a specific npm run * command. Do you guys have a plan for this already in the works?

There are a couple of improvements we can make to the way we use stateless functional components in the two React starters.

For example, consider this component:

import React from 'react';

const Input = ({
  type,
  style,
  placeholder,
  fieldDefinition,
}) => (
  // ...
);

Input.propTypes = {
  type: React.PropTypes.string,
  style: React.PropTypes.object,
  placeholder: React.PropTypes.string,
  fieldDefinition: React.PropTypes.object.isRequired,
};

Input.defaultProps = {
  type: 'text',
  style: {},
  placeholder: '',
};

export default Input;

Now consider this version:

import React from 'react';

export default function Input({
  type = 'text',
  style = {},
  placeholder = '',
  fieldDefinition,
}) {
  return (
    // ...
  );
};

Input.propTypes = {
  type: React.PropTypes.string,
  style: React.PropTypes.object,
  placeholder: React.PropTypes.string,
  fieldDefinition: React.PropTypes.object.isRequired,
};

IMO it has several improvements:

1. less boilerplate
2. specifying default params inline as part of parameter destructuring is DRY-er
3. using named functions instead of arrow functions results in better stack traces (?). Since we don't need this in a stateless component there's no point to using an arrow function anyway.
4. we get to put the export default at the top; this reads more naturally to me.

Their history API has changed. Need to adjust to the new model.

Warning: postcss-cssnext found a duplicate plugin ('autoprefixer') in your postcss plugins. This might be inefficient. You should remove 'autoprefixer' from your postcss plugin list since it's already included by postcss-cssnext.
Note: If, for a really specific reason, postcss-cssnext warnings are irrelevant for your use case, and you really know what you are doing, you can disable this warnings by setting 'warnForDuplicates' option of postcss-cssnext to 'false'.

Can you please provide a way to get a project started without having to create a remote github repository first?

Good when all I want is play with the bits, explore the starters outputs, etc.

Thanks a lot.

I successfully start a new react redux project using rangle-starter.

ericjimenez@rngl ~/W/Rangle> rangle-starter react-redux-starter ericjim https://github.com/ericjim/react-playground.git
org: //github.com/ericjim folder: react-playground
Cloning into 'react-playground'...
Saving password to keychain failed
Identity added: /Users/ericjimenez/.ssh/id_rsa ((null))
remote: Counting objects: 87, done.
remote: Compressing objects: 100% (71/71), done.
remote: Total 87 (delta 5), reused 59 (delta 4), pack-reused 0
Receiving objects: 100% (87/87), 23.75 KiB | 0 bytes/s, done.
Resolving deltas: 100% (5/5), done.
Checking connectivity... done.
Initialized empty Git repository in /Users/ericjimenez/Workspace/Rangle/react-playground/.git/
[master (root-commit) 2be5f50] Initial commit from source:
 64 files changed, 1898 insertions(+)
 ....

However, my origin remote has an invalid link.

ericjimenez@rngl ~/W/R/react-playground> git push origin master
ssh: Could not resolve hostname https: nodename nor servname provided, or not known
fatal: Could not read from remote repository.

Please make sure you have the correct access rights
and the repository exists.

Upon further inspection, I see that my origin is missing the //github.com

ericjimenez@rngl ~/W/R/react-playground> git remote --verbose
origin  https:ericjim/react-playground.git (fetch)
origin  https:ericjim/react-playground.git (push)
upstream    https://github.com/ericjim/react-playground.git (fetch)
upstream    https://github.com/ericjim/react-playground.git (push)

With that said, since I am using two-step auth, I need to use an ssh key to push to my repo using the starter. So I change the remote to...

ericjimenez@rngl ~/W/R/react-playground> git remote rm origin
ericjimenez@rngl ~/W/R/react-playground> git remote add origin [email protected]:ericjim/react-playground.git
ericjimenez@rngl ~/W/R/react-playground> git push origin master
Counting objects: 87, done.
Delta compression using up to 8 threads.
Compressing objects: 100% (75/75), done.
Writing objects: 100% (87/87), 23.54 KiB | 0 bytes/s, done.
Total 87 (delta 5), reused 0 (delta 0)
To [email protected]:ericjim/react-playground.git
 * [new branch]      master -> master

And that's how I circumvent the malformed origin link when using the starter.

Varun is cooking up some better ideas for CSS handling with webpack and cssnext. Once it's solidified, let's get it into the starters.

The NPM scripts currently assume we have things like webpack, cross-env, eslint, etc globally installed. This is not mentioned anywhere. Since, we already install these as local dependencies we can use node_modules/.bin links instead. For example:

"build": "node_modules/.bin/cross-env NODE_ENV=production node_modules/.binwebpack -p"

https://docs.angularjs.org/guide/component

Currently not hooked up for at least the angular 2 starter - let's make sure it's hooked up for all starters.

The starter app breaks down UI into granular UI components, consistent with our practice. However they are not namespaced to the project, which is inconsistent with our practice.

This leads to the risk of name clashes with other libraries, and in some cases with HTML itself (which is bad).

Early attempts to upgrade to Babel 6 exposed a lot of bugs in Babel. We should try again soon.

Probably base things on the react apps, since they're more mature.

I noticed that the angular2 starter has all its dependencies listed under devDependencies. This should probably get split properly for when someone has built an app and wants to deploy it and run npm install --production [in their Dockerfile for example].