Menu
Article elm

Dev Stream - Full Stack Functional App Pt. 1

Sean Allin Newell

Sean Allin Newell

• 3 min read

The Dev Stream is a short snippet of what I'm building today. I thought it would be neat to build something out in the open.

This particular project is going to explore:

I've already done a fair bit of work in another project with elm-ui, and I have two projects at work that use F#. I'm mentoring an intern at work who is using Suave, which I've never used before for a project, so hopefully this will help me better understand Suave and using F# and Elm for a great full stack experience.

The project lives in a new gitlab repo, and will eventually have a running demo instance.

Design

Before we write code we should fill out a design document.

A design document should list goals and sketches as to what some user interactions might look like. My document is a paltry exscuse for a design document, because I don't know what I want. It's good to remind yourself to be super agile in everything, that way you can justify doing a shoddy job 😜.

# Overview

An app to manage a private cloud Simple UI to quickly
execute terraform or kubectl commands

## Goals

- User sees their infrastructure
- User can interact with their infrastructure in the browser
- User sees high level constructs
  - compose yaml file
  - inventory
  - terraform config
  - kubernetes pods (health?)

The idea is to provide high level overview of infrastructure
at a glance, and show important things, with some interactive
click-able, drill-downs where necessary. Perhaps we don't
even see the pods health in the dashboard, but maybe
just the cluster's, and clicking into a service or something
shows the pods.

This is okay for now, deeper down in the design document on the repo you'll also see some actionable tasks we can do:

# Dev

First thing's first, make a scaffolded dummy project that all
works together and can be dockerized.

- Frontend with static text
- Backend can return dummy JSON
- Frontend calls backend, renders the JSON

That's what I'll be trackin' here.

Elm Frontend

I have create-elm-app installed, and it's just a joy to use.

iac-ui (master) npx create-elm-app front-end

Creating front-end project...

Dependencies loaded from local cache.
Dependencies ready!                
Success! Compiled 1 module.                                          

Project is successfully created in `/home/sean/repos/iac-ui/front-end`.

Inside that directory, you can run several commands:

  elm-app start
    Starts the development server.

  elm-app build
    Bundles the app into static files for production.

  elm-app test
    Starts the test runner.

  elm-app eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd front-end
  elm-app start

We get a nice development experience with create-elm-app, but before we fire up elm-app start I want to look at using the elm markup package.

We need to install two packages real quick:

 front-end (master) ✗ elm-app install mdgriffith/elm-ui
Here is my plan:
  
  Add:
    mdgriffith/elm-ui    1.1.0

Would you like me to update your elm.json accordingly? [Y/n]: Y
Dependencies loaded from local cache.
Dependencies ready!                
 front-end (master) ✗ elm-app install mdgriffith/elm-markup
Here is my plan:
  
  Add:
    elm/parser               1.1.0
    mdgriffith/elm-markup    3.0.1

Would you like me to update your elm.json accordingly? [Y/n]: Y
Starting downloads...

  ● elm/parser 1.1.0
  ● mdgriffith/elm-markup 3.0.1

Dependencies ready!

Now our elm.json file is updated with elm-ui and elm-markup. We're just going to have a simple inline-markup source variable for our view for now, because most the elm-markup docs usually incur an additional HTTP request on document load which I don't really want to do.

I also want to compile the views into elm-ui Element types, instead of the standard html types.

Here's where part 1 left off: 0e82b7.

TODO

  • Tie together elm-ui and elm-markup
  • Compile and run the elm app with the static text
  • Put together a bit of a view to see maybe a docker yaml file, or whichver part seems easiest
  • Start on the sauve server after that to serve a JSONified version of the view to render
Share