From b3f3ecf80338ae4858301a0c244a370bf4c37c6b Mon Sep 17 00:00:00 2001 From: Max Leonard Inden Date: Fri, 12 May 2017 16:49:32 +0200 Subject: [PATCH] Improve front-end build process We generate binaries whenever `make build-all` is run. If they already exist, we only regenerate them if they are outdated. When one makes changes to the front-end and runs the single command `make build-all` on the root level Makefile, the front-end is rebuild accordingly. `make build-all` will use Docker to build the front-end. If someone prefers to install all the dev dependencies on their local machine instead, one can add the `NO_DOCKER=true` flag. For folks that only want to make back-end changes `ui/bindata.go` is checked in, so they do not have to build the front-end. They still use the `make build` command as before. --- .travis.yml | 18 +++++++----------- Makefile | 23 ++++++++++++++++++++--- ui/app/CONTRIBUTING.md | 26 ++++++++++++++++++++------ ui/app/Makefile | 40 +++++++++++++++++++++++++++++++--------- 4 files changed, 78 insertions(+), 29 deletions(-) diff --git a/.travis.yml b/.travis.yml index 7ff05f68..63970b3a 100644 --- a/.travis.yml +++ b/.travis.yml @@ -2,20 +2,16 @@ sudo: false language: go services: - - docker +- docker go: - 1.8.1 -before_install: -- docker build --no-cache -t elm-env ui/. - script: -- make -- docker run --rm -t -v "$(pwd):/app" -w /app/ui/app elm-env elm-format --validate src/ - -- docker run --rm -t -v "$(pwd):/app" -w /app/ui/app elm-env make script.js -- docker run --rm -t -v "$(pwd):/usr/src/app" -w /usr/src/app golang make assets +# test front-end +- make clean +- cd ui/app/ && make && cd ../.. +- make assets - git diff --exit-code - -- docker run --rm -t -v "$(pwd):/app" -w /app/ui/app elm-env make test +# test back-end +- make diff --git a/Makefile b/Makefile index 4103fb3f..e5f3e779 100644 --- a/Makefile +++ b/Makefile @@ -17,6 +17,7 @@ pkgs = $(shell $(GO) list ./... | grep -v -E '/vendor/|/ui') PREFIX ?= $(shell pwd) BIN_DIR ?= $(shell pwd) +FRONTEND_DIR = $(BIN_DIR)/ui/app DOCKER_IMAGE_NAME ?= alertmanager DOCKER_IMAGE_TAG ?= $(subst /,-,$(shell git rev-parse --abbrev-ref HEAD)) @@ -43,10 +44,14 @@ vet: @echo ">> vetting code" @$(GO) vet $(pkgs) +# Will only build the back-end build: promu @echo ">> building binaries" @$(PROMU) build --prefix $(PREFIX) +# Will build both the front-end as well as the back-end +build-all: assets build + tarball: promu @echo ">> building release tarball" @$(PROMU) tarball --prefix $(PREFIX) $(BIN_DIR) @@ -55,9 +60,15 @@ docker: @echo ">> building docker image" @docker build -t "$(DOCKER_IMAGE_NAME):$(DOCKER_IMAGE_TAG)" . -assets: - @echo ">> writing assets" +assets: go-bindata ui/bindata.go template/internal/deftmpl/bindata.go + +go-bindata: -@$(GO) get -u github.com/jteeuwen/go-bindata/... + +template/internal/deftmpl/bindata.go: template/default.tmpl + @go-bindata $(bindata_flags) -mode 420 -modtime 1 -pkg deftmpl -o template/internal/deftmpl/bindata.go template/default.tmpl + +ui/bindata.go: ui/app/script.js ui/app/index.html ui/lib # Using "-mode 420" and "-modtime 1" to make assets make target deterministic. # It sets all file permissions and time stamps to 420 and 1 @go-bindata $(bindata_flags) -mode 420 -modtime 1 -pkg ui -o \ @@ -66,7 +77,8 @@ assets: ui/app/favicon.ico \ ui/lib/... - @go-bindata $(bindata_flags) -mode 420 -modtime 1 -pkg deftmpl -o template/internal/deftmpl/bindata.go template/default.tmpl +ui/app/script.js: $(shell find ui/app/src -iname *.elm) + cd $(FRONTEND_DIR) && $(MAKE) script.js promu: @GOOS=$(shell uname -s | tr A-Z a-z) \ @@ -76,4 +88,9 @@ promu: proto: scripts/genproto.sh +clean: + rm template/internal/deftmpl/bindata.go + rm ui/bindata.go + cd $(FRONTEND_DIR) && $(MAKE) clean + .PHONY: all style format build test vet assets tarball docker promu proto diff --git a/ui/app/CONTRIBUTING.md b/ui/app/CONTRIBUTING.md index 448d076e..b754032d 100644 --- a/ui/app/CONTRIBUTING.md +++ b/ui/app/CONTRIBUTING.md @@ -8,9 +8,17 @@ This document describes how to: ## Dev Environment Setup -- Elm is [installed](https://guide.elm-lang.org/install.html#install) -- Your editor is [configured](https://guide.elm-lang.org/install.html#configure-your-editor) -- [elm-format](https://github.com/avh4/elm-format) is installed +You can either use our default Docker setup or install all dev dependencies +locally. For the former you only need Docker installed, for the latter you need +to set the environment flag `NO_DOCKER` to `true` and have the following +dependencies installed: + +- [Elm](https://guide.elm-lang.org/install.html#install) +- [Elm-Format](https://github.com/avh4/elm-format) is installed + +In addition for easier development you +can [configure](https://guide.elm-lang.org/install.html#configure-your-editor) +your editor. **All submitted elm code must be formatted with `elm-format`**. Install and execute it however works best for you. We recommend having formatting the file @@ -38,7 +46,8 @@ Once you've installed Elm, install the dependencies listed in - Check the [syntax reference](http://elm-lang.org/docs/syntax) when you need a reminder of how the language works. - Read up on [how to write elm code](http://elm-lang.org/docs/style-guide). -- Watch videos from the latest [elm-conf](https://www.youtube.com/channel/UCOpGiN9AkczVjlpGDaBwQrQ) +- Watch videos from the + latest [elm-conf](https://www.youtube.com/channel/UCOpGiN9AkczVjlpGDaBwQrQ) - Learn how to use the debugger! Elm comes packaged with an excellent [debugger](http://elm-lang.org/blog/the-perfect-bug-report). We've found this tool to be invaluable in understanding how the app is working as we're @@ -48,13 +57,18 @@ Once you've installed Elm, install the dependencies listed in At the top level of this repo, follow the HA AlertManager instructions. Compile the binary, then run with `goreman`. Add example alerts with the file provided -in the HA example folder. +in the HA example folder. Then start the development server: ``` # cd ui/app -# elm-reactor -p +# make dev-server ``` Your app should be available at `http://localhost:`. Navigate to `src/Main.elm`. Any changes to the file system are detected automatically, triggering a recompile of the project. + +## Commiting changes + +Before you commit changes, please run `make build-all` on the root level +Makefile. Please include `ui/bindata.go` in your commit. diff --git a/ui/app/Makefile b/ui/app/Makefile index cd208478..ca8e45e3 100644 --- a/ui/app/Makefile +++ b/ui/app/Makefile @@ -1,15 +1,37 @@ ELM_FILES := $(shell find src -iname *.elm) -format: $(ELM_FILES) - elm-format --yes $? +DOCKER_IMG :=elm-env +DOCKER_CMD := docker run --rm -t -v $(PWD):/app -w /app $(DOCKER_IMG) +TEMPFILE := $(shell mktemp ./elm-XXXXXXXXXX.js) -test: - elm-test +ifeq ($(NO_DOCKER), true) + DOCKER_CMD= +endif + +all: test script.js + +elm-env: + @(if [ "$(NO_DOCKER)" != "true" ] ; then \ + echo ">> building elm-env docker image"; \ + docker build -t $(DOCKER_IMG) ../. > /dev/null; \ + fi; ) + +format: elm-env $(ELM_FILES) + @echo ">> format front-end code" + @$(DOCKER_CMD) elm-format --yes $(ELM_FILES) + +test: elm-env + @$(DOCKER_CMD) elm-format $(ELM_FILES) --validate + @$(DOCKER_CMD) elm-test dev-server: elm-reactor -TEMPFILE := $(shell mktemp /tmp/elm-XXXXXXXXXX.js) -script.js: $(ELM_FILES) - elm make src/Main.elm --yes --output $(TEMPFILE) - uglifyjs $(TEMPFILE) --compress unused --mangle --output $(@) - rm $(TEMPFILE) +script.js: elm-env format $(ELM_FILES) + @echo ">> building script.js" + @$(DOCKER_CMD) elm make src/Main.elm --yes --output $(TEMPFILE) + @$(DOCKER_CMD) uglifyjs $(TEMPFILE) --compress unused --mangle --output $(@) + @rm $(TEMPFILE) + +clean: + - @rm script.js + - @docker rmi $(DOCKER_IMG)