Skip to content
react made easy
Branch: master
Clone or download
Latest commit 2efbab7 Jan 3, 2019
Type Name Latest commit message Commit time
Failed to load latest commit information.
art rebranding! Sep 20, 2017
benchmark rebranding! Sep 20, 2017
packages use yarn workspaces Jan 3, 2019
.eslintignore add eslint Mar 19, 2017
.eslintrc add eslint Mar 19, 2017
.gitignore add benchmarking for prod server Mar 19, 2017
.travis.yml add travis integration Mar 19, 2017
LICENSE Initial commit Mar 12, 2017 Remove codesponsor snippet Dec 27, 2017
package.json use yarn workspaces Jan 3, 2019
yarn.lock use yarn workspaces Jan 3, 2019

react made easy


Build Status


minimal setup

npm install bae --save

Add these 2 lines in your package.json

"scripts": {
  "dev": "bae dev",
  "start": "bae"

Start the dev server with npm run dev. You just setup server rendering with hot module replacement and hot reload!



Make pages like it's the 90s.  

  • pages are routes: pages/about renders /about of your website

  • pages are rendered on the server

  • pages are streamed to the browser for quick time-to-first-byte

  • built in code splitting, each page gets it's own page.js

  • code shared between pages is served as common.js for long term caching

  • pages/home.js renders the homepage /

  • why is this important?


import React from 'react'

export default class extends React.Component {
  constructor (props) {
    this.state = {message: 'hello'} // rendered on the server
  componentDidMount () {
    this.setState({message: 'hello world'}) // updated on the browser
  render () {
    return <div>{this.state.message}</div>



React has a lifecycle method that get's called on the server componentWillMount that can be used to set data for server rendering. But, it does not support asynchronous data fetching before rendering the component.

bae introduces a new lifecycle method to pages that runs only on the server.

import React from 'react'

export default class extends React.Component {
  constructor (props) {
    this.state = {username: 'siddharthkp'}
  asyncComponentWillMount () {
      Return a promise.
      It will get resolved on the server and passed as props to the component.
    return axios.get(`${this.state.username}`)
  render () {
    return <div>{}</div>



the usual, nothing special here.



comes with styled-components which gets rendered on the server.


static assets

keep your images, fonts, etc. in a directory named static



npm start will compile, optimize and serve your app.



Check out the example applications to see how simple this is.


like it?

⭐️ this repo



  • init by default
  • easy api for lazy loading components
  • server worker support
  • make first build faster




MIT © siddharthkp

You can’t perform that action at this time.