Elm LandGetting started
What we'll learn
- How to install Elm Land
- How to create our first project
- How to run the project in our browser
Prerequisites
- An installation of Node.js (v16 or higher)
- 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.1. Here's the NPM command that will install elm-land on your computer:
npm install -g elm-land@latest
npm install -g elm-land@latest
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:
$ elm-land
🌈 Welcome to Elm Land! (v0.18.1)
⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺
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.1)
⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺
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
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:
elm-land init hello-world
elm-land init hello-world
🌈 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
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:
elm-land server
elm-land server
🌈 Elm Land is ready at http://localhost:1234
🌈 Elm Land is ready at http://localhost:1234
When you visit http://localhost:1234 in your browser, here's what you will see:
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!