bradleyboy / yarsk Goto Github PK
View Code? Open in Web Editor NEWDon't use this, use Create React App
Don't use this, use Create React App
would you mind adding an example for saucelab integration? I can't seem to make it work, getting
Disconnected (1 times), because no message in 10000 ms.
Please add the support expressjs
Hello @bradleyboy , thanks for this amazing starter kit. I am developing an application using your starter kit and I am getting the following error while I am trying to run npm start
`
➜ analyze git:(master) ✗ npm start
[email protected] start /Users/anup/projects/analyze
webpack-dev-server --config conf/webpack.config.js --hot --history-api-fallback --progress --colors --content-base ./build --host 0.0.0.0
0% compilehttp://0.0.0.0:8080/webpack-dev-server/
webpack result is served from /
content is served from /Users/anup/projects/analyze/build
404s will fallback to /index.html
10% 0/1 build modulesReferenceError: couldn't resolve escope/referencer
at monkeypatch (/Users/anup/projects/analyze/node_modules/babel-eslint/index.js:85:11)
at Object.exports.parse (/Users/anup/projects/analyze/node_modules/babel-eslint/index.js:422:5)
at parse (/Users/anup/projects/analyze/node_modules/eslint/lib/eslint.js:462:27)
at EventEmitter.module.exports.api.verify (/Users/anup/projects/analyze/node_modules/eslint/lib/eslint.js:614:15)
at processText (/Users/anup/projects/analyze/node_modules/eslint/lib/cli-engine.js:225:23)
at CLIEngine.executeOnText (/Users/anup/projects/analyze/node_modules/eslint/lib/cli-engine.js:336:22)
at lint (/Users/anup/projects/analyze/node_modules/eslint-loader/index.js:17:20)
at Object.module.exports (/Users/anup/projects/analyze/node_modules/eslint-loader/index.js:80:3)
at WEBPACK_CORE_LOADER_EXECUTION (/Users/anup/projects/analyze/node_modules/webpack-core/lib/NormalModuleMixin.js:155:71)
at runSyncOrAsync (/Users/anup/projects/analyze/node_modules/webpack-core/lib/NormalModuleMixin.js:155:93)
at nextLoader (/Users/anup/projects/analyze/node_modules/webpack-core/lib/NormalModuleMixin.js:290:3)
at /Users/anup/projects/analyze/node_modules/webpack-core/lib/NormalModuleMixin.js:259:5
at Storage.finished (/Users/anup/projects/analyze/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:38:16)
at /Users/anup/projects/analyze/node_modules/graceful-fs/graceful-fs.js:78:16
at FSReqWrap.readFileAfterClose as oncomplete
npm ERR! Darwin 15.5.0
npm ERR! argv "/usr/local/Cellar/node/6.3.0/bin/node" "/usr/local/bin/npm" "start"
npm ERR! node v6.3.0
npm ERR! npm v3.10.3
npm ERR! code ELIFECYCLE
npm ERR! [email protected] start: webpack-dev-server --config conf/webpack.config.js --hot --history-api-fallback --progress --colors --content-base ./build --host 0.0.0.0
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] start script 'webpack-dev-server --config conf/webpack.config.js --hot --history-api-fallback --progress --colors --content-base ./build --host 0.0.0.0'.
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 yarsk package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! webpack-dev-server --config conf/webpack.config.js --hot --history-api-fallback --progress --colors --content-base ./build --host 0.0.0.0
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs yarsk
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls yarsk
npm ERR! There is likely additional logging output above.
npm ERR! Please include the following file with any support request:
npm ERR! /Users/anup/projects/analyze/npm-debug.log
➜ analyze git:(master) ✗
`
I tried the following steps and I am still not able to find where I am going wrong:
My configuration and versions of npm:
Can you help me with the following issue and help me out?
On Mac OSX,
After pulling master and running npm install and npm start, I get the following message:
[email protected] start /Users/jiangkewei/yarsk
webpack-dev-server --config conf/webpack.config.js --hot --progress --colors --inline --content-base ./build70% 1/1 build moduleshttp://localhost:8080/
webpack result is served from http://localhost:8080/
content is served from /Users/jiangkewei/yarsk/build
[1] 8344 segmentation fault npm start
Any clues as to why this is happening?
I tried this on the same machine last month or so and it worked fine. I can only guess it's caused by some dependency update, and I'm trying to trial-and-error which one it could be. :/
Hi again,
I have tried using generated react app to be rendered on server side, by instance with Express with no success...
Would you mind do provide a simple example.
My idea was to use generated ES5 js sources instead of ES6 not handled quite well with Express.
Then see if bundle can be digest in server express code to call Application react root node.
var express = require('express')
, app = express()
, React = require('react/addons')
, components = require('TODO'); // js react component file ? app.js ?
var Application = React.createFactory(components.Application);
// application
app.get("/*", function(req, res) {
res.contentType = "text/html; charset=utf8";
var html = Application();
res.end(html);
});
var port = +(process.env.PORT || 8080);
app.listen(port, function() {
console.log("Server listening on port " + port);
});
I have looked into react-starter but looks complicated and not ES6 by default
i'm trying to start the server with the command
npm start
everything builds smoothly but when i go to http://localhost:8080 i see the error
Cannot GET /
i think that maybe there's something wrong with HtmlWebpackPlugin configuration.
npm start
and go to http:localhost:8080\index.html all is well. Close browser and stop server then..
npm install -g http-server
npm run build
cd dist
http-server
Go to same http:localhost:8080\index.html and only see black screen (missing the bg image) all other content is there.
sass-loader 1.0 offers a new handy feature of handling import
statements like require(). However, there is an issue that needs resolving before pulling this in (webpack-contrib/sass-loader#65).
missing node deps? not a sass user here.
$ npm run build
> [email protected] build /Users/Jeff/repos/yarsk
> webpack --config conf/webpack.production.js
Error: `libsass` bindings not found. Try reinstalling `node-sass`?
at getBinding (/Users/Jeff/repos/yarsk/node_modules/sass-loader/node_modules/node-sass/lib/index.js:22:11)
at Object.<anonymous> (/Users/Jeff/repos/yarsk/node_modules/sass-loader/node_modules/node-sass/lib/index.js:188:23)
at Module._compile (module.js:460:26)
at Object.Module._extensions..js (module.js:478:10)
at Module.load (module.js:355:32)
at Function.Module._load (module.js:310:12)
at Module.require (module.js:365:17)
at require (module.js:384:17)
at Object.<anonymous> (/Users/Jeff/repos/yarsk/node_modules/sass-loader/index.js:4:12)
at Module._compile (module.js:460:26)
In case Sass ain't your thing.
So I followed your step by step which was pretty flawless for now. But this is the output I get:
Asset Size Chunks Chunk Names
f81123791caadd01a948c1bc8d3082ef.jpg 766 kB [emitted]
app.5424fa5a93311efc1d88.js 154 kB 0 [emitted] main
app.5424fa5a93311efc1d88.css 1.98 kB 0 [emitted] main
index.html 398 bytes [emitted]
Therefore it seems that your bundle size is really more like 154kB rather than 40...
Could you please check on your end. Because if you get 40kB I want to know how :)
0 info it worked if it ends with ok
1 verbose cli [ '/usr/local/bin/node', '/usr/local/bin/npm', 'start' ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ 'prestart', 'start', 'poststart' ]
5 info lifecycle [email protected]prestart: [email protected]prestart: no script for prestart, continuing
6 silly lifecycle [email protected]
7 info lifecycle [email protected]start: [email protected]start: unsafe-perm in lifecycle true
8 verbose lifecycle [email protected]
9 verbose lifecycle [email protected]start: PATH: /usr/local/lib/node_modules/npm/bin/node-gyp-bin:/Users/jonatan/projects/reactStarter/node_modules/.bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbinstart: CWD: /Users/jonatan/projects/reactStarter
10 verbose lifecycle [email protected]
11 silly lifecycle [email protected]start: Args: [ '-c',start: Returned: code: 1 signal: null
11 silly lifecycle 'webpack-dev-server --config conf/webpack.config.js --hot --progress --colors --content-base ./build' ]
12 silly lifecycle [email protected]
13 info lifecycle [email protected]~start: Failed to exec start script
14 verbose stack Error: [email protected] start: webpack-dev-server --config conf/webpack.config.js --hot --progress --colors --content-base ./build
14 verbose stack Exit status 1
14 verbose stack at EventEmitter. (/usr/local/lib/node_modules/npm/lib/utils/lifecycle.js:232:16)
14 verbose stack at emitTwo (events.js:87:13)
14 verbose stack at EventEmitter.emit (events.js:172:7)
14 verbose stack at ChildProcess. (/usr/local/lib/node_modules/npm/lib/utils/spawn.js:24:14)
14 verbose stack at emitTwo (events.js:87:13)
14 verbose stack at ChildProcess.emit (events.js:172:7)
14 verbose stack at maybeClose (internal/child_process.js:818:16)
14 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:211:5)
15 verbose pkgid [email protected]
16 verbose cwd /Users/jonatan/projects/reactStarter
17 error Darwin 15.3.0
18 error argv "/usr/local/bin/node" "/usr/local/bin/npm" "start"
19 error node v4.2.3
20 error npm v3.5.2
21 error code ELIFECYCLE
22 error [email protected] start: webpack-dev-server --config conf/webpack.config.js --hot --progress --colors --content-base ./build
22 error Exit status 1
23 error Failed at the [email protected] start script 'webpack-dev-server --config conf/webpack.config.js --hot --progress --colors --content-base ./build'.
23 error Make sure you have the latest version of node.js and npm installed.
23 error If you do, this is most likely a problem with the yarsk package,
23 error not with npm itself.
23 error Tell the author that this fails on your system:
23 error webpack-dev-server --config conf/webpack.config.js --hot --progress --colors --content-base ./build
23 error You can get information on how to open an issue for this project with:
23 error npm bugs yarsk
23 error Or if that isn't available, you can get their info via:
23 error npm owner ls yarsk
23 error There is likely additional logging output above.
24 verbose exit [ 1, true ]
Just need to pull this in from bradleyboy/react-todo-flummox
react-transform-hmr is the new react-hot-loader. Should switch once stateless functions are working and also change some of the yarsk's demo code to use stateless fns:
Trying it out...get this after npm install. Installing lodash does not fix it-
$ npm run serve
> [email protected] serve /Users/Jeff/repos/ghtemp
> webpack-dev-server --config conf/webpack.config.js --hot --progress --colors --inline --content-base ./build
http://localhost:8080/
webpack result is served from /
content is served from /Users/Jeff/repos/ghtemp/build
-25% 1/4 build modules
/Users/Jeff/repos/ghtemp/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:204
throw e;
^
Error: Cannot find module 'lodash/lang/isFunction'
at Function.Module._resolveFilename (module.js:338:15)
at Function.Module._load (module.js:280:25)
at Module.require (module.js:364:17)
at require (module.js:380:17)
at Object.<anonymous> (/Users/Jeff/repos/ghtemp/node_modules/babel-core/lib/babel/api/node.js:13:34)
at Module._compile (module.js:456:26)
at Object.Module._extensions..js (module.js:474:10)
at Module.load (module.js:356:32)
at Function.Module._load (module.js:312:12)
at Module.require (module.js:364:17)
Hi,
So nice kit.
Could you advise me about SEO results if I only host my react website with no server rendering.
It is just a one page presentation website, is it correct in term of crawling and indexation.
My React renders some section with text inside..
Thanks,
Julien
Right now, we have build/index.html
for the dev HTML and conf/tmpl.html
which is used for npm run build
and the GitHub pages build. Would be nice to have them source the same template, as for now you have to make changes in two places.
Also, getting this into webpack would allow for auto reload when changes to the HTML page are made.
Hi,
Just wondering. Is there an easy way to give the generated local css classnames a more readable name so you can trace them back easily to the css classnames for debugging?
yo angular
_-----_
| | .--------------------------.
|--(o)--| | Welcome to Yeoman, |
---------´ | ladies and gentlemen! | ( _´U
_ ) '--------------------------'
/_A\
| ~ |
**'.**.'__
´ |° ´ Y
Out of the box I include Bootstrap and some AngularJS recommended modules.
? Would you like to use Sass (with Compass)? Yes
? Would you like to include Bootstrap? Yes
? Would you like to use the Sass version of Bootstrap? Yes
? Which modules would you like to include? angular-animate.js, angular-cookies.js, angular-resource.js, angular-route.js, angular-sanitize.js, angular-touch.js
create app/styles/main.scss
create app/index.html
create bower.json
identical .bowerrc
create package.json
create Gruntfile.js
create README.md
invoke angular:common:/usr/local/lib/node_modules/generator-angular/app/index.js
identical .editorconfig
identical .gitattributes
identical .jshintrc
identical .yo-rc.json
identical .gitignore
create test/.jshintrc
create app/.buildignore
create app/.htaccess
create app/404.html
create app/favicon.ico
create app/robots.txt
create app/views/main.html
create app/images/yeoman.png
invoke angular:main:/usr/local/lib/node_modules/generator-angular/app/index.js
create app/scripts/app.js
invoke angular:controller:/usr/local/lib/node_modules/generator-angular/app/index.js
create app/scripts/controllers/main.js
create test/spec/controllers/main.js
module.js:338
throw err;
^
Error: Cannot find module 'lodash'
at Function.Module._resolveFilename (module.js:336:15)
at Function.Module._load (module.js:278:25)
at Module.require (module.js:365:17)
at require (module.js:384:17)
at Object. (/usr/local/lib/node_modules/generator-karma/node_modules/yeoman-generator/lib/env/index.js:6:9)
at Module._compile (module.js:460:26)
at Object.Module._extensions..js (module.js:478:10)
at Module.load (module.js:355:32)
at Function.Module._load (module.js:310:12)
at Module.require (module.js:365:17)
at require (module.js:384:17)
Forgive me if this is common knowledge, but it might be nice to throw something in the README about needing to npm install babel --save
and put require("babel/register");
into Application/index.jsx
. This includes the Babel polyfill in the build, which I believe is required in certain browsers for things like Symbol.iterator
. My app was failing to load on iOS and OS X Safari without the polyfill.
For browsers / devtools like Chrome and Firefox that support sourcemaps, it would be great to have generated sourcemaps.
Hi,
I am refactoring a react project and jsx with your project.
I do not know webpack and I am learning it now.
I was loading a json file first by making an ajax request on /myjson.json for instance to build Dom page then with react.
How can i serve this json file while using server deserved by your npm server start command ?
Thanks in advance,
Julien
A Yeoman generator might be interesting. Would be cleaner than having to fork this repo each time you start a new project:
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.