GithubHelp home page GithubHelp logo

react-boilerplate / react-boilerplate Goto Github PK

View Code? Open in Web Editor NEW
29.5K 29.5K 6.1K 8.73 MB

πŸ”₯ A highly scalable, offline-first foundation with the best developer experience and a focus on performance and best practices.

Home Page: https://www.reactboilerplate.com

License: MIT License

HTML 5.12% JavaScript 94.88%
i18n immer offline-first react react-boilerplate redux redux-saga scaffolding styled-components webpack4

react-boilerplate's Introduction

react boilerplate banner


Start your next react project in seconds
A highly scalable, offline-first foundation with the best DX and a focus on performance and best practices


Created by Max Stoiber and maintained with ❀️ by an amazing team of developers.

Features

Quick scaffolding
Create components, containers, routes, selectors and sagas - and their tests - right from the CLI!
Instant feedback
Enjoy the best DX (Developer eXperience) and code your app at the speed of thought! Your saved changes to the CSS and JS are reflected instantaneously without refreshing the page. Preserve application state even when you update something in the underlying code!
Predictable state management
Unidirectional data flow allows for change logging and time travel debugging.
Next generation JavaScript
Use template strings, object destructuring, arrow functions, JSX syntax and more.
Next generation CSS
Write composable CSS that's co-located with your components for complete modularity. Unique generated class names keep the specificity low while eliminating style clashes. Ship only the styles that are on the page for the best performance.
Industry-standard routing
It's natural to want to add pages (e.g. `/about`) to your application, and routing makes this possible.
Industry-standard i18n internationalization support
Scalable apps need to support multiple languages, easily add and support multiple languages with `react-intl`.
Offline-first
The next frontier in performant web apps: availability without a network connection from the instant your users load the app.
Static code analysis
Focus on writing new features without worrying about formatting or code quality. With the right editor setup, your code will automatically be formatted and linted as you work.
SEO
We support SEO (document head tags management) for search engines that support indexing of JavaScript content. (eg. Google)

But wait... there's more!

  • The best test setup: Automatically guarantee code quality and non-breaking changes. (Seen a react app with 100% test coverage before?)
  • Native web app: Your app's new home? The home screen of your users' phones.
  • The fastest fonts: Say goodbye to vacant text.
  • Stay fast: Profile your app's performance from the comfort of your command line!
  • Catch problems: AppVeyor and TravisCI setups included by default, so your tests get run automatically on Windows and Unix.

There’s also a fantastic video on how to structure your React.js apps with scalability in mind. It provides rationale for the majority of boilerplate's design decisions.

Keywords: React.js, Redux, Hot Reloading, ESNext, Babel, react-router, Offline First, ServiceWorker, styled-components, redux-saga, FontFaceObserver

Quick start

  1. Make sure that you have Node.js v8.15.1 and npm v5 or above installed.
  2. Clone this repo using git clone --depth=1 https://github.com/react-boilerplate/react-boilerplate.git <YOUR_PROJECT_NAME>
  3. Move to the appropriate directory: cd <YOUR_PROJECT_NAME>.
  4. Run npm run setup in order to install dependencies and clean the git repo.
    At this point you can run npm start to see the example app at http://localhost:3000.
  5. Run npm run clean to delete the example app.

Now you're ready to rumble!

Please note that this boilerplate is production-ready and not meant for beginners! If you're just starting out with react or redux, please refer to https://github.com/petehunt/react-howto instead. If you want a solid, battle-tested base to build your next product upon and have some experience with react, this is the perfect start for you.

Documentation

Contributors

Thanks goes to these wonderful people (emoji key):

Max Stoiber
Max Stoiber

πŸ’» πŸ“– πŸ€” πŸ‘€ ⚠️
Julien Benchetrit
Julien Benchetrit

πŸ’» πŸ’¬ πŸ“– πŸ‘€ 🚧
Sara Federico
Sara Federico

πŸ’» πŸ‘€ πŸ’¬ πŸ“– 🚧
Justin Greenberg
Justin Greenberg

πŸ’» πŸ‘€
Jon Winn
Jon Winn

πŸ’» πŸ‘€
Johan Meester
Johan Meester

πŸ’» ⚠️ πŸ“–
Yaroslav Kiliba
Yaroslav Kiliba

πŸ’»
Glen Ihrig
Glen Ihrig

πŸ’»
Somasundaram Ayyappan
Somasundaram Ayyappan

πŸ’»
Oliver Turner
Oliver Turner

πŸ’»
Samuel Sharpe
Samuel Sharpe

πŸ’»
Mihir Karandikar
Mihir Karandikar

πŸ’»
Vaibhav Verma
Vaibhav Verma

πŸ’»
SΓ©bastien Dubois
SΓ©bastien Dubois

πŸ’»
Chainarong Tangsurakit
Chainarong Tangsurakit

πŸ’»
Amila Welihinda
Amila Welihinda

πŸ’»

This project follows the all-contributors specification. Contributions of any kind welcome!

Supporters

This project would not be possible without the support of these amazing folks. Become a sponsor to get your company in front of thousands of engaged react developers and help us out!


License

This project is licensed under the MIT license, Copyright (c) 2019 Maximilian Stoiber. For more information see LICENSE.md.

react-boilerplate's People

Contributors

7rulnik avatar benjaminlgt-littlelives avatar chaintng avatar datapimp avatar dattaya avatar fezvrasta avatar gihrig avatar glennreyes avatar gonzochic avatar grabbou avatar greenkeeperio-bot avatar gretzky avatar jbinto avatar julienben avatar jurekbarth avatar justingreenberg avatar jwinn avatar mihir0x69 avatar mxstbr avatar nekr avatar ngtan avatar okonet avatar oliverturner avatar philihp avatar raksonibs avatar rog avatar samit4me avatar sedubois avatar somus avatar suhaotian 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-boilerplate's Issues

ImmutableJS

I have yet to work with it, so I'm not sure if I should include it. (This redux+immutable.js example looks nice)

It's quite a bit of code overhead just for a warning when you mutate the state directly, which Object.freeze does just the same. Does it have any other benefits?

EDIT: I just realised that the main benefit is that the state is frozen all the way down to every component. This could also be achieved with Object.freeze, by wrapping the returned state in the reducers:

case CHANGE_OWNER_NAME:
      return Object.freeze(assign({}, state, {
        ownerName: action.name
      }));

This won't keep anybody from simply not wrapping it in O.f though. Maybe there's a way to enforce this somewhere later?

serve command should run ngrok

That way you can access your site not only from the local network, but from the entire interweb!

Note: If you submit a PR, do it against the v3.0.0 branch please!

Move the created history to its own module

Right now you cannot arbitrarily transition to a new page without the Link component from react-router. By having the created history in a seperate module, we can do this:

import history from '../utils/history';

someClickHandler() {
     history.pushState('/');
}

Update boilerplate example

This is more of a Todo so I don't forget it before releasing v3.0.0.

Not doable before everything else is done.

Explain how to contribute

Add a CONTRIBUTE.md file and mention it in the main README, to explain how to contribute to this boilerplate. (I.e. master branch protected, everything runs through PRs to complete travis builds b/c users mainly git clone the master branch to use this boilerplate, which means there can't be any errors in there)

HomePage.react.js eslint errors

eslint current shows the following errors in HomePage.react.js in Atom:

Expected indentation of 2 space characters but found 0.

for lines 13, 14 and 15. Which doesn't make any sense, they aren't indented differently from the rest. If you change it to two spaces, the errors go away, but 4 are needed for it to look the way it should. No idea why that happens...

Mention Babel in the README

You mention PostCSS, but not Babel. I think these days babel is to JS what postcss is to CSS so you should add minimal doc for Babel :)

Add .htaccess

It should force a redirect to HTTPS (because of ServiceWorker, which needs HTTPS), and it should route all domain.com/whatever sub pages to the index.html to let react-router take care of them. FIrst implementation:

<ifModule mod_rewrite.c>
  # Make apache follow sym links to files
  Options +FollowSymLinks
  # If somebody opens a folder, hide all files from the resulting folder list
  IndexIgnore */*
  # Enable rewriting
  RewriteEngine On
  # If its not HTTPS
  # RewriteCond %{HTTPS} off
  # Comment out the line above, and uncomment the line below if you're using CloudFlare/... for SSL
  RewriteCond %{HTTP:X-Forwarded-Proto} !https
  # Redirect to the same URL with https://, ignoring all further rules if this one matched
  RewriteRule ^(.*) https://%{HTTP_HOST}/$1 [R,L]
  # If we get to here, it means we are on https:// already
  # If the file with the specified name in the browser doesn't exist
  RewriteCond %{REQUEST_FILENAME} !-f
  # and the directory with the specified name in the browser doesn't exist
  RewriteCond %{REQUEST_FILENAME} !-d
  # and we are not opening index.html (otherwise we get a redirect loop)
  RewriteCond %{REQUEST_FILENAME} !\/$
  # Rewrite all subdomains to the root index.html
  RewriteRule ^(.*) /
</ifModule>

Zombie App

I tested this boilerplate out and subsequently moved on to test out other boilerplates (which also run on localhost:3000). The other apps are not able to be served on localhost:3000 and instead this same app is constantly being served. I could try deleting my browser cache I suppose but have yet to try that. The chrome://appcache-internals doesn't list this app.

Just as surprising is that http://localhost:3000/d37380ea6ac9abdb6c8fd3c00fbaf410.png is still being served (which loads the mxstbr image). This could be a Chrome issue (47.0.2526.106 (64-bit)), I am not sure, I haven't used AppCache before. In Incognito mode, things work as expected -- the image fails to load and if I server something else on 3000 that loads as expected.

How to make hot reloading work ?

After git clone, npm install and npm start, I edited HomePage.react.js changing Hello World to Hello Redux and saved ! Changes don't propagated to browser even after browser refresh !

Caching on dev server

Is there any way to disable cache on the dev server because none of my changes seem to get loaded, it just loads the cache version instead. Am I just doing something wrong or is the hot loading not working correctly?

Application Structure

Changing the application structure might be worth thinking about, right now the thing might seem quite bloated and randomly thrown together for newcomers.

Add PREREQUISITES.md

Add PREREQUISITES.md for complete beginners, which explains/links to guide that explain how to install and use node, npm, git,...

Better documentation

  • Files
  • Explanation of the possible npm commands
  • Testing
    • How to write unit tests
      • Mocha
      • expect
      • Real world usage
        • Reducers
        • rewire
        • Actions
    • How to write good unit tests (see this article and this response for inspo)
    • How to write component tests
      • Shallow rendering
      • enzyme
    • Browser testing
      • npm run serve
  • Explanation of the main design decisions behind this boilerplate (maybe incomplete)
    • User side
      • JS
        • ESNext Features (see #165)
        • ImmutableJS
        • React
          • react-router
          • Components/Containers split (see #33, this article)
          • Redux
            • reselect (see #61)
            • redux-simple-router
            • redux-saga
        • eslint
          • Airbnb style
        • FontFaceObserver
      • CSS
        • CSS Modules
        • sanitize.css
        • PostCSS
          • cssnext
          • autoprefixer
          • postcss-focus
          • cssnano
      • Offline First
        • ServiceWorker
        • AppCache
    • Developer side
      • Webpack
      • Babel
      • Beginner
        • Modules (export and import)
        • Prerequisites
          • node
            • npm
          • git
  • FAQs
    • nodejs-legacy for linux (see here)
    • Error: listen EADDRINUSE 127.0.0.1:3000
    • Hot-reloading doesn't work?
    • Why do I need this?
    • Can I use Sass with this?
    • I don't want to use Redux!
  • Gotchas
    • Images in the HTML file (Copy and past from README)
  • Advanced Patterns
    • Ducks (see #27)
    • ryanflorences non-flat app structure (see #27)
  • Deployment guides
    • scp
    • Heroku
    • Codeship
    • Beanstalk

Legend: Cursive todos are nice-to-haves, but only to be done when everything else is done, and bold todos are must-haves before releasing

Note: If you're planning on writing one of these sections, please be sure to talk about the v3.0.0 branch and to submit your PR against the v3.0.0 branch!

Fix unit tests

I forgot to fix the unit tests when I changed the application structure

Make components stateless

Remove all classes and make all components pure functions. E.g. turn

class Example extends Component {
    render() {
        return (
            <h1>Hello {this.props.name}!</h1>
        );
    }
}

into

function Example(props) {
    return (
        <h1>Hello {props.name}</h1>
    );
}

Positives

  • Performance improvement (src)
  • Not possible to use setState(), which is an anti-pattern anyway so we help to keep devs from using it. Since we're using Redux, everything should flow through a reducer.
  • Might be better unit testable, have to look into it.

Negatives

  • No component lifecycle methods, which might confuse newcomers, so that's another thing we'd have to explain in the docs.

Is the more explanation in the documentation worth it? I think so.

Async Actions β€” Unit Testing

Since testing async actions isn't really useful, you have to export the non-async actions too to test them. This results in functions being exposed that shouldn't be. Example:

export function asyncChangeProjectName(name) {
  return function(dispatch) {
    return dispatch(changeProjectName(name));
  }
}

export function asyncChangeOwnerName(name) {
  return function(dispatch) {
    return dispatch(changeOwnerName(name));
  }
}

export function changeProjectName(name) {
  return { type: CHANGE_PROJECT_NAME, name };
}

export function changeOwnerName(name) {
  return { type: CHANGE_OWNER_NAME, name };
}

changeOwnerName and changeProjectName shouldn't really be accessible from the outside, which they are right now so the unit tests can import them.

Name/Logo/Website

Thinking about taking on a better name/adding a logo/making a website with collected documentation. Not sure the project is mature enough just yet, but it's on my roadmap. Any input appreciated!

How to solve this npm run build error ?

Showing the follwoing error when running npm run build . Please help

ERROR in .//css-loader!.//postcss-loader!./css/main.css
Module build failed: ReferenceError: Promise is not defined
at Object. (F:\My - Worked Projects\My Updated\react-boilerp
late-master\node_modules\postcss-import\index.js:13:27)
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)
at require (module.js:380:17)
at Object.postcss (F:\My - Worked Projects\My Updated\react-boilerplate
-master\makewebpackconfig.js:94:9)
at Object.module.exports (F:\My - Worked Projects\My Updated\react-boil
erplate-master\node_modules\postcss-loader\index.js:28:27)
@ ./css/main.css 4:14-117

ERROR in ./css/main.css
Module build failed: ModuleBuildError: Module build failed: ReferenceError:
Promise is not defined
at Object. (F:\My - Worked Projects\My Updated\react-boilerp
late-master\node_modules\postcss-import\index.js:13:27)
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)
at require (module.js:380:17)
at Object.postcss (F:\My - Worked Projects\My Updated\react-boilerplate
-master\makewebpackconfig.js:94:9)
at Object.module.exports (F:\My - Worked Projects\My Updated\react-boil
erplate-master\node_modules\postcss-loader\index.js:28:27)
at DependenciesBlock.onModuleBuildFailed (F:\My - Worked Projects\My Up
dated\react-boilerplate-master\node_modules\webpack\node_modules\webpack-co
re\lib\NormalModuleMixin.js:315:19)
at nextLoader (F:\My - Worked Projects\My Updated\react-boilerplate-mas
ter\node_modules\webpack\node_modules\webpack-core\lib\NormalModuleMixin.js
:270:31)
at F:\My - Worked Projects\My Updated\react-boilerplate-master\node_mod
ules\webpack\node_modules\webpack-core\lib\NormalModuleMixin.js:292:15
at runSyncOrAsync (F:\My - Worked Projects\My Updated\react-boilerplate
-master\node_modules\webpack\node_modules\webpack-core\lib\NormalModuleMixi
n.js:173:4)
at nextLoader (F:\My - Worked Projects\My Updated\react-boilerplate-mas
ter\node_modules\webpack\node_modules\webpack-core\lib\NormalModuleMixin.js
:290:3)
at F:\My - Worked Projects\My Updated\react-boilerplate-master\node_mod
ules\webpack\node_modules\webpack-core\lib\NormalModuleMixin.js:259:5
at Storage.provide (F:\My - Worked Projects\My Updated\react-boilerplat
e-master\node_modules\webpack\node_modules\enhanced-resolve\lib\CachedInput
FileSystem.js:52:20)
at CachedInputFileSystem.readFile (F:\My - Worked Projects\My Updated\r
eact-boilerplate-master\node_modules\webpack\node_modules\enhanced-resolve
lib\CachedInputFileSystem.js:140:24)
at DependenciesBlock.onLoadPitchDone (F:\My - Worked Projects\My Update
d\react-boilerplate-master\node_modules\webpack\node_modules\webpack-core\l
ib\NormalModuleMixin.js:255:7)
at DependenciesBlock.loadPitch (F:\My - Worked Projects\My Updated\reac
t-boilerplate-master\node_modules\webpack\node_modules\webpack-core\lib\Nor
malModuleMixin.js:182:27)
at DependenciesBlock.loadPitch (F:\My - Worked Projects\My Updated\reac
t-boilerplate-master\node_modules\webpack\node_modules\webpack-core\lib\Nor
malModuleMixin.js:186:21)
at DependenciesBlock.loadPitch (F:\My - Worked Projects\My Updated\reac
t-boilerplate-master\node_modules\webpack\node_modules\webpack-core\lib\Nor
malModuleMixin.js:223:61)
at DependenciesBlock.loadPitch (F:\My - Worked Projects\My Updated\reac
t-boilerplate-master\node_modules\webpack\node_modules\webpack-core\lib\Nor
malModuleMixin.js:186:21)
at DependenciesBlock.loadPitch (F:\My - Worked Projects\My Updated\reac
t-boilerplate-master\node_modules\webpack\node_modules\webpack-core\lib\Nor
malModuleMixin.js:223:61)
at DependenciesBlock.doBuild (F:\My - Worked Projects\My Updated\react-
boilerplate-master\node_modules\webpack\node_modules\webpack-core\lib\Norma
lModuleMixin.js:241:4)
at DependenciesBlock.build (F:\My - Worked Projects\My Updated\react-bo
ilerplate-master\node_modules\webpack\lib\NormalModule.js:84:14)
at Compilation.buildModule (F:\My - Worked Projects\My Updated\react-bo
ilerplate-master\node_modules\webpack\lib\Compilation.js:126:9)
at Compilation. (F:\My - Worked Projects\My Updated\react-bo
ilerplate-master\node_modules\webpack\lib\Compilation.js:398:8)
at F:\My - Worked Projects\My Updated\react-boilerplate-master\node_mod
ules\webpack\lib\NormalModuleFactory.js:58:13
at NormalModuleFactory.applyPluginsAsyncWaterfall (F:\My - Worked Proje
cts\My Updated\react-boilerplate-master\node_modules\webpack\node_modules\t
apable\lib\Tapable.js:75:69)
at onDoneResolving (F:\My - Worked Projects\My Updated\react-boilerplat
e-master\node_modules\webpack\lib\NormalModuleFactory.js:38:11)
at onDoneResolving (F:\My - Worked Projects\My Updated\react-boilerplat
e-master\node_modules\webpack\lib\NormalModuleFactory.js:121:6)
at F:\My - Worked Projects\My Updated\react-boilerplate-master\node_mod
ules\webpack\lib\NormalModuleFactory.js:98:13
at F:\My - Worked Projects\My Updated\react-boilerplate-master\node_mod
ules\webpack\node_modules\async\lib\async.js:721:13
at F:\My - Worked Projects\My Updated\react-boilerplate-master\node_mod
ules\webpack\node_modules\async\lib\async.js:52:16
at async.forEachOf.async.eachOf (F:\My - Worked Projects\My Updated\rea
ct-boilerplate-master\node_modules\webpack\node_modules\async\lib\async.js:
236:30)
at _parallel (F:\My - Worked Projects\My Updated\react-boilerplate-mast
er\node_modules\webpack\node_modules\async\lib\async.js:712:9)
at Object.async.parallel (F:\My - Worked Projects\My Updated\react-boil
erplate-master\node_modules\webpack\node_modules\async\lib\async.js:726:9)
at F:\My - Worked Projects\My Updated\react-boilerplate-master\node_mod
ules\webpack\lib\NormalModuleFactory.js:75:10
at F:\My - Worked Projects\My Updated\react-boilerplate-master\node_mod
ules\webpack\lib\NormalModuleFactory.js:28:4
Child extract-text-webpack-plugin:
+ 1 hidden modules

ERROR in ./~/css-loader!./~/postcss-loader!./css/main.css
Module build failed: ReferenceError: Promise is not defined
    at Object.<anonymous> (F:\My - Worked Projects\My Updated\react-boi

lerplate-master\node_modules\postcss-import\index.js:13:27)
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)
at require (module.js:380:17)
at Object.postcss (F:\My - Worked Projects\My Updated\react-boilerp
late-master\makewebpackconfig.js:94:9)
at Object.module.exports (F:\My - Worked Projects\My Updated\react-
boilerplate-master\node_modules\postcss-loader\index.js:28:27)

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.