Click the green "Use this template" button at the top of this page and enter a name and description for your repo.
Run the setup script
npm run setup
Run the example app
npm start -s
This will run the automated build process, start up a webserver, and open the application in your default browser. When doing development with this kit, this command will continue watching all your files. Every time you hit save the code is rebuilt, linting runs, and tests run automatically. Note: The -s flag is optional. It enables silent mode which suppresses unnecessary messages during the build.
Review the example app.
This starter kit includes a working example app that calculates fuel savings. Note how all source code is placed under /src. Tests are placed alongside the file under test. The final built app is placed under /dist. These are the files you run in production.
Complete the steps below for your operating system:
macOS
Install watchman via brew install watchman or fswatch via brew install fswatch to avoid this issue which occurs if your macOS has no appropriate file watching service installed.
If you already have Visual Studio installed:
Open Visual Studio and go to File -> New -> Project -> Visual C++ -> Install Visual C++ Tools for Windows Desktop.
The C++ compiler is used to compile browser-sync (and perhaps other Node modules).
Run npm install - If you forget to do this, you'll see this: babel-node: command not found.
Install the latest version of Node.
Make sure files with names that begin with a dot (.editorconfig, .gitignore, .npmrc) are copied to the project directory root. This is easy to overlook if you copy this repository manually.
Don't run the project from a symbolic link. It may cause issues with file watches.
Delete any .eslintrc that you're storing in your user directory. Also, disable any ESLint plugin / custom rules that you've enabled within your editor. These will conflict with the ESLint rules defined in this project.
Tip: Things to check if you get an npm run lint error or build error:
If ESW found an error or warning in your project (e.g. console statement or a missing semi-colon), the lint thread will exit with Exit status 1. To fix:
Change the npm run lint script to "esw webpack.config.* src tools; exit 0"
Change the npm run lint:watch script to "esw webpack.config.* src tools --watch; exit 0"
Note: Adding exit 0 will allow the npm scripts to ignore the status 1 and allow ESW to print all warnings and errors.
Ensure the eslint/esw globally installed version matches the version used in the project. This will ensure the esw keyword is resolved.
Rebuild node-sass with npm rebuild node-sass if you are having and error like Node Sass does not yet support your current environment on macOS XXX after an initial npm start -s.
Technologies
Slingshot offers a rich development experience using the following technologies:
When I try out the example app, I sometimes see a FOUC in Chrome: when the page loads, the components are rendered before the css is loaded. This causes the components to appear unstyled for a short moment. You may have to stroke F5 multiple times to see this effect.
I've only experienced this effect in Chrome, other browsers I tried (Firefox, Edge) do fine.
Hello I am starting an app with your starter kit. I wanted to include normalize.css and react-toolbox but I am getting these errors during the build:
ERROR in ./~/normalize.css/normalize.css
Module parse failed: /home/jules/projects/tourbnb-frontend/node_modules/normalize.css/normalize.css Line 9: Unexpected token {
You may need an appropriate loader to handle this file type.
| */
|
| html {
| font-family: sans-serif; /* 1 */
| -ms-text-size-adjust: 100%; /* 2 */
@ ./src/index.js 29:0-24
ERROR in ./~/react-toolbox/lib/app/App.js
Module not found: Error: Cannot resolve 'file' or 'directory' ./style in /home/jules/projects/tourbnb-frontend/node_modules/react-toolbox/lib/app
@ ./~/react-toolbox/lib/app/App.js 11:13-31
This is my index.js:
import React from 'react';
import {render} from 'react-dom';
import { Provider } from 'react-redux';
import ToolboxApp from 'react-toolbox/lib/app';
import App from './containers/App';
import configureStore from './store/configureStore';
import './styles/styles.scss'; //Yep, that's right. You can import SASS/CSS files too! Webpack will run the associated loader and plug this into the page.
import 'normalize.css';
const store = configureStore();
render(
<Provider store={store}>
<ToolboxApp>
<App />
</ToolboxApp>
</Provider>, document.getElementById('app')
);
I am fairly new to react and webpack, so I am sorry if it's something really obvious.
ERROR in ./src/img/automation_icons.png Module parse failed: /Volumes/External Drive/Repos/provisioner/src/img/image.png Line 1: Unexpected token ILLEGAL You may need an appropriate loader to handle this file type. (Source code omitted for this binary file) @ ./~/css-loader!./~/sass-loader!./src/styles/styles.scss 6:376-414 6:469-507 6:556-594
Hi, i'm trying to build an app from the scratch, i'm trying to import a third party plugin but i'm getting this error:
ERROR in ./~/bpmn-moddle/resources/bpmn/json/bpmndi.json
Module parse failed: /Users/wardrakus/projects/muve-recon-client/node_modules/bpmn-moddle/resources/bpmn/json/bpmndi.json Line 2: Unexpected token :
You may need an appropriate loader to handle this file type.
| {
| "name": "BPMNDI",
| "uri": "http://www.omg.org/spec/BPMN/20100524/DI",
| "types": [
@ ./~/bpmn-moddle/lib/simple.js 9:10-55
ERROR in ./~/bpmn-moddle/resources/bpmn/json/dc.json
Module parse failed: /Users/wardrakus/projects/muve-recon-client/node_modules/bpmn-moddle/resources/bpmn/json/dc.json Line 2: Unexpected token :
You may need an appropriate loader to handle this file type.
| {
| "name": "DC",
| "uri": "http://www.omg.org/spec/DD/20100524/DC",
| "types": [
@ ./~/bpmn-moddle/lib/simple.js 10:6-47
ERROR in ./~/bpmn-moddle/resources/bpmn/json/bpmn.json
Module parse failed: /Users/wardrakus/projects/muve-recon-client/node_modules/bpmn-moddle/resources/bpmn/json/bpmn.json Line 2: Unexpected token :
You may need an appropriate loader to handle this file type.
| {
| "name": "BPMN20",
| "uri": "http://www.omg.org/spec/BPMN/20100524/MODEL",
| "associations": [],
@ ./~/bpmn-moddle/lib/simple.js 8:8-51
ERROR in ./~/bpmn-moddle/resources/bpmn/json/di.json
Module parse failed: /Users/wardrakus/projects/muve-recon-client/node_modules/bpmn-moddle/resources/bpmn/json/di.json Line 2: Unexpected token :
You may need an appropriate loader to handle this file type.
| {
| "name": "DI",
| "uri": "http://www.omg.org/spec/DD/20100524/DI",
| "types": [
@ ./~/bpmn-moddle/lib/simple.js 11:6-47
the same is happening when i try to import css files from node_modules:
ERROR in ./~/css-loader?sourceMap!./~/sass-loader?sourceMap!./src/styles/main.scss
Module not found: Error: Cannot resolve 'file' or 'directory' ../font/bpmn.eot in /Users/wardrakus/projects/muve-recon-client/src/styles
@ ./~/css-loader?sourceMap!./~/sass-loader?sourceMap!./src/styles/main.scss 6:9207-9243 6:9266-9302
ERROR in ./~/css-loader?sourceMap!./~/sass-loader?sourceMap!./src/styles/main.scss
Module not found: Error: Cannot resolve 'file' or 'directory' ../font/bpmn.woff in /Users/wardrakus/projects/muve-recon-client/src/styles
@ ./~/css-loader?sourceMap!./~/sass-loader?sourceMap!./src/styles/main.scss 6:9353-9390
ERROR in ./~/css-loader?sourceMap!./~/sass-loader?sourceMap!./src/styles/main.scss
Module not found: Error: Cannot resolve 'file' or 'directory' ../font/bpmn.ttf in /Users/wardrakus/projects/muve-recon-client/src/styles
@ ./~/css-loader?sourceMap!./~/sass-loader?sourceMap!./src/styles/main.scss 6:9422-9458
ERROR in ./~/css-loader?sourceMap!./~/sass-loader?sourceMap!./src/styles/main.scss
Module not found: Error: Cannot resolve 'file' or 'directory' ../font/bpmn.svg in /Users/wardrakus/projects/muve-recon-client/src/styles
@ ./~/css-loader?sourceMap!./~/sass-loader?sourceMap!./src/styles/main.scss 6:9494-9530
i really don't have idea what is happening, i tried the same app in a simple browserify setup, and it imported the plugin and it worked as expected, what do you think that can be happening, i'm kind of new with webpack.
@coryhouse, this isn't an issue to add TypeScript support as your boilerplate is Babel, but it's just to mention that I have a fork with TypeScript support if that floats people's boats. You can check it out here, https://github.com/typescriptcrew/ts-react-slingshot . I still have some tweaking to do with the typings for stateless components, but aside from that it's all running.
Would there be a way to do without the scripts in tools/? It seems with a little uglyness in package.js you could call browser-sync as a npm run script? I thought the whole idea of using npm run scripts was to have package.json be the single configuration file...
I'm guessing it's because you can't specify middlewares on the command line?
Right now I'm trying to get a minimum viable webpack+browser-sync build system and it seems like if I'm going to use custom scripts like those in the tools/ folder, I might as well use a task runner like gulp...
otto at Ottos-MacBook-Pro in ~/code/meteor/projects/react-slingshot on master
$ npm start -s
sh: babel-node: command not found
otto at Ottos-MacBook-Pro in ~/code/meteor/projects/react-slingshot on master
$ module.js:327
throw err;
^
Error: Cannot find module 'lodash/lang/cloneDeep'
at Function.Module._resolveFilename (module.js:325:15)
I'd rather not remove it entirely, thats destructive. Right now i dont actually use browser-sync, but at build it requires having Python and the Visual Studio C++ compiler installed on the Windows dev machine.
Is there a way to disable browser-sync at build to drop the Python / Visual Studio dependencies?
I did not have this problem until yesterday, when my Windows machine (that already had Python and VS installed for other reasons) decided to stop auto-magically working ..for no apparent reason. Apparently stuff on my Windows dev machine is colliding, and i wasted enough hours on that to take my loss and move on.
In this archictecture how do you access state from outside of components?
My use case is this:
I want certain components, when loaded, to register menu links onto the navigation system, potentially interacting with the user ACL. Other similar stuff might include i18n content registration etc.
How would I add stuff to the state / call actions not from inside the containers, but upon load time?
Thanks, Dave
I have above configuration, when I navigate to /auth/login it works. however when I refresh the page, history fallback lib is not rendering the component instead it shows blank screen!
Running npm start -s is failing with: "Module build failed: ReferenceError: /react-slingshot/node_modules/eslint-loader/index.js!/react-slingshot/src/index.js: Symbol is not defined"
babel-plugin-react-transform needs to be updated to version 1.1.1 in package.json
Looks like chokidar is not working under Ubuntu. Got this Unhandled error:
npm WARN optional Skipping failed optional dependency /chokidar/fsevents:
npm WARN notsup Not compatible with your operating system or architecture: [email protected]
npm WARN [email protected] No repository field.
events.js:141
throw er; // Unhandled 'error' event
^
Error: watch src ENOSPC
at exports._errnoException (util.js:870:11)
at FSWatcher.start (fs.js:1234:19)
at Object.fs.watch (fs.js:1262:11)
at createFsWatchInstance (/home/macedo/w/react-slingshot/node_modules/chokidar/lib/nodefs-handler.js:37:15)
at setFsWatchListener (/home/macedo/w/react-slingshot/node_modules/chokidar/lib/nodefs-handler.js:80:15)
at FSWatcher.NodeFsHandler._watchWithNodeFs (/home/macedo/w/react-slingshot/node_modules/chokidar/lib/nodefs-handler.js:228:14)
at FSWatcher.NodeFsHandler._handleDir (/home/macedo/w/react-slingshot/node_modules/chokidar/lib/nodefs-handler.js:407:19)
at FSWatcher.<anonymous> (/home/macedo/w/react-slingshot/node_modules/chokidar/lib/nodefs-handler.js:455:19)
at FSWatcher.<anonymous> (/home/macedo/w/react-slingshot/node_modules/chokidar/lib/nodefs-handler.js:460:16)
at FSReqWrap.oncomplete (fs.js:82:15)
npm ERR! Linux 4.2.0-22-generic
npm ERR! argv "/usr/bin/nodejs" "/usr/bin/npm" "run" "open"
npm ERR! node v4.2.4
npm ERR! npm v3.5.2
npm ERR! code ELIFECYCLE
npm ERR! [email protected] open: `node tools/server.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] open script 'node tools/server.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-slingshot package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! node tools/server.js
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs react-slingshot
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls react-slingshot
npm ERR! There is likely additional logging output above.
npm ERR! Please include the following file with any support request:
npm ERR! /home/macedo/w/react-slingshot/npm-debug.log
npm ERR! Linux 4.2.0-22-generic
npm ERR! argv "/usr/bin/nodejs" "/usr/bin/npm" "start"
npm ERR! node v4.2.4
npm ERR! npm v3.5.2
npm ERR! code ELIFECYCLE
npm ERR! [email protected] start: `parallelshell "npm run test" "npm run open"`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] start script 'parallelshell "npm run test" "npm run open"'.
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-slingshot package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! parallelshell "npm run test" "npm run open"
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs react-slingshot
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls react-slingshot
npm ERR! There is likely additional logging output above.
npm ERR! Please include the following file with any support request:
npm ERR! /home/macedo/w/react-slingshot/npm-debug.log
macedo@macedo-Z97-D3H:~/w/react-slingshot$
[▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬]
29 passing (32ms)
I am having some problems debugging using Chrome Dev Tools. Breakpoints are not working.
The source maps are working - i.e. I can navigate the code files ok. I have tried with and without the React Dev Toole extension enabled, and I have cleared my cache, but no luck.
Googling and searching on StackOverflow gives me the impression that it may have to do with the fact that React Slingshot saves source maps to memory, not to file. I've seen discussion on clearing my workspace folder - I have no workspace folder specified. Should there be?
I'm getting an error intermittently when running npm run start: Error: listen EADDRINUSE :::3002. It appears it's an error caused by that port being currently in use. If I rerun the command it usually works. Not a biggie, just an annoyance. If I knew what was going on I'd be happy to submit a PR. Thanks for your work, love this!
fuelSavings.js contains this comment:
//in a real app we'd trigger an AJAX call here.
I thought since reducers are pure functions, you are not supposed to make Ajax calls from them.
Instead I think you are supposed to make an Ajax call from an event handling method and then dispatch an action based on the result.
const bourbon = require('node-bourbon').includePaths;
if (env === productionEnvironment ) {
// generate separate physical stylesheet for production build using ExtractTextPlugin. This provides separate caching and avoids a flash of unstyled content on load.
loaders.push({
test: /(\.css|\.scss)$/,
include: path.join(__dirname, 'src'),
loader: ExtractTextPlugin.extract("css?sourceMap!sass?outputStyle=expanded&includePaths[]=" + bourbon)
});
} else {
loaders.push({
test: /(\.css|\.scss)$/,
include: path.join(__dirname, 'src'),
loaders: ['style', 'css?sourceMap', 'sass?outputStyle=expanded&includePaths[]=' + bourbon]
});
}
and in styles.scss, I import bourbon globally as i normally would: @import 'bourbon';
However, this results in the following error:
@import 'bourbon';
File to import not found or unreadable: bourbon
Parent style sheet: stdin
in /Users/sirrah/Koding/work/thirdshelf/loyalty-grader/src/styles/styles.scss (line 2, column 1)
Error:
@import 'bourbon';
File to import not found or unreadable: bourbon
Parent style sheet: stdin
in /Users/sirrah/Koding/work/thirdshelf/loyalty-grader/src/styles/styles.scss (line 2, column 1)
at options.error (/Users/sirrah/Koding/work/thirdshelf/loyalty-grader/node_modules/node-sass/lib/index.js:277:32)
@ ./src/styles/styles.scss 4:14-280 13:2-17:4 14:20-286
This use to work fine, however I believe that in this case it is because of ExtractTextPlugin since it is the only difference between me doing this on previous projects and this one.
Hey, currently no-console is set to error level 2 (exit) based on the recommended settings.
Since you're also setting no-debugger to 1 in your config, no-console should be 1 too. It doesn't break any production code but is a valuable debugging tool in development.
The only way I could get Thunk to work is by upgrading Redux to 3.1.3 and React Redux to 4.4.0. Is this true? If so, the template should probably be upgraded to use those versions by default.
I tried to make a build on Node 0.12.2, but the build.js is using ES6 arrow functions. As far as I can see, arrow functions are supported since Node 4.0.0.
Should this dependency at least be noted in the readme? Some people come with Node 0.1x versions, for example because their standard package manager has 0.1x (e.g. Ubuntu).
A way to make it work on old Node versions would be babel-node from babel-cli, AFAIK.
Great starter project. Have you considered putting this inside a yeoman generator, and making options like whether you want a sample app included controllable from the yeoman command line? You could also auto-populate other values like custom name of project etc etc.
Just a lot cleaner than git fork / clone and then hacking the codebase / removing redundant git remotes etc :D Like the use of package.json scripts - I was considering doing something very similar.
A quick grep of the codebase reveals that jQuery is not being utilized by the codebase. Is there any reason as to why its set as a global in the .eslintrc?
doesn't make it clear whether you should remove or keep react-redux and Provider
doesn't make it clear whether you should remove or keep store, configureStore
"reference your top level component (instead of Redux's root container at ./containers/root)" is not followable. There is nothing left after following the removal steps which actually imports or requires /containers/root
From colone/install/run via directions, did not seem to impact functionality:
Error: Cannot find module './NumberFormatter'
at Function.Module._resolveFilename (module.js:338:15)
at Function.Module._load (module.js:289:25)
at Module.require (module.js:366:17)
at require (module.js:385:17)
at Object. (/home/tml/projects/react-slingshot/src/businessLogic/numberFormatter.spec.js:5:24)
at Module._compile (module.js:425:26)
at normalLoader (/home/tml/projects/react-slingshot/node_modules/babel-core/lib/api/register/node.js:199:5)
at Object.require.extensions.(anonymous function) as .js
at Module.load (module.js:356:32)
at Function.Module._load (module.js:313:12)
at Module.require (module.js:366:17)
at require (module.js:385:17)
at /home/tml/projects/react-slingshot/node_modules/mocha/lib/mocha.js:216:27
at Array.forEach (native)
at Mocha.loadFiles (/home/tml/projects/react-slingshot/node_modules/mocha/lib/mocha.js:213:14)
at Mocha.run (/home/tml/projects/react-slingshot/node_modules/mocha/lib/mocha.js:453:10)
at loadAndRun (/home/tml/projects/react-slingshot/node_modules/mocha/bin/_mocha:349:22)
at Object. (/home/tml/projects/react-slingshot/node_modules/mocha/bin/_mocha:366:3)
at Module._compile (module.js:425:26)
at Object.Module._extensions..js (module.js:432:10)
at Module.load (module.js:356:32)
at Function.Module._load (module.js:313:12)
at Function.Module.runMain (module.js:457:10)
at startup (node.js:138:18)
at node.js:974:3
In the past, I've used webpack-dev-server proxy to pass API calls from my dev React app to a running API server (Rails or Node, but that does not matter TBH).
I tried adding the webpack-dev-server proxy to srcServer.js:
proxy: {
'/api/*': {
target: 'http://localhost:3000/',
secure: false
// ...
then I realized that this project wraps webpack-dev-middleware around browserSync, so it does not work. Adding the browserSync proxy does not serve the web/React assets properly - all this stuff should live in the react-slingshot project, and only API calls should be proxy'd to the API server. Suggestions for making this work?
So I've run into a bit of a wall with background images in sass loader. They are being encrypted in base64 and I can't seem to get them to link up correctly. I know this isn't a sass loader project, but was wondering if you had any recommendations on what to use along side it for the react-slingshot setup?
Right now, you have to hit Ctrl+c/Cmd+c to kill the process since the test script keeps watching files after the build completes. No biggie, but a minor annoyance worth fixing.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent