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.
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.
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!
elm.json file is updated with
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
Element types, instead of the standard html types.
Here's where part 1 left off: 0e82b7.
- Tie together
- 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