React Component Library Playground

for Heroku deployment

OVERIVEW

This is a playground for experimenting with a component library. This is intended to provide:

• a small app to experiment with a component library locally.
• a lightweight webpack config (for development and production)
• some helpful tooling for development workflow
• a similar setup to what you'll see in the wild
• Heroku-ready deployment setup

NOTE: This app is based on my React + Node Starter.

UP & RUNNING

• Install dependencies $ npm install or $ yarn

• Fire up a development server:

• $ npm run dev

Once the server is running, you can visit http://localhost:8080/

Linting

This assumes you have eslint and eslint-watch installed. If you don't, run the following:

$ npm i -g eslint eslint-watch

or if you need permissions:

$ sudo npm i -g eslint eslint-watch

To run the linter once:

$ npm run lint

To run the watch task:

$ npm run lint:watch

Testing

To run the tests:

$ npm test

Production Build

To build your production assets and run the server:

$ npm start

DEPLOYING TO HEROKU

This app is set up for deployment to Heroku!

This assumes you have already have a Heroku account and have the Heroku CLI installed

$ heroku login
$ heroku create -a name-of-your-app
$ git push heroku master
$ heroku open

Heroku will follow the build command in your package.json and compile assets with webpack.prod.config.js. It runs the Express web server in server.js.

If you're unfamiliar with Heroku deployment (or just need a refresher), they have a really great walkthrough here.