https://github.com/berenddeboer/elm-mdc-starter-kit

Starter kit demonstrating recommended use of elm-mdc with hot loading capabilities.
https://github.com/berenddeboer/elm-mdc-starter-kit

elm

Last synced: 6 days ago
JSON representation

Starter kit demonstrating recommended use of elm-mdc with hot loading capabilities.

• Host: GitHub
• URL: https://github.com/berenddeboer/elm-mdc-starter-kit
• Owner: berenddeboer
• Created: 2019-04-26T04:10:46.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2022-12-10T17:16:54.000Z (about 2 years ago)
• Last Synced: 2024-04-14T15:13:22.910Z (8 months ago)
• Topics: elm
• Language: JavaScript
• Size: 2.61 MB
• Stars: 17
• Watchers: 2
• Forks: 2
• Open Issues: 25
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# About

[![Build Status](https://api.travis-ci.org/berenddeboer/elm-mdc-starter-kit.svg?branch=master)](https://travis-ci.org/berenddeboer/elm-mdc-starter-kit/)

Best practice example of using

[elm-mdc](https://github.com/aforemny/elm-mdc), the Elm implementation

of [Google's Material Design for the web](https://github.com/material-components/material-components-web/), using hot code swapping.

# Install

After cloning the repository:

1. Add the latest [elm-mdc](https://github.com/aforemny/elm-mdc):

```

git submodule init

git submodule update

```

2. Install all required packages (includes a local copy of the elm compiler):

```

npm install

```

# Hot code swapping

Test hot loading:

1. Run: `npm run hot`

2. Point browser at: `http://localhost:3009/`

3. Change the button text in `src/Main.elm` and save. Browser should automatically update.

Whenever you change a `.scss` or `.elm` file, your browser will be

reloaded, but keep its state.

# Production

Create production ready files in the `dist` directory with:

```

npm run build

```

# Under the hood

The hot reloading works thanks to the [elm-hot-webpack-loader](https://github.com/klazuka/elm-hot-webpack-loader).