Elm – Package Manager

elm package manager

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.CommandSyntaxDescription
1installelm-package installInstalls packages to use locally
2publishelm-package publishPublishes your package to the central catalog
3bumpelm-package bumpBumps version numbers based on API changes
4diffelm-package diffGets 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 −

build project

Next Topic : Click Here

This Post Has One Comment

Leave a Reply