Awesome Open Source
Awesome Open Source

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

Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
javascript (68,032
react (5,155
streaming (282
code-splitting (43
zero-configuration (39
server-rendering (21

Find Open Source By Browsing 7,000 Topics Across 59 Categories