Creating a React app with rollup.js and buble

1 min read | by Johndous | on | in React, JavaScript

In this blog post we will see how to create a React app using rollup.js and Bublé step by step.

react-400.png

+

rollupjs-small.jpg

Before you start make sure that you have installed one of the latest versions of node.js in your system. If not use nvm to install one.

1. Create the folder structure

mkdir react-rollup-buble-scaffolding
cd react-rollup-buble-scaffolding

2. Install the dependencies

First add the react dependencies:

yarn add react react-dom prop-types

Then add the dev dependencies:

yarn add rollup rollup-plugin-buble rollup-plugin-commonjs rollup-plugin-node-resolve rollup-plugin-replace --dev

Your package.json should look like:

{
  "dependencies": {
    "prop-types": "^15.6.0",
    "react": "^16.2.0",
    "react-dom": "^16.2.0"
  },
  "devDependencies": {
    "rollup": "^0.52.2",
    "rollup-plugin-buble": "^0.18.0",
    "rollup-plugin-commonjs": "^8.2.6",
    "rollup-plugin-node-resolve": "^3.0.0",
    "rollup-plugin-replace": "^2.0.0"
  }
}

3. Create the rollup.config.dev.js file:

//rollup.config.dev.js
import resolve from 'rollup-plugin-node-resolve'
import buble from 'rollup-plugin-buble'
import replace from 'rollup-plugin-replace'
import commonjs from 'rollup-plugin-commonjs'

export default {
  input: 'src/index.js',
  plugins: [
    buble(),
    replace({
      'process.env.NODE_ENV': JSON.stringify('development')
    }),
    resolve(),
    commonjs({
      include: 'node_modules/**'
    })
  ],
  output: {
    file: 'dist/bundle.js',
    format: 'iife',
    sourcemap: true
  }
}

4. Create the index.js, App.js and Welcome.js under the following src folder structure:

Folder structure:

/Users/johndous/react-rollup-buble-scaffolding/src
├── components
|  └── Welcome.js
├── containers
|  └── App.js
└── index.js

index.js:

//src/index.js
import React from 'react'
import ReactDOM from 'react-dom'
import App from './containers/App'

const root = document.querySelector('#app')

ReactDOM.render(<App/>, root)

App.js:

//src/containers/App.js
import React from 'react'
import Welcome from '../components/Welcome'

const App = () => (
  <div>
    <Welcome name="guest" />
  </div>
)

export default App

Welcome.js:

//src/components/Welcome.js
import React from 'react'
import PropTypes from 'prop-types'

class Welcome extends React.Component {
  constructor() {
    super()
    this.state = {
      value: ''
    }
    this.handleChange = this.handleChange.bind(this)
  }
  handleChange(e) {
    this.setState({ value: e.target.value })
  }
  render() {
    const { name } = this.props
    const { value } = this.state
    return (
      <div className="Welcome">
        <h2>Welcome <span className="name">{value || name}</span> to react-rollup-scaffolding app!</h2>
        Your name: <input type="text" autoFocus value={value} onChange={this.handleChange}/>
      </div>
    )
  }
}

Welcome.propTypes = {
  name: PropTypes.string
}

Welcome.defaultProps = {
  name: ''
}

export default Welcome

5. Add a build:dev script to package.json

{
  "scripts": {
    "build:dev": "rollup -c rollup.config.dev.js -w"
  },
  "dependencies": {
    "prop-types": "^15.6.0",
    "react": "^16.2.0",
    "react-dom": "^16.2.0"
  },
  "devDependencies": {
    "rollup": "^0.52.1",
    "rollup-plugin-buble": "^0.18.0",
    "rollup-plugin-commonjs": "^8.2.6",   
    "rollup-plugin-node-resolve": "^3.0.0",
    "rollup-plugin-replace": "^2.0.0"
  }
}

6. Run the build:

npm run build:dev

You should see something like this:

Screen Shot 2017-12-19 at 00.16.12.png

7. Create the index.html:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>React - rollup.js scaffolding dev</title>
  </head>
  <body>
    <div id="app"></div>
    <script src="dist/bundle.js"></script>
  </body>
</html>

8. Then open index.html in your browser:

Screen Shot 2017-12-19 at 00.27.55.png

That's it! 🎉 You have your first React + Rollup.js + Bublé app up and running! 🚀

You can find the code of the example at GitHub with some additions:

  • It compiles scss to css.
  • It uses ESLint for linting.
  • If you run the development build the livereload plugin refreshes your browser on any file change.
  • If you run the production build you can see the file size of the minified bundle.

There are no comments for this blog post quite yet! Add the first one!

Click here to add your comment