Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/halfzebra/create-elm-app
🍃 Create Elm apps with zero configuration
https://github.com/halfzebra/create-elm-app
boilerplate build-tool cli elm elm-platform hmr scaffolding webpack zero-configuration
Last synced: about 2 months ago
JSON representation
🍃 Create Elm apps with zero configuration
- Host: GitHub
- URL: https://github.com/halfzebra/create-elm-app
- Owner: halfzebra
- License: mit
- Created: 2016-09-04T18:44:08.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2024-04-04T16:51:50.000Z (3 months ago)
- Last Synced: 2024-04-20T22:20:32.395Z (2 months ago)
- Topics: boilerplate, build-tool, cli, elm, elm-platform, hmr, scaffolding, webpack, zero-configuration
- Language: JavaScript
- Homepage:
- Size: 1.53 MB
- Stars: 1,679
- Watchers: 22
- Forks: 150
- Open Issues: 51
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Lists
- awesome-elm - create-elm-app - Create Elm apps with no build configuration. (Boilerplates / Individual Podcast episodes)
- awesome-toolkits - Create Elm App - Create Elm apps with zero configuration. (Web)
- awesome-stars - create-elm-app
- awesome-stars - halfzebra/create-elm-app - 🍃 Create Elm apps with zero configuration (JavaScript)
- Awesome-BigData - create-elm-app - Create Elm apps with no build configuration. (Boilerplates)
README
# Create Elm App [](https://badge.fury.io/js/create-elm-app) [](https://travis-ci.org/halfzebra/create-elm-app) [](https://ci.appveyor.com/project/halfzebra/create-elm-app)
Create Elm apps with no build configuration.
* [Getting Started](#getting-started) – How to create a new app.
* [User Guide](https://github.com/halfzebra/create-elm-app/blob/master/template/README.md) – How to develop apps bootstrapped with Create Elm App.
* [Elm SPA example](https://github.com/halfzebra/elm-spa-example) - Using Create Elm App Elm in SPA example by [Richard Feldman.](https://github.com/rtfeldman)
## Quickstart
```sh
npm install create-elm-app -g
create-elm-app my-app
cd my-app/
elm-app start
```
Create a production build with `elm-app build`
## Getting Started
### Installation
**Node >=8** is required for installation.
#### Yarn
`yarn global add create-elm-app`
#### NPM
`npm install create-elm-app -g`
If you are running Linux OS, you should install it as the superuser:
`sudo npm install create-elm-app -g`
### Creating an App
To create a new app, run:
```sh
create-elm-app my-app
cd my-app/
```
Create a new `my-app` folder with files for your future project.
```
my-app/
├── .gitignore
├── README.md
├── elm.json
├── elm-stuff
├── public
│ ├── favicon.ico
│ ├── index.html
│ ├── logo.svg
│ └── manifest.json
├── src
│ ├── Main.elm
│ ├── index.js
│ ├── main.css
│ └── serviceWorker.js
└── tests
└── Tests.elm
```
You are ready to employ the full power of Create Elm App!
### `elm-app start`
Run the app in development mode.
Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
The page will reload if you make edits.
You will see the build errors and lint warnings in the console and the browser window.
### `elm-app build`
Builds the app for production to the `build` folder.
It bundles Elm app and optimizes the build for the best performance.
The build is minified, and the filenames include the hashes.
## Guide
Every generated project will contain a readme with guidelines for future development.
The latest version is available [here](https://github.com/halfzebra/create-elm-app/blob/master/template/README.md)
## Why use this?
Developing with Elm is fun and easy, but at some point, you will hit a couple of limitations.
- [elm-make](https://guide.elm-lang.org/install.html#elm-make) has a limited support for working with JavaScript and CSS.
- [elm-reactor](https://guide.elm-lang.org/install.html#elm-reactor) does not work with apps that rely on [ports.](http://guide.elm-lang.org/interop/javascript.html)
- You can not use [Hot Module Replacement.](https://webpack.js.org/concepts/hot-module-replacement)
Create Elm App adds a tool for optimizing production builds and running a development server with your app, which supports HMR.
All of that, combined with all the functionality of [elm](https://guide.elm-lang.org/install.html) in a single command line tool, which you might use as a dependency or `eject` anytime.
## Want a custom setup?
Not happy with the default configuration? Use `elm-app eject` and customize your process.
That way, you can use Create Elm App as a tool for a boilerplate generation.
## Philosophy
Inspired by [create-react-app](https://github.com/facebookincubator/create-react-app)
* **One Dependency:** There is just one build dependency. It uses Elm Platform, Webpack, and other amazing projects, but provides a cohesive curated experience on top of them.
* **Zero Configuration:** No configuration files or command line options required to start working with Elm. Configuring both development and production builds is handled for you so you can focus on writing code.
* **No Lock-In:** You can “eject” to a custom setup at any time. Run a single command, and all the configuration and build dependencies will be moved directly into your project, so you can pick up right where you left off.
## What is inside
The tools used by Create Elm App are subject to change.
Currently it is a thin layer on top of many amazing community projects, such as:
* [elm](https://github.com/elm/compiler/tree/master/installers/npm)
* [elm-test](https://github.com/elm-community/elm-test)
* [webpack](https://webpack.js.org/) with [webpack-dev-server](https://github.com/webpack/webpack-dev-server), [html-webpack-plugin](https://github.com/ampedandwired/html-webpack-plugin) and [style-loader](https://github.com/webpack/style-loader)
* [Babel](http://babeljs.io/) with ES6
* [Autoprefixer](https://github.com/postcss/autoprefixer)
* and others.
All of them are transitive dependencies of the provided npm package.
## Contributing
We would love to get you involved! Please check our [Contributing Guide](CONTRIBUTING.md) to get started!
## Alternatives
- [parcel](http://blog.hercules-ci.com/elm/2018/11/21/using-elm-and-parcel-for-zero-configuration-web-asset-management/)
- [elm-webpack-starter](https://github.com/elm-community/elm-webpack-starter)
- [spades](https://github.com/rogeriochaves/spades)
- [elm-live](https://github.com/tomekwi/elm-live)
- [elm-app-boilerplate](https://github.com/gkubisa/elm-app-boilerplate)
- [elm-hot-loader-starter](https://github.com/klazuka/example-elm-hot-webpack)
- [generator-elm](https://github.com/danneu/generator-elm)
- [elm-boil](https://github.com/GioPat/elm-boil)