Elm - Package Manager | Adglob Infosystem Pvt Ltd

In this guide, we will discuss Package Manager in ELM Programming Language. A package manager is a command-line tool that automates the process of installing, upgrading, configuring, and removing packages in your application.

Just like JavaScript has a package manager called npm, elm has a package manager called elm-package.

The package manager performs the following three tasks −

Installs all dependencies that an elm application need
Publishes custom packages
Determines the version of your package when you are ready to publish and update.

Elm Package Manager Commands

The following table lists down the various Elm package manager commands −

Sr. No.	Command	Syntax	Description
1	install	elm-package install	Installs packages to use locally
2	publish	elm-package publish	Publishes your package to the central catalog
3	bump	elm-package bump	Bumps version numbers based on API changes
4	diff	elm-package diff	Gets differences between two APIs

In order to publish your package, you need to host source code on GitHub and have the version properly labeled with a git tag. Following illustration shows how to use elm-package manager to pull an external dependency.

Illustration – Installing svg package

In this example, we will see how to integrate Scalable Vector Graphics(SVG) into an elm application.

Step 1 − Create a folder elmSvgApp

Step 2 − Install svg package using the following command −

elm-package install elm-lang/svg

Step 3 − Install Create a SvgDemo.elm file and type the content given below. We import Svg module to draw a rectangle of 100×100 dimension and fill the colour red.

import Svg exposing (..)
import Svg.Attributes exposing (..)

main =
   svg
   [ width "120"
   , height "120"
   , viewBox "0 0 120 120"
   ]
   [ rect
      [ x "10"
      , y "10"
      , width "100"
      , height "100"
      , rx "15"
      , ry "15"
      ,fill "red"
      ]
      []
   ]

Step 4 − Now build the project using elm make .\SvgDemo.elm. This will generate an index.html as shown below −

Next Topic : Click Here