React Starter Kit — isomorphic web app boilerplate (Node.js, Express, GraphQL, React.js, Babel, PostCSS, Webpack, Browsersync)

Overview

React Starter Kit — "isomorphic" web app boilerplate  

React Starter Kit is an opinionated boilerplate for web development built on top of Node.js, Express, GraphQL and React, containing modern web development tools such as Webpack, Babel and Browsersync. Helping you to stay productive following the best practices. A solid starting point for both professionals and newcomers to the industry.

See getting started guide, demo, docs, roadmap  |  Join #react-starter-kit chat room on Gitter  |  Visit our sponsors:

Hiring

Getting Started

Customization

The master branch of React Starter Kit doesn't include a Flux implementation or any other advanced integrations. Nevertheless, we have some integrations available to you in feature branches that you can use either as a reference or merge into your project:

You can see status of most reasonable merge combination as PRs labeled as TRACKING

If you think that any of these features should be on master, or vice versa, some features should removed from the master branch, please let us know. We love your feedback!

Comparison

 

React Starter Kit

React Static Boilerplate

ASP.NET Core Starter Kit

App type Isomorphic (universal) Single-page application Single-page application
Frontend
Language JavaScript (ES2015+, JSX) JavaScript (ES2015+, JSX) JavaScript (ES2015+, JSX)
Libraries React, History, Universal Router React, History, Redux React, History, Redux
Routes Imperative (functional) Declarative Declarative, cross-stack
Backend
Language JavaScript (ES2015+, JSX) n/a C#, F#
Libraries Node.js, Express, Sequelize,
GraphQL
n/a ASP.NET Core, EF Core,
ASP.NET Identity
SSR Yes n/a n/a
Data API GraphQL n/a Web API

Backers

React Starter Kit? Help us keep it alive by donating funds to cover project expenses via OpenCollective or Bountysource!

lehneres Tarkan Anlar Morten Olsen Adam David Ernst Zane Hitchcox

How to Contribute

Anyone and everyone is welcome to contribute to this project. The best way to start is by checking our open issues, submit a new issue or feature request, participate in discussions, upvote or downvote the issues you like or dislike, send pull requests.

Learn More

Related Projects

  • GraphQL Starter Kit — Boilerplate for building data APIs with Node.js, JavaScript (via Babel) and GraphQL
  • Membership Database — SQL schema boilerplate for user accounts, profiles, roles, and auth claims
  • Babel Starter Kit — Boilerplate for authoring JavaScript/React.js libraries

Support

License

Copyright © 2014-present Kriasoft, LLC. This source code is licensed under the MIT license found in the LICENSE.txt file. The documentation to the project is licensed under the CC BY-SA 4.0 license.


Made with by Konstantin Tarkus (@koistya) and contributors

Comments
  • Which Flux implementation should I use?

    Which Flux implementation should I use?

    opened by koistya 75
  • Bootstrap implementation

    Bootstrap implementation

    You are writing about Bootstrap but I don't see implementation of this frontend framework inside your starter-kit app htmls/css/less files. This is not just installing bootstrap but also changes in current layout.

    1. Are you going to use it in new version?
    2. Am I right - to use bootstrap,jquery or other frontend/view libraries with React we should use Bower?

    Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

    opened by sebgos 56
  • sequelize dependency error 'Please install sqlite3 package manually'

    sequelize dependency error 'Please install sqlite3 package manually'

    Got this error.

    /Users/corto/mega/MyApp/node_modules/sequelize/lib/dialects/sqlite/connection-manager.js:24
        throw new Error('Please install sqlite3 package manually');
              ^
    Error: Please install sqlite3 package manually
        at new ConnectionManager (/Users/corto/mega/MyApp/node_modules/sequelize/lib/dialects/sqlite/connection-manager.js:24:11)
        at new SqliteDialect (/Users/corto/mega/MyApp/node_modules/sequelize/lib/dialects/sqlite/index.js:12:28)
        at new Sequelize (/Users/corto/mega/MyApp/node_modules/sequelize/lib/sequelize.js:233:18)
        at Object.<anonymous> (/Users/corto/mega/MyApp/build/webpack:/data/sequelize.js:13:19)
        at __webpack_require__ (/Users/corto/mega/MyApp/build/webpack:/webpack/bootstrap 6d1086b2a4d5e521e79e:19:1)
        at Object.module.exports.Object.defineProperty.value (/Users/corto/mega/MyApp/build/webpack:/data/models/index.js:10:1)
        at __webpack_require__ (/Users/corto/mega/MyApp/build/webpack:/webpack/bootstrap 6d1086b2a4d5e521e79e:19:1)
        at Object.<anonymous> (/Users/corto/mega/MyApp/build/webpack:/core/passport.js:18:1)
        at __webpack_require__ (/Users/corto/mega/MyApp/build/webpack:/webpack/bootstrap 6d1086b2a4d5e521e79e:19:1)
        at Object.<anonymous> (/Users/corto/mega/MyApp/build/webpack:/server.js:21:1)
        at __webpack_require__ (/Users/corto/mega/MyApp/build/webpack:/webpack/bootstrap 6d1086b2a4d5e521e79e:19:1)
        at /Users/corto/mega/MyApp/build/webpack:/webpack/bootstrap 6d1086b2a4d5e521e79e:39:1
        at Object.<anonymous> (/Users/corto/mega/MyApp/build/webpack:/webpack/bootstrap 6d1086b2a4d5e521e79e:39:1)
        at Module._compile (module.js:409:26)
        at Object.Module._extensions..js (module.js:416:10)
        at Module.load (module.js:343:32)
    

    OSX 10.11 x64 No matter - node v4 or v5 still got this error

    opened by dmitryverkhovtsev 42
  • How to call child component method from parent?

    How to call child component method from parent?

    Child.js

    import s from './Child.css';
    
    class Child extends Component {
     getAlert() {
        alert('clicked');
     }
     render() {
      return (
        <h1 ref="hello">Hello</h1>
      );
     }
    }
    
    export default withStyles(s)(Child);
    

    Parent.js

    class Parent extends Component {
     render() {
      onClick() {
        this.refs.child.getAlert() // undefined
      }
      return (
        <div>
          <Child ref="child" />
          <button onClick={this.onClick.bind(this)}>Click</button>
        </div>
      );
     }
    }
    
    antipattern 
    opened by devk1d 41
  • Use react-router; client- and server side rendering

    Use react-router; client- and server side rendering

    Use react-router instead of react-routing library.

    As per #345

    Update. Here is a live version with react-router https://limitless-wave-36322.herokuapp.com/


    This change is Reviewable

    opened by okendoken 40
  • Use react-router

    Use react-router

    How do you feel about using react-router instead of a custom basic routing approach? It seems to be getting super popular and the fact that it's build for react makes me like it a lot more anyways

    Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

    question 
    opened by jakecraige 36
  • Convert from react-routing to react-router

    Convert from react-routing to react-router

    Has anyone done this recently? I see that around Sept of 2014 it switched from director to react-router and now it's on react-routing. There doesn't seem to be a lot of documentation around that, furthermore, most people seem to be using react-router instead.

    Is anyone else in the same boat I am? I'd rather use something that has a bit more community around it if possible.

    Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

    help wanted 
    opened by thehashrocket 32
  • Page delay on first load on publish (locally too).

    Page delay on first load on publish (locally too).

    Hello, i have published page and saw there is delaya on initial load the page and i do not mean in data load from database. I just used pingdom and saw there is delay. If check ur demo site demosite You will see the orange one wait 153ms. In my site it is 4.08 sec. test

    Also like ur and mine first page is too big In ur Demosite -> 4.4 MB because of Script 1.33 MB In my site -> 5.1 MB script 2.15

    Also is normal for vendor.js be 1.6MB? Any suggestion or guideline where to look or check this better?

    opened by epozsh 24
  • ESLint: Unable to resolve path to module

    ESLint: Unable to resolve path to module

    We have solution for absolute path, like this:

    import MyComponent from 'src/components/MyComponent'
    

    It is work fine for yarn start, but for yarn lint:

    Unable to resolve path to module 'src/components/MyComponent'     import/no-unresolved
    

    I have solution for my other project (no RSK) with WebStorm:

    1. project_dir - Mark Directory as > Resource Root

    2. yarn add eslint-import-resolver-webpack -D

    3. config/default.js

    ...
    	resolve: {
    		// We can now require('file') instead of require('file.jsx')
    		extensions: ['', '.js', '.jsx', '.scss'],
    		alias: {
    			src: path.resolve(__dirname, '../src')
    		}
    	},
    ...
    
    
    1. .eslintrc.js
    
    /* global __dirname */
    
    const path = require('path');
    
    ...
    	settings: {
    		'import/resolver': {
    			webpack: {
    				config: path.join(__dirname, '/config', 'default.js')
    			}
    		}
    	}
    ...
    
    

    How to solve this issue for RSK? Please help me.

    opened by comerc 24
  • Any help / turorials on how the router works in this specific kit?

    Any help / turorials on how the router works in this specific kit?

    It seems to be that the router in this project isn't configured the same standard way all the tutorials and documentation out there do.

    e.g. server.js uses a dispatch event, I can't find any sample code elsewhere that uses this method, even in the API docs for react-router.

    server.get('*', async (req, res, next) => {
        ...
    
        await Router.dispatch({ path: req.path, context }, (state, component) => {
          data.body = ReactDOM.renderToString(component);
          data.css = css.join('');
        });
    
        const html = ReactDOM.renderToStaticMarkup(<Html {...data} />);
        res.status(statusCode).send('<!doctype html>\n' + html);
    
      ...
    });
    

    I'm trying to configure the router to load routes lazily in a similar way to this example project.

    In that huge-apps example code you can asynchonouly chose which routes to load in a route config

    module.exports = {
      path: 'course/:courseId',
    
      getChildRoutes(location, cb) {
        require.ensure([], (require) => {
          cb(null, [
            require('./routes/Announcements'),
            require('./routes/Assignments'),
            require('./routes/Grades')
          ])
        })
      },
    
      ...
    }
    

    I can't figure out how to apply the same thing to the way routing is done in this starter kit, anyone got similar experiences or can share their knowledge?

    Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

    ready 
    opened by AlastairTaft 24
  • implement auth with the Flux based router

    implement auth with the Flux based router

    @koistya mind giving an example of how to setup an auth flow with the current setup? One of the biggest perks of switching to react-router is the out of box support for auth by using nested routes. thanks! ref #21

    Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

    enhancement help wanted 
    opened by frankleng 24
  • feat: Shared modules example

    feat: Shared modules example

    This is just a quick demo branch demonstrating the usage of a shared module (Yarn package) — core that is referenced in the front-end app (app). When you run the app locally (via yarn start) and make changes to the core package, Vite picks up changes from the referenced package (core) without a need to compile it first, as well as pulling just the changed file.

    example 
    opened by koistya 0
Releases(v0.4.0)
  • v0.4.0(Aug 28, 2015)

    • Remove Gulp in favor of custom JavaScript-based build automation scripts
    • Integrate react-routing and history npm modules
    • Remove Flux actions, stores to reduce unnecessary overload
    • Refactor the way content pages (About Us, Privacy etc.) are loaded into the app
    • Add basic version of an "isomorphic" HTTP client based on superagent (see src/core/HttpClient.js)
    • Remove LESS in favor of plain CSS via PostCSS, cssnext
    • Get rid of Uglifyjs warnings during build in release mode
    • Remove Database.js file to reduce overload and simplify server-side rendering
    • Compile static files into the build/public folder
    • Add a couple of RESTful API sample routes based on Express (see src/api/*.js)
    • Pre-render critical CSS on the initial page load to deal with FOUC
    • Render the top level component to <div id="app"></div> instead of document.body
    • Improve server-side rendering logic
    • Improve documentation
    • Update dot files with project settings for text editors and IDEs
    Source code(tar.gz)
    Source code(zip)
  • v0.3.3(Apr 16, 2015)

    • Update Babel to 5.0: http://babeljs.io/blog/2015/03/31/5.0.0/
    • Remove Use Strict Directive from .js files since Babel inserts them automatically
    • Update deployment script. See deploy task in gulpfile.js
    • Update other npm modules
    Source code(tar.gz)
    Source code(zip)
  • v0.3.2(Apr 8, 2015)

    • Add React style guide (see ./docs)
    • Update React to 0.13; update other npm modules
    • Update React components to use ES6 class-based syntax
    • Add a higher-order React component sample (see App/AppViewport)
    • Replace JSHint with ESLint
    • Add JSCS config file
    • Update .gitattributes and .gitignore files
    • Update favicon.ico and other icons
    Source code(tar.gz)
    Source code(zip)
  • v0.3.1(Feb 25, 2015)

  • v0.3.0(Feb 9, 2015)

Owner
Kriasoft
Here on GitHub we share our experience with web infrastructure, scalable web application design, and DevOps.
Kriasoft
Minimal Electron Starter Kit built with Typescript, React, Webpack 5 and Babel 7

electron-webpack-boilerplate Minimal Electron Starter Kit built with Typescript, React, Webpack 5 and Babel 7 To create a JS library, check out js-lib

Francisco Hodge 10 Aug 16, 2022
Express typescript boilerplate using @types/node, @types/express

Express framework boilerplate in typescript.

Harris Gurung 3 Sep 21, 2022
A boilerplate for building production-ready RESTful APIs using Node.js, Express, and Mongoose

By running a single command, you will get a production-ready Node.js app installed and fully configured on your machine. The app comes with many built-in features, such as authentication using JWT, request validation, unit and integration tests, continuous integration, docker support, API documentation, pagination, etc. For more details, check the features list below.

Hagop Jamkojian 5k Dec 31, 2022
Postgres Node.js Express TypeScript application boilerplate with best practices for API development.

Node TypeScript Boilerplate Postgres Developer Ready: A comprehensive template. Works out of the box for most Node.js projects. This project is intend

Chirag Mehta 9 Aug 28, 2022
A boilerplate for REST API Development with Node.js, Express, and MongoDB using TypesScript

node-mongo-boilerplate A simple boilerplate for NODEJS, EXPRESS and MONGODB REST API development . Quick Start Make sure you have node.js v14 + npm v8

Asamoah Michael 5 Oct 16, 2022
React Native Boilerplate - The Boilerplate contains all the basic packages, common components and, prebuilt code architecture

The Boilerplate contains all the basic packages, common components and, prebuilt code architecture. It will save developer's project setup time.

MindInventory 36 Dec 26, 2022
Nestjs boilerplate template (mongodb, typeorm, graphql - code first, i18n, global exception handling etc.)

Description City-Library-Demo project for boilerplate. (node version: 16.14.0, npm version: 8.5.2) First Steps Create .env file in root directory. (Th

Mert Kaygusuz 7 Nov 21, 2022
A starter for nextjs that pulls in tailwindui, graphql

NextJS TypeScript TailwindUI GraphQL Boilerplate Demonstrates a NextJS application with TypeScript and TailwindUI with a ASP.Net Core GraphQL based AP

RDA Corporation 5 Nov 17, 2022
Express Graphql Clean Architecture

Folder pattern for express graphql starterkit clean architecture, easy to scalable and easy to maintenance, explore documentation for more about this starterkit https://typegraphql.com

Restu Wahyu Saputra 10 Aug 14, 2022
Solana Boilerplate - Lightweight boilerplate for Solana dapps. Allows quick building and prototyping.

Lightweight boilerplate for Solana dapps. Allows quick building and prototyping. Feel free to contribute or fork this repository. Make it yours! Leave us a ⭐️ if this repo helped you.

null 21 Nov 15, 2022
🚀 A well-structured boilerplate and Starter for Next.js 12+, Tailwind CSS 3, Redux, Redux Thunk, and TypeScript

?? A well-structured boilerplate and Starter for Next.js 12+, Tailwind CSS 3, Redux, Redux Thunk, and TypeScript ⚡️ Made with developer experience first ESLint + Prettier + Lint-Staged + VSCode setup

null 4 Nov 28, 2022
Very minimalistic boilerplate to start most Typescript Express projects. Includes Mongodb connection via Mongoose with a sample post model.

Minimalist express-typescript-boilerplate Available Scripts - `tsc' - builds the tsc project to the dist folder - `build` - cleans the previous build

Black Axe 16 Dec 13, 2022
Apollo Server Express Boilerplate

Boilerplate for graphql and graphql-ws using Apollo Server Express and powered by TypeORM and TypeGraphQL to make your work is quicker and easier.

Arya W Pratama 10 Dec 14, 2022
This is a template project demonstrating how the MERN stack(Mongo, Express, React, Node) can be used, here we have the back end implementation and there is the React implementation as the front end

Versão em português MERN stack This is a template project demonstrating how the MERN stack(Mongo, Express, React, Node) can be used, here we have the

Douglas Samuel Gonçalves 2 Jan 22, 2022
A boilerplate for Node.js web applications

Hackathon Starter Live Demo: https://hackathon-starter.walcony.com Jump to What's new? A boilerplate for Node.js web applications. If you have attende

Sahat Yalkabov 34k Dec 28, 2022
DDD/Clean Architecture inspired boilerplate for Node web APIs

Node API boilerplate An opinionated boilerplate for Node web APIs focused on separation of concerns and scalability. Features Multilayer folder struct

Talysson de Oliveira Cassiano 3k Dec 30, 2022
Hi there! This is a react native starter which used to build a awesome Event Booking App based on the Figma design. You can download or clone it to speed up your projects.

mcrn-event-booking-app-starter Hi there! This is a react native starter which used to build a awesome Event Booking App based on the Figma design. You

Roy Chen 43 Dec 19, 2022
A boilerplate application for building Node.js back-end application in TypeScript

RESTful API Node Server Boilerplate A boilerplate/starter project for quickly building RESTful APIs and with typescript ?? Installation Install the de

Youssef Hajjari 14 Nov 23, 2022
@code-collabo's node-mongo API boilerplate template (typescript)

@code-collabo's node-mongo API boilerplate template (typescript) This is the manual download option for the API boilerplate template generated by @cod

Code Collabo 2 May 31, 2022