Started moving to Phoenix LiveView, introduced services and more

Author: Tim203

.editorconfig

@@ -1,3 +1,8 @@
 [*]
 charset = utf-8
-end_of_line = lf
+end_of_line = lf
+
+[*.{heex,css}]
+indent_size = 2
+indent_style = space
+tab_width = 2

.gitignore

@@ -10,9 +10,6 @@
 # Where 3rd-party dependencies like ExDoc output generated docs.
 /doc/
 
-# Ignore configs so we can change them locally
-/config/
-
 # Ignore .fetch files in case you like to edit your project deps locally.
 /.fetch
 
@@ -25,18 +22,24 @@ erl_crash.dump
 # Ignore package tarball (built via "mix hex.build").
 global_api-*.tar
 
-# Since we are building assets from assets/,
-# we ignore priv/static. You may want to comment
-# this depending on your deployment strategy.
-/priv/static/
+# Ignore assets that are produced by build tools.
+/priv/static/assets/
+
+# Ignore digested assets cache.
+/priv/static/cache_manifest.json
 
+# In case you use Node.js/npm, you want to ignore these.
+npm-debug.log
+/assets/node_modules/
 
+# Ignore configs so we can change them locally
+/config/
+
+# IntelliJ / VSCode stuff
 /.idea/
 *.iml
 .elixir_ls
 
-**/node_modules/**
-
 native/**/target/**
 priv/native/**
 

Dockerfile

@@ -1,15 +1,15 @@
-FROM elixir:1.12.2 as build
+FROM elixir:1.13.4-otp-25 AS build
+
+ARG MIX_ENV
 
-# prepare build dir
 WORKDIR /app
 
-ENV NODE_VERSION=16 \
+ENV NODE_VERSION=18 \
     RUSTUP_HOME=/usr/local/rustup \
     CARGO_HOME=/usr/local/cargo \
     PATH=/usr/local/cargo/bin:$PATH \
-    RUST_VERSION=1.50.0
+    RUST_VERSION=1.63.0
 
-# install nodejs and rust
 RUN curl -sL https://deb.nodesource.com/setup_$NODE_VERSION.x | bash - && \
   apt-get install -y nodejs
 
@@ -22,44 +22,24 @@ RUN chmod -R a+w $RUSTUP_HOME $CARGO_HOME
 RUN mix local.hex --force && \
   mix local.rebar --force
 
-ENV MIX_ENV=prod
+ENV MIX_ENV=${MIX_ENV:-prod}
 
-# download and build mix dependencies
 COPY mix.exs mix.lock ./
-COPY config config
-COPY native native
-RUN mix do deps.get --only $MIX_ENV, deps.compile
-
-#
-# todo make sure that we don't override the config files, because we also don't want to upload the secrets to github
-#
-
-# install node dependencies
 COPY assets/package.json assets/package-lock.json ./assets/
-RUN npm --prefix ./assets ci --progress=false --no-audit --loglevel=error
-
-# copy our code so that it can be used for building our assets
-COPY lib lib
-
-# build assets
-COPY priv priv
-COPY assets assets
-RUN npm run --prefix ./assets deploy
-RUN mix phx.digest
-
-# build release
-COPY rel rel
-RUN mix distillery.release
-
-FROM scratch as app
+RUN mix deps_and_assets.get
 
 ARG APP_NAME \
     APP_VSN
 
 WORKDIR /app
 
-COPY mix.exs ./
+COPY config native lib priv assets ./
+
+RUN mix assets.deploy
+
+COPY rel rel
+RUN mix distillery.release
 
-COPY --from=build /app/_build/prod/rel/$APP_NAME/releases/$APP_VSN/$APP_NAME.tar.gz ./$APP_NAME-$APP_VSN.tar.gz
+COPY --from=base /app/_build/prod/rel/${APP_NAME}/releases/${APP_VSN}/${APP_NAME}.tar.gz ./${APP_NAME}-${APP_VSN}.tar.gz
 
 CMD ["/bin/bash"]

assets/css/main.css assets/css/app.css

@@ -1,16 +1,16 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss/base";
+@import "tailwindcss/components";
+@import "tailwindcss/utilities";
 
 @layer utilities {
   .render-pixelated {
     image-rendering: pixelated;
     image-rendering: -moz-crisp-edges;
   }
 }
-
+  
 @font-face {
-  font-family: 'Inter';
+  font-family: 'Inter var';
   font-weight: 100 900;
   src: url('../font/Inter.var.woff2') format('woff2-variations');
 }

assets/js/app.js

@@ -0,0 +1,44 @@
+// We import the CSS which is extracted to its own file by esbuild.
+// Remove this line if you add a your own CSS build pipeline (e.g postcss).
+// import "../css/app.css"
+
+// If you want to use Phoenix channels, run `mix help phx.gen.channel`
+// to get started and then uncomment the line below.
+// import "./user_socket.js"
+
+// You can include dependencies in two ways.
+//
+// The simplest option is to put them in assets/vendor and
+// import them using relative paths:
+//
+//     import "../vendor/some-package.js"
+//
+// Alternatively, you can `npm install some-package --prefix assets` and import
+// them using a path starting with the package name:
+//
+//     import "some-package"
+//
+
+// Include phoenix_html to handle method=PUT/DELETE in forms and buttons.
+import "phoenix_html"
+// Establish Phoenix Socket and LiveView configuration.
+import {Socket} from "phoenix"
+import {LiveSocket} from "phoenix_live_view"
+import topbar from "../vendor/topbar"
+
+let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content")
+let liveSocket = new LiveSocket("/live", Socket, {params: {_csrf_token: csrfToken}})
+
+// Show progress bar on live navigation and form submits
+topbar.config({barColors: {0: "#29d"}, shadowColor: "rgba(0, 0, 0, .3)"})
+window.addEventListener("phx:page-loading-start", info => topbar.show())
+window.addEventListener("phx:page-loading-stop", info => topbar.hide())
+
+// connect if there are any LiveViews on the page
+liveSocket.connect()
+
+// expose liveSocket on window for web console debug logs and latency simulation:
+// >> liveSocket.enableDebug()
+// >> liveSocket.enableLatencySim(1000)  // enabled for duration of browser session
+// >> liveSocket.disableLatencySim()
+window.liveSocket = liveSocket