https://github.com/gauravtiwari/webpacker-react-frontend

An example frontend react app to demonstrate webpacker with Rails 5.1
https://github.com/gauravtiwari/webpacker-react-frontend

jest rails react webpacker

Last synced: 18 days ago
JSON representation

An example frontend react app to demonstrate webpacker with Rails 5.1

• Host: GitHub
• URL: https://github.com/gauravtiwari/webpacker-react-frontend
• Owner: gauravtiwari
• Created: 2017-03-26T11:56:18.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2017-04-07T06:13:46.000Z (over 7 years ago)
• Last Synced: 2024-11-30T00:12:19.055Z (23 days ago)
• Topics: jest, rails, react, webpacker
• Language: Ruby
• Homepage: https://webpacker-react-frontend.herokuapp.com/
• Size: 171 KB
• Stars: 22
• Watchers: 4
• Forks: 5
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Rails Webpacker React Frontend Example App

Demo app that showcases Rails on webpack, react, jest and yarn using Webpacker gem (default setup in upcoming Rails 5.1)

* [Webpacker](https://github.com/rails/webpacker)

* [PR](https://github.com/rails/rails/pull/26836)

* [Blog Post](https://medium.com/@gauravtiwari/introducing-webpacker-7136d66cddfb)

# Features

Supports bundling

* Javascript

* Stylesheets

* Images

* Fonts

* Linking assets

* Jest

* Turbolinks

* React

# Running in development

The app is using [foreman](https://github.com/ddollar/foreman), famous process manager. Checkout the `Procfile.dev` in app root for more information.

```bash

  git clone [email protected]:gauravtiwari/webpacker-react-frontend.git

  cd webpacker-react-frontend

  bundle install

  brew install yarn # (if not installed)

  ./bin/yarn install

```

Then, run the server using this binstub,

```bash

  ./bin/server

```

(try `chmod 777 ./bin/server` incase it doesn't work)

Visit [http://localhost:5000/](http://localhost:5000/)

# Installing and using new node modules

```bash

  # Using Yarn

  ./bin/yarn add material-ui

```

Then, import it in your component,

```js

  import { Card } from 'material-ui/Card';

```