An open API service indexing awesome lists of open source software.

https://github.com/data-miner00/elm-vite-template

Intuitive, beginner friendly Elm template powered by Vite, supplemented with Tailwind
https://github.com/data-miner00/elm-vite-template

elm tailwindcss-v3 template vite

Last synced: 8 months ago
JSON representation

Intuitive, beginner friendly Elm template powered by Vite, supplemented with Tailwind

Awesome Lists containing this project

README

          

[![Contributors][contributors-shield]][contributors-url]
[![Forks][forks-shield]][forks-url]
[![Stargazers][stars-shield]][stars-url]
[![Issues][issues-shield]][issues-url]
[![Apache 2.0 License][license-shield]][license-url]






Elm Vite Template


Minimalistic Elm Template powered by Vite!


View Demo »




Explore the docs
·
Report Bug
·
Request Feature


Table of Contents



  1. About The Project



  2. Getting Started


  3. Usage

  4. Roadmap

  5. Contributing

  6. License

  7. Acknowledgments

## About The Project

A simple and intuitive Elm template powered by Vite. Built in TailwindCSS and HMR. Focus on the application itself rather than all these low-level configuration stuffs.

Incentives:

- Could not find intuitive Elm starter templates
- The Elm development workflow is awkward
- Want to try out Elmish architecture
- Buitl this Elm template so I can use for other projects.

Of course, no one template will serve all projects since your needs may be different. So I'll be adding more in the near future. You may also suggest changes by forking this repo and creating a pull request or opening an issue. Thanks to all the people have contributed to expanding this template!

(back to top)

### Built With

The technologies and tools used within this template.

- Elm
- Vite
- TailwindCSS
- JavaScript

(back to top)

## Getting Started

### Prerequisites

The list of tools that is used when development.

- npm
```sh
npm install npm@latest -g
```
- Pnpm
```sh
npm i -g pnpm
```
- [Git](https://git-scm.com/downloads)
- [Elm](https://elm-lang.org/)

### Installation

To use this template for personal use or contribution, simply perform the following.

1. Clone the repo
```sh
git clone https://github.com/data-miner00/elm-vite-template.git
```
2. Install Node dependencies
```sh
pnpm i
```
3. Optionally update the dependencies
```sh
pnpm up --latest
```
4. Recommend to run tests to check if things are breaking
```sh
pnpm test
```
5. Run formatter to format code
```sh
pnpm format
```
6. Review Elm code quality
```sh
pnpm review
```
7. Start dev server
```sh
pnpm dev
```
8. Compile for production
```sh
pnpm build
```
9. Preview production build
```sh
pnpm preview
```
10. Start standalone Elm reactor
```sh
pnpm elm:dev
```
11. Build standalone Elm code
```sh
pnpm elm:build
```
12. Start interactive Elm shell
```sh
pnpm repl
```

(back to top)

## Roadmap

- [x] Add Homepage
- [ ] Add 404 page
- [ ] Dark mode
- [ ] Add GitHub workflows
- [ ] Add PWA Manifest
- [ ] Mobile Responsive
- [ ] Navbar and header
- [ ] Add E2E tests

See the [open issues](https://github.com/data-miner00/elm-vite-template/issues) for a full list of proposed features (and known issues).

(back to top)

## Contributing

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are **greatly appreciated**.

If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement".
Don't forget to give the project a star! Thanks again!

1. Fork the Project
2. Create your Feature Branch (`git checkout -b feature/AmazingFeature`)
3. Commit your Changes (`git commit -m 'Add some AmazingFeature'`)
4. Push to the Branch (`git push origin feature/AmazingFeature`)
5. Open a Pull Request

(back to top)

## License

Distributed under the Apache 2.0 License. See `LICENSE` for more information.

(back to top)

## Acknowledgments

List of resources that are helpful and would like to give credit to.

- [Elm Lang](https://elm-lang.org/)
- [Elm Packages](https://package.elm-lang.org/)
- [Vite Plugin Elm](https://github.com/hmsk/vite-plugin-elm/)
- [Vite Elm Template](https://github.com/lindsaykwardell/vite-elm-template)
- [Elm Spa Example](https://github.com/rtfeldman/elm-spa-example)
- [Elm Tooling](https://elm-tooling.github.io/elm-tooling-cli/)
- [Elm Parcel Template](https://github.com/kutyel/elm-parcel-template)
- [25 Elm Examples](https://github.com/bryanjenningz/25-elm-examples)
- [Elm Programming](https://elmprogramming.com/)
- [elm-test-rs](https://github.com/mpizenberg/elm-test-rs)
- [Elm Radio](https://elm-radio.com/)
- [Elm init next steps](https://github.com/elm/compiler/blob/master/hints/init.md)
- [elm-review](https://package.elm-lang.org/packages/jfmengels/elm-review/latest/)
- [Using Tailwind CSS in Elm and VSCode](https://max.hn/thoughts/using-tailwind-css-in-elm-and-vscode)
- [Getting Started with the Elm Programming Language](https://www.toptal.com/front-end/getting-started-elm-language)

(back to top)

[contributors-shield]: https://img.shields.io/github/contributors/data-miner00/elm-vite-template.svg?style=for-the-badge
[contributors-url]: https://github.com/data-miner00/elm-vite-template/graphs/contributors
[forks-shield]: https://img.shields.io/github/forks/data-miner00/elm-vite-template.svg?style=for-the-badge
[forks-url]: https://github.com/data-miner00/elm-vite-template/network/members
[stars-shield]: https://img.shields.io/github/stars/data-miner00/elm-vite-template.svg?style=for-the-badge
[stars-url]: https://github.com/data-miner00/elm-vite-template/stargazers
[issues-shield]: https://img.shields.io/github/issues/data-miner00/elm-vite-template.svg?style=for-the-badge
[issues-url]: https://github.com/data-miner00/elm-vite-template/issues
[license-shield]: https://img.shields.io/github/license/data-miner00/elm-vite-template.svg?style=for-the-badge
[license-url]: https://github.com/data-miner00/elm-vite-template/blob/master/LICENSE