Skip to content
On this page

Getting started

What we'll learn

  • How to install Elm Land
  • How to create our first project
  • How to run the project in our browser
Homepage

Prerequisites

  1. An installation of Node.js (v16 or higher)
  2. A text editor, we recommend Visual Studio Code

Installation

To get started, we'll need to install the latest version of Elm Land from NPM. At the time of writing, the latest version of Elm Land is v0.18.3. Here's the NPM command that will install elm-land on your computer:

sh
npm install -g elm-land@latest
npm install -g elm-land@latest
1

When the install command has finished, you'll be able to run elm-land in your terminal. Try it out, to see if it worked:

txt
$ elm-land

🌈  Welcome to Elm Land! (v0.18.3)
    ⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺
    Here are the available commands:

    ✨ elm-land init <folder-name> ...... create a new project
    🚀 elm-land server ................ run a local dev server
    📦 elm-land build .......... build your app for production
    📄 elm-land add page <url> ................ add a new page
    🍱 elm-land add layout <name> ........... add a new layout
    🔧 elm-land customize <name> .. customize a default module

    Want to learn more? Visit https://elm.land/guide
$ elm-land

🌈  Welcome to Elm Land! (v0.18.3)
    ⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺
    Here are the available commands:

    ✨ elm-land init <folder-name> ...... create a new project
    🚀 elm-land server ................ run a local dev server
    📦 elm-land build .......... build your app for production
    📄 elm-land add page <url> ................ add a new page
    🍱 elm-land add layout <name> ........... add a new layout
    🔧 elm-land customize <name> .. customize a default module

    Want to learn more? Visit https://elm.land/guide
1
2
3
4
5
6
7
8
9
10
11
12
13
14

Getting errors from NPM?

Sometimes, folks have issues with the -g flag. If you see an EACCES error, check out this NPM guide on how to fix the problem.

If you get stuck, swing by the Elm Land Discord, and we'll figure it out together!

Create your first project

Now that you've installed Elm Land, you'll have access to a few new commands from your terminal. Let's start by using the elm-land init command to create our first project:

sh
elm-land init hello-world
elm-land init hello-world
1
txt
🌈  Elm Land created a new project in ./hello-world
    ⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺
    Here are some next steps:

    📂 cd hello-world
    🚀 elm-land server
🌈  Elm Land created a new project in ./hello-world
    ⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺
    Here are some next steps:

    📂 cd hello-world
    🚀 elm-land server
1
2
3
4
5
6

Run the development server

Elm Land comes with a built-in dev server, which lets us see our project in a web browser. To run a new server, we'll use the elm-land server command:

sh
elm-land server
elm-land server
1
txt
🌈  Elm Land is ready at http://localhost:1234
🌈  Elm Land is ready at http://localhost:1234
1

When you visit http://localhost:1234 in your browser, here's what you will see:

Homepage

You did it! 🎉

Congratulations! Now that you know how to create an Elm Land application, let's add some more pages. In the next section, we'll learn how to creates new pages and style them with CSS.

See you there!

Made for you with ❤️