Code Monkey home page Code Monkey logo

react-slingshot's Introduction


Build status: Linux Build status: Windows Dependency Status Coverage Status

A comprehensive starter kit for rapid application development using React.

Why Slingshot?

  1. One command to get started - Type npm start to start development in your default browser.
  2. Rapid feedback - Each time you hit save, changes hot reload and linting and automated tests run.
  3. One command line to check - All feedback is displayed on a single command line.
  4. No more JavaScript fatigue - Slingshot uses the most popular and powerful libraries for working with React.
  5. Working example app - The included example app shows how this all works together.
  6. Automated production build - Type npm run build to do all this:

React Slingshot Production Build

Get Started

  1. Initial Machine Setup

    First time running the starter kit? Then complete the Initial Machine Setup.

  2. Click "Use this template"

    Click the green "Use this template" button at the top of this page and enter a name and description for your repo.

  3. Run the setup script

    npm run setup

  4. 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.

  5. 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.

  6. Delete the example app files.

    Once you're comfortable with how the example app works, you can delete those files and begin creating your own app.

  7. Having issues? See Having Issues?.

Initial Machine Setup

  1. Install Node 8.0.0 or greater

    Need to run multiple versions of Node? Use nvm.

  2. Install Git.

  3. Disable safe write in your editor to assure hot reloading works properly.

  4. 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.

    Linux

    • Run this to increase the limit on the number of files Linux will watch. Here's why.

      echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p.

    Windows

    • Install Python 2.7. Some node modules may rely on node-gyp, which requires Python on Windows.

    • Install C++ Compiler. Browser-sync requires a C++ compiler on Windows.

      Visual Studio Express comes bundled with a free C++ compiler.

      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).


Having Issues? Try these things first

  1. Make sure you ran all steps in Get started including the initial machine setup.

  2. Run npm install - If you forget to do this, you'll see this: babel-node: command not found.

  3. Install the latest version of Node.

  4. 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.

  5. Don't run the project from a symbolic link. It may cause issues with file watches.

  6. 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.

  7. Make sure you don't have NODE_ENV set to production on your machine. If you do then the development dependencies won't be installed. Here's how to check.

  8. Install watchman with brew install watchman if you are having the following error after an initial npm start -s:

    2017-09-05 00:44 node[68587] (FSEvents.framework) FSEventStreamStart: register_with_server: ERROR: f2d_register_rpc() => (null) (-22)
    2017-09-05 00:44 node[68587] (FSEvents.framework) FSEventStreamStart: register_with_server: ERROR: f2d_register_rpc() => (null) (-22)
    events.js:160
          throw er; // Unhandled 'error' event
          ^
    
    Error: Error watching file for changes: EMFILE
        at exports._errnoException (util.js:1022:11)
        at FSEvent.FSWatcher._handle.onchange (fs.js:1406:11)
  9. 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:

      1. Change the npm run lint script to "esw webpack.config.* src tools; exit 0"
      2. 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.

  10. 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:

Tech Description Learn More
React Fast, composable client-side components. Pluralsight Course
Redux Enforces unidirectional data flows and immutable, hot reloadable store. Supports time-travel debugging. Lean alternative to Facebook's Flux. Getting Started with Redux, Building React Applications with Idiomatic Redux, Pluralsight Course
React Router A complete routing library for React Pluralsight Course
Babel Compiles ES6 to ES5. Enjoy the new version of JavaScript today. ES6 REPL, ES6 vs ES5, ES6 Katas, Pluralsight course
Webpack Bundles npm packages and our JS into a single file. Includes hot reloading via react-transform-hmr. Quick Webpack How-to Pluralsight Course
Browsersync Lightweight development HTTP server that supports synchronized testing and debugging on multiple devices. Intro vid
Jest Automated tests with built-in expect assertions and Enzyme for DOM testing without a browser using Node. Pluralsight Course
TrackJS JavaScript error tracking. Free trial
ESLint Lint JS. Reports syntax and style issues. Using eslint-plugin-react for additional React specific linting rules.
SASS Compiled CSS styles with variables, functions, and more. Pluralsight Course
PostCSS Transform styles with JS plugins. Used to autoprefix CSS
Editor Config Enforce consistent editor settings (spaces vs tabs, etc). IDE Plugins
npm Scripts Glues all this together in a handy automated build. Pluralsight course, Why not Gulp?

The starter kit includes a working example app that puts all of the above to use.


Questions?

Check out the FAQ

react-slingshot's People

Contributors

alepacheco avatar br0ken- avatar coryhouse avatar davidglbr avatar dineshvgp avatar dwmkerr avatar fayimora avatar greenkeeperio-bot avatar ileonelperea avatar kwelch avatar m10 avatar mherodev avatar mikedevita avatar mlwigdahl avatar nickytonline avatar oliboy50 avatar oshalygin avatar rndstr avatar ryannealmes avatar sadikaya avatar sag1v avatar samit4me avatar samuelneff avatar sharpes avatar sheldonjones avatar sudobat avatar toddprater avatar vdclouis avatar w3cj avatar yoniji avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

react-slingshot's Issues

no open-coverage script in package.json

As per your README.md, test coverage has been done through Istanbul and should be run using

npm run open-coverage

But this doesn't seem to be implemented at all !!!!

integration with bootstrap

How you suggest integration with Bootstrap?
Do you suggest including css into html directly or use npm for bootstrap or bootsrap-sass or something?

How to disable browser-sync? (to lose its Py/C++ dependencies on Windows)

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.

Redux Thunk

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.

Required Node.js version?

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.

Wrap this project inside a Yeoman Generator

Hi Cory,

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.

Adding the Redux dev tools?

I was wondering if there are plans to add redux-devtools because it looks useful. Or should i be fine without? Not sure if its bloat or not..

I'm no expert on redux, just giving it a spin.

Update eslint no-console error level

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.

Run tests as part of build step

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.

Add proxy for API calls

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?

Symbol is not defined

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

Removing need for custom scripts in tools/ dir?

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...

Port in use error

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!

Doesn't work for me

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)

Ajax from a reducer?

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.

accessing state from outside of component context

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

TypeScript support

@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.

Inaccurate Instructions for Removal of Redux

In the README, the section which lays out how to remove redux is inaccurate/incomplete. See: https://github.com/coryhouse/react-slingshot#do-i-have-to-use-redux

  • main.js isn't a file, should be index.js
  • 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

Add React-Router

This is great boilerplate but if react router is also added to it then it will be more faster for developers to start developing with it

Cannot find module './NumberFormatter'

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

React-Router

What would be the "correct" way to add React Router to this?

Errors when trying to import third party plugin.

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.

thanks in advance for your help

Bundled scss: flash of unstyled content (FOUC) in chrome

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.

chokidar Unhandled 'error' event on Ubuntu 15.10

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)

Breakpoints not getting hit on initial page load in Chrome Dev Tools

Thanks for this great toolkit!

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?

Thanks for the help,
Neil

Error when add url into css styles

When I added a png file to a class:

background: url('../img/automation_icons.png')

in the css occur that error:

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

I found a solution check the pullrequest #74

tnks.

Include Autoprefixer

I would like to know if we should include the setup needed to include autoprefixer into the webpack setup.

I found this a bit confusing to figure out how to implement into it given that autoprefixer recommends the use of postcss.

thus my loaders were

  if(env === productionEnvironment){
    loaders.push({
      test: /(\.css|\.scss)$/,
      include: path.join(__dirname, 'src'),
      loader: ExtractTextPlugin.extract("css?sourceMap!postcss!sass?sourceMap")
    });
  }else{
    loaders.push({
      test: /(\.css|\.scss)$/,
      include: path.join(__dirname, 'src'),
      loaders: ['style', 'css?sourceMap', 'postcss', 'sass?sourceMap']
    });
  }

and i also had to add to my config export

postcss: ()=> [autoprefixer]

Nested routes are not working when URL is refreshed

<Route path="/" component={App}>
    <IndexRoute component={FuelSavingsPage} />
    <Route path="about" component={AboutPage}/>
    <Route path="/auth"  component={AuthLayout} >
        <Route path="login" component={LoginPage}/>
        <Route path="atkn" component={AcceptTokenPage}/>
    </Route>
    <Route path="*" component={NotFoundPage} />
  </Route>

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!

Should I do anything specifically?

Including third party modules

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.

Images

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?

How to run production server

I am new to nodejs. npm build creates dist folder with outputs and runs fine.

For production how can I run without BrowserSync? and with isomorphic routing

@import in css files loaded via webpack results in "File to import not found or unreadable"

Greetings,
Something that use to work on other projects that did not use ExtractTextPlugin seems to not work here.

So,
I have installed node-sass + node-bourbon.

Here is my loaders array:

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.

Any ideas?

.eslintrc contains jQuery and $ as globals

Hi there!

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?

Thanks for setting this project up!

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.