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
   • Built With
2. Getting Started
   • Prerequisites
   • Installation
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

  npm install npm@latest -g

• Pnpm

  npm i -g pnpm

• Git
• Elm

Installation

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

1. Clone the repo

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

2. Install Node dependencies

   pnpm i

3. Optionally update the dependencies

   pnpm up --latest

4. Recommend to run tests to check if things are breaking

   pnpm test

5. Run formatter to format code

   pnpm format

6. Review Elm code quality

   pnpm review

7. Start dev server

   pnpm dev

8. Compile for production

   pnpm build

9. Preview production build

   pnpm preview

10. Start standalone Elm reactor

    pnpm elm:dev

11. Build standalone Elm code

    pnpm elm:build

12. Start interactive Elm shell

    pnpm repl

(back to top)

Roadmap

• 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 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
• Elm Packages
• Vite Plugin Elm
• Vite Elm Template
• Elm Spa Example
• Elm Tooling
• Elm Parcel Template
• 25 Elm Examples
• Elm Programming
• elm-test-rs
• Elm Radio
• Elm init next steps
• elm-review
• Using Tailwind CSS in Elm and VSCode
• Getting Started with the Elm Programming Language

(back to top)