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.
This commit is contained in:
Max Leonard Inden
parent
16232ce654
commit
b3f3ecf803
16
.travis.yml
16
.travis.yml
|
|
@ -7,15 +7,11 @@ services:
|
|||
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
|
||||
|
|
|
|||
23
Makefile
23
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
|
||||
|
|
|
|||
|
|
@ -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 <port>
|
||||
# make dev-server
|
||||
```
|
||||
|
||||
Your app should be available at `http://localhost:<port>`. 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.
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
|
|
|
|||
Loading…
Reference in New Issue