Giter Club home page Giter Club logo

werein / react Goto Github PK

View Code? Open in Web Editor NEW
272.0 272.0 96.0 224 KB

Extremely simple boilerplate, easiest you can find, for React application including all the necessary tools: Flow | React 16 | redux | babel 6 | webpack 3 | css-modules | jest | enzyme | express + optional: sass/scss

Home Page: https://wereinhq.com/guides/react

JavaScript 97.72% HTML 1.66% CSS 0.62%
babel boilerplate css-modules enzyme express jest react react-router redux redux-devtools webpack

react's Introduction

React

Build StatusWindows Build Status Code Climate

Deploy

Extremely simple boilerplate, easiest you can find, for React application including all the necessary tool

  • React 16
  • Redux
  • Webpack 3
  • Babel 6
  • CSS modules
  • React Router
  • Connected Router (react router + redux)
  • Redux DevTools
  • Eslint
  • Jest & Enzyme
  • Express

And optional (just install missing dependencies):

  • Sass/SCSS - npm i node-sass sass-loader --save
  • Surge - npm i surge -g

Also take a look here for also extremely simple React Native boilerplate

Flow

There is a version with flow enabled, since everyone is using it these days and quite a lot of libraries has direct support, I've also created a branch where flow is supported. This setup allows you for example to see an action and theirs data in correctly in reducers switch statement, doesn't let you to dispatch and undefined action or to see state in a mapStateToProp. Please thumbs up or don't in a PR for merge: #52

Installation

All you need to do is clone this repository

git clone https://github.com/werein/react.git

Keep it up to date

Track this repo

git remote add upstream https://github.com/werein/react.git

Get the latest version and apply onto your stack

git fetch upstream
git merge upstream/master

Running

Application has very few dependencies, so it’s most probably very easy to understand when you scan through the code, but there is at least few steps you should know

Start front-end React application

Application is divided into two parts. One is pure React front-end, powered by webpack-dev-server in development mode.

To start this application run command below and open your app on http://localhost:8080

npm start

To test your application, run

  • npm run test - single run - good for CI or precook
  • npm run test:watch - watches for changes, good for development

If you don’t plan to connect to your own backend, you should be just fine

Start Express back-end

Second part of this application is back end written in Express. This is a place, where you provide API for front-end or/and server yours production application.

To start backend server, run npm command bellow and open http://localhost:8181

npm run server

This is also watching for changes, so when you update some code on backend, you don’t have to restart the server, it does that automatically

Every call which goes to /api is proxied to this backend so for example when you make a request to /api/locales on front-end, it will go to this express backend server using the same path

Production

Running npm run build will create production ready application into your dist folder. All you need to do is make this dist folder publicly available. You can use surge.sh as described bellow to do so.

Included Express server is preconfigured to serve /dist folder. All you need to do is run npm run server on your production server. The same is happening automatically, when you deploy to Heroku (It executes this command from Procfile

This is also good to run on your local computer to ensure, that your application is running as it should.

Current production size is 205kb and 56.8kb gziped

Deployment

Surge.sh

Simple, single-command web publishing. Publish HTML, CSS, and JS for free, without leaving the command line.

  • Don't forge to install Surge npm i surge -g
  • Run deployment command - npm run surge

Heroku

Heroku works out of the box, just use "deploy to heroku" button

Tools

This project works with ReduxDevtool extension for chrome. Read more

License

MIT

react's People

Contributors

jirikolarik avatar jonathan-grah 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

react's Issues

Hanging Webpack Build

After cloning and an npm install, after trying to start the app with npm run start, the terminal repeats and hangs on the command: [webpack-isomorphic-tools] (waiting for the first Webpack build to finish). Trying to navigate to the localhost does not deter this either.

Deploying to Heroku

Hi!
I am trying to deploy my new reactJS app to heroku and it gives me the same error (below), whether I try to deploy via your special button or using Heroku CLI.
Can you please spot the problem and guid towards the solution?

thank you!
Maor.

The error:
-----> Node.js app detected
-----> Creating runtime environment

   NPM_CONFIG_LOGLEVEL=error
   NPM_CONFIG_PRODUCTION=true
   NODE_VERBOSE=false
   NODE_ENV=production
   NODE_MODULES_CACHE=true

-----> Installing binaries
engines.node (package.json): 6.6.0
engines.npm (package.json): 3.10.3

   Resolving node version 6.6.0...
   Downloading and installing node 6.6.0...
   npm 3.10.3 already installed with node

-----> Restoring cache
Skipping cache restore (not-found)
-----> Building dependencies
Installing node modules (package.json)

   > [email protected] postinstall /tmp/build_5a6aa8c4af3adcb0c9f629797d1ac421/werein-react-b41b201/node_modules/uglifyjs-webpack-plugin
   > node lib/post_install.js
   
   
   > [email protected] postinstall /tmp/build_5a6aa8c4af3adcb0c9f629797d1ac421/werein-react-b41b201
   > npm run build
   
   
   > [email protected] build /tmp/build_5a6aa8c4af3adcb0c9f629797d1ac421/werein-react-b41b201
   > cross-env NODE_ENV=production webpack --config ./webpack.production.js --progress --profile --colors
   
   sh: 1: cross-env: not found
   
   npm ERR! Linux 3.13.0-128-generic
   npm ERR! argv "/tmp/build_5a6aa8c4af3adcb0c9f629797d1ac421/werein-react-b41b201/.heroku/node/bin/node" "/tmp/build_5a6aa8c4af3adcb0c9f629797d1ac421/werein-react-b41b201/.heroku/node/bin/npm" "run" "build"
   npm ERR! node v6.6.0
   npm ERR! npm  v3.10.3
   npm ERR! file sh
   npm ERR! code ELIFECYCLE
   npm ERR! errno ENOENT
   npm ERR! syscall spawn
   npm ERR! [email protected] build: `cross-env NODE_ENV=production webpack --config ./webpack.production.js --progress --profile --colors`
   npm ERR! spawn ENOENT
   npm ERR!
   npm ERR! Failed at the [email protected] build script 'cross-env NODE_ENV=production webpack --config ./webpack.production.js --progress --profile --colors'.
   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 app package,
   npm ERR! not with npm itself.
   npm ERR! Tell the author that this fails on your system:
   npm ERR!     cross-env NODE_ENV=production webpack --config ./webpack.production.js --progress --profile --colors
   npm ERR! You can get information on how to open an issue for this project with:
   npm ERR!     npm bugs app
   npm ERR! Or if that isn't available, you can get their info via:
   npm ERR!     npm owner ls app
   npm ERR! There is likely additional logging output above.
   
   npm ERR! Please include the following file with any support request:
   npm ERR!     /tmp/build_5a6aa8c4af3adcb0c9f629797d1ac421/werein-react-b41b201/npm-debug.log
   
   npm ERR! Linux 3.13.0-128-generic
   npm ERR! argv "/tmp/build_5a6aa8c4af3adcb0c9f629797d1ac421/werein-react-b41b201/.heroku/node/bin/node" "/tmp/build_5a6aa8c4af3adcb0c9f629797d1ac421/werein-react-b41b201/.heroku/node/bin/npm" "install" "--unsafe-perm" "--userconfig" "/tmp/build_5a6aa8c4af3adcb0c9f629797d1ac421/werein-react-b41b201/.npmrc"
   npm ERR! node v6.6.0
   npm ERR! npm  v3.10.3
   npm ERR! code ELIFECYCLE
   npm ERR! [email protected] postinstall: `npm run build`
   npm ERR! Exit status 1
   npm ERR!
   npm ERR! Failed at the [email protected] postinstall script 'npm run build'.
   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 app package,
   npm ERR! not with npm itself.
   npm ERR! Tell the author that this fails on your system:
   npm ERR!     npm run build
   npm ERR! You can get information on how to open an issue for this project with:
   npm ERR!     npm bugs app
   npm ERR! Or if that isn't available, you can get their info via:
   npm ERR!     npm owner ls app
   npm ERR! There is likely additional logging output above.
   
   npm ERR! Please include the following file with any support request:
   npm ERR!     /tmp/build_5a6aa8c4af3adcb0c9f629797d1ac421/werein-react-b41b201/npm-debug.log

-----> Build failed

   We're sorry this build is failing! You can troubleshoot common issues here:
   https://devcenter.heroku.com/articles/troubleshooting-node-deploys
   
   If you're stuck, please submit a ticket so we can help:
   https://help.heroku.com/
   
   Love,
   Heroku

! Push rejected, failed to compile Node.js app.
! Push failed

ESLINT requires node5

Hi,

I noticed that ESLINT was not working with the project on Atom due to the absence of the node5 babel preset.

What I had to do to fix the issue for my project was to add the preset to the dependencies with the following command:
npm install babel-preset-node5 --save

It's now working, maybe add it to the base project's dependencies

What is the best method fo loading static resources?

Hi,
I'm trying to load a logo.png file. I created a directory /public/images. I have attempted to use github: tcoopman/image-webpack-loader although I may have misused this or it may not be the correct loader.

Do you have any guidance on how to load images using your boilerplate?

Thanks

Api proxy doesn't seem to be working for me

Thanks for the repo, it's been a great help. The proxy that should route localhost:8080/api to localhost:8181 doesn't seem to be working though.

I think I've found the solution though based on this.

devServer: {
    historyApiFallback: true,
    proxy: {
      '/api/*': {
        target: 'http://localhost:8181',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }

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.