Update Elixir and Phoenix and all deps

.dialyzer_ignore.exs

@@ -1 +1,5 @@
-[]
+[
+  {"lib/phoenix_starter/workers/reportable.ex", :extra_range, 30},
+  {"lib/phoenix_starter/workers/error_reporter.ex", :guard_fail, 19},
+  {"lib/phoenix_starter_web/controllers/user_registration_controller.ex", :pattern_match, 16}
+]

.dockerignore

@@ -1,11 +1,18 @@
-_build/
-.git/
+*.ez
+.*
 .elixir_ls/
+.git/
+/priv/static/assets/
+/priv/static/cache_manifest.json
+Dockerfile
+README.md
+_build/
 assets/node_modules/
+cover/
 deps/
 doc/
+erl_crash.dump
 priv/static
-test
-README.md
-Dockerfile
-.*
+test/
+tmp/
+

.formatter.exs

@@ -1,5 +1,6 @@
 [
   import_deps: [:ecto, :phoenix],
-  inputs: ["*.{ex,exs}", "priv/*/seeds.exs", "{config,lib,test}/**/*.{ex,exs}"],
-  subdirectories: ["priv/*/migrations"]
+  inputs: ["*.{heex,ex,exs}", "priv/*/seeds.exs", "{config,lib,test}/**/*.{heex,ex,exs}"],
+  subdirectories: ["priv/*/migrations"],
+  plugins: [Phoenix.LiveView.HTMLFormatter]
 ]

.github/workflows/ci.yml

@@ -18,8 +18,8 @@ jobs:
 
     strategy:
       matrix:
-        elixir: ["1.13.2"]
-        otp: ["24.2.1"]
+        elixir: ["1.13.4"]
+        otp: ["25.0.3"]
 
     steps:
       - uses: actions/checkout@v2
@@ -55,9 +55,9 @@ jobs:
 
     strategy:
       matrix:
-        elixir: ["1.13.2"]
-        otp: ["24.2.1"]
-        node: ["14.13.1"]
+        elixir: ["1.13.4"]
+        otp: ["25.0.3"]
+        node: ["18.7.0"]
 
     steps:
       - uses: actions/checkout@v2
@@ -82,16 +82,7 @@ jobs:
 
       - name: Install Node dependencies
         run: npm --prefix assets ci
-      - run: npx prettier --check .
-        working-directory: ./assets
-      - run: npx stylelint "css/*"
-        working-directory: ./assets
-      - run: npx eslint js --ext .js,.jsx,.ts,.tsx
-        working-directory: ./assets
-      - run: npm run deploy
-        env:
-          NODE_ENV: production
-        working-directory: ./assets
+      - run: npm --prefix assets run ci
 
   lint:
     name: Lint
@@ -102,8 +93,8 @@ jobs:
 
     strategy:
       matrix:
-        elixir: ["1.13.2"]
-        otp: ["24.2.1"]
+        elixir: ["1.13.4"]
+        otp: ["25.0.3"]
 
     steps:
       - uses: actions/checkout@v2
@@ -141,8 +132,8 @@ jobs:
 
     strategy:
       matrix:
-        elixir: ["1.13.2"]
-        otp: ["24.2.1"]
+        elixir: ["1.13.4"]
+        otp: ["25.0.3"]
 
     steps:
       - uses: actions/checkout@v2
@@ -174,9 +165,7 @@ jobs:
 
       - name: Create PLTs
         if: steps.plt-cache.outputs.cache-hit != 'true'
-        run: |
-          mkdir -p priv/plts
-          mix dialyzer --plt
+        run: mix dialyzer --plt
 
       - run: mix dialyzer --no-check --format github
 
@@ -190,8 +179,8 @@ jobs:
 
     strategy:
       matrix:
-        elixir: ["1.13.2"]
-        otp: ["24.2.1"]
+        elixir: ["1.13.4"]
+        otp: ["25.0.3"]
 
     services:
       db:

.gitignore

@@ -22,17 +22,18 @@ erl_crash.dump
 # Ignore package tarball (built via "mix hex.build").
 phoenix_starter-*.tar
 
+# Ignore assets that are produced by build tools.
+/priv/static/assets/
+
+# Ignore digested assets cache.
+/priv/static/cache_manifest.json
+
 # If NPM crashes, it generates a log, let's ignore it too.
 npm-debug.log
 
 # The directory NPM downloads your dependencies sources to.
 /assets/node_modules/
 
-# 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 Dialyzer PLTs
 /priv/plts/*.plt
 /priv/plts/*.plt.hash

.tool-versions

@@ -1,3 +1,3 @@
-erlang 24.2.1
-elixir 1.13.2-otp-24
-nodejs 16.13.2
+erlang 25.0.3
+elixir 1.13.4-otp-25
+nodejs 18.7.0

Dockerfile

@@ -23,9 +23,11 @@ ENV MIX_ENV=prod
 
 WORKDIR /opt/app
 
-COPY config config
-COPY mix.* ./
-RUN mix do deps.get --only=$MIX_ENV, deps.compile
+COPY mix.exs mix.lock ./
+RUN mix deps.get --only=$MIX_ENV
+
+COPY config/config.exs config/${MIX_ENV}.exs config/
+RUN mix deps.compile
 
 # Assets builder
 # ---------------
@@ -52,8 +54,15 @@ WORKDIR /opt/app
 COPY --from=assets-build /opt/app/priv/static priv/static
 RUN mix phx.digest
 
-COPY . .
-RUN mix do compile, deps.compile sentry --force, release --quiet
+COPY priv priv
+COPY lib lib
+
+RUN mix do compile, deps.compile sentry --force
+
+COPY config/runtime.exs config/
+COPY rel rel
+
+RUN mix release
 
 # App final
 # ---------
@@ -70,8 +79,7 @@ RUN apk --no-cache --update add \
 
 WORKDIR /opt/app
 
-COPY --from=release /opt/app/_build/prod/rel/phoenix_starter ./
-RUN chown -R nobody: /opt/app
+COPY --from=release --chown=nobody: /opt/app/_build/prod/rel/phoenix_starter ./
 USER nobody
 
 EXPOSE ${PORT}

assets/.eslintignore

@@ -0,0 +1,3 @@
+.eslintrc.js
+postcss.config.js
+tailwind.config.js

assets/.stylelintrc.js

@@ -5,7 +5,7 @@ module.exports = {
     "at-rule-no-unknown": [
       true,
       {
-        ignoreAtRules: ["define-mixin", "mixin", "layer"],
+        ignoreAtRules: ["apply", "define-mixin", "mixin", "layer"],
       },
     ],
     "declaration-colon-newline-after": "always-multi-line",

assets/js/app.ts

@@ -1,19 +1,10 @@
-// We need to import the CSS so that webpack will load it.
-// The MiniCssExtractPlugin is used to separate it out into
-// its own CSS file.
-import "../css/app.css"
-
-// webpack automatically bundles all modules in your
-// entry points. Those entry points can be configured
-// in "webpack.config.js".
-//
 // Import deps with the dep name or local files with a relative path, for example:
 //
 //     import {Socket} from "phoenix"
 //     import socket from "./socket"
 //
 import "phoenix_html"
-import "alpinejs"
+import Alpine from "alpinejs"
 import { Socket } from "phoenix"
 import NProgress from "nprogress"
 import { LiveSocket } from "phoenix_live_view"
@@ -32,19 +23,22 @@ interface Alpine {
 
 interface AlpineHTMLElement {
   __x?: unknown
+  _x_dataStack?: unknown
 }
 
+// Initialize Alpine
+window.Alpine = Alpine
+Alpine.start()
+
 const csrfTokenTag = document.querySelector("meta[name='csrf-token']")
 const csrfToken = csrfTokenTag ? csrfTokenTag.getAttribute("content") : ""
 const liveSocket = new LiveSocket("/live", Socket, {
   dom: {
     onBeforeElUpdated(from, to) {
-      if ((from as AlpineHTMLElement).__x) {
-        window.Alpine.clone((from as AlpineHTMLElement).__x, to)
-        return false
+      if ((from as AlpineHTMLElement)._x_dataStack) {
+        window.Alpine.clone(from, to)
       }
-
-      return false
+      return true
     },
   },
   params: { _csrf_token: csrfToken },