Phoenix.LiveView dependencies using Webpack 5

.github__worflows__ci.yml

name: Continious integration

on:
  push:
    branches: [ main ]
  pull_request:
    branches: [ "**" ]

jobs:
  ci:
    name: Install deps, run linters, checks and tests
    runs-on: ubuntu-latest

    strategy:
      matrix:
        otp: [23.2]
        elixir: [1.11]
        node: [14.16]

    env:
      MIX_ENV: test
      DATABASE_URL: postgres://foo:continuous@localhost/foo_test

    services:
      db:
        image: postgres:12
        env:
          POSTGRES_DB: foo_test
          POSTGRES_USER: foo
          POSTGRES_PASSWORD: continuous
        ports: ["5432:5432"]
        options: --health-cmd pg_isready --health-interval 10s --health-timeout 5s --health-retries 5

    steps:
    - uses: actions/checkout@v2

    - name: Set up Elixir
      uses: erlef/setup-elixir@v1
      with:
        otp-version: ${{ matrix.otp }}
        elixir-version: ${{ matrix.elixir }}

    - name: Restore dependencies cache
      uses: actions/cache@v2
      id: mix-cache
      with:
        path: |
          deps
          _build
          priv/plts
        key: ${{ runner.os }}-${{ matrix.otp }}-${{ matrix.elixir }}-mix-$-${{ hashFiles('mix.lock') }}

    - name: Set up NodeJS
      uses: actions/setup-node@v1
      with:
        node-version: ${{ matrix.node }}

    - name: Restore npm cache
      uses: actions/cache@v2
      id: npm-cache
      with:
        path: ~/.npm
        key: ${{ runner.os }}-${{ matrix.node }}-npm-${{ hashFiles('assets/package-lock.json') }}

    - name: Install dependencies
      run: make dependencies

    - name: Run linters
      run: make lint

    - name: Run checks
      run: make check

    - name: Run static analysis
      run: make static-analysis

    - name: Setup environment variables
      uses: c-py/action-dotenv-to-setenv@v2
      with:
        env-file: .env.test

    - name: Run tests
      run: make coverage

assets__package.json

{
  "name": "foo",
  "version": "0.1.0",
  "private": true,
  "engine-strict": true,
  "engines": {
    "node": "^14.15",
    "npm": "^6.14"
  },
  "scripts": {
    "deploy": "NODE_ENV=production webpack --mode production",
    "watch": "webpack --mode development --watch --watch-options-stdin --color"
  },
  "dependencies": {
    "@tailwindcss/forms": "^0.3.2",
    "alpinejs": "^2.8.2",
    "phoenix": "github:phoenixframework/phoenix#v1.5.9",
    "phoenix_html": "github:phoenixframework/phoenix_html#v2.14.3",
    "phoenix_live_view": "github:phoenixframework/phoenix_live_view#v0.15.5",
    "topbar": "^1.0.1"
  },
  "devDependencies": {
    "@babel/core": "^7.14.0",
    "@babel/eslint-parser": "^7.13.14",
    "@babel/preset-env": "^7.14.1",
    "autoprefixer": "^10.2.5",
    "babel-loader": "^8.2.2",
    "copy-webpack-plugin": "^8.1.1",
    "css-loader": "^5.2.4",
    "css-minimizer-webpack-plugin": "^2.0.0",
    "eslint": "^7.26.0",
    "mini-css-extract-plugin": "^1.6.0",
    "postcss": "^8.2.14",
    "postcss-import": "^14.0.2",
    "postcss-loader": "^5.2.0",
    "prettier": "^2.3.0",
    "stylelint": "^13.13.1",
    "stylelint-order": "^4.1.0",
    "svgo": "^2.3.0",
    "tailwindcss": "^2.1.2",
    "webpack": "^5.37.0",
    "webpack-cli": "^4.7.0"
  }
}

mix.exs

defmodule Foo.MixProject do
  use Mix.Project

  def project do
    [
      app: :foo,
      version: "0.1.0",
      elixir: "~> 1.11",
      elixirc_paths: elixirc_paths(Mix.env()),
      test_coverage: [tool: ExCoveralls],
      compilers: [:phoenix, :gettext] ++ Mix.compilers(),
      start_permanent: Mix.env() == :prod,
      aliases: aliases(),
      deps: deps(),
      dialyzer: dialyzer(),
      releases: releases()
    ]
  end

  # Configuration for the OTP application.
  #
  # Type `mix help compile.app` for more information.
  def application do
    [
      mod: {Foo.Application, []},
      extra_applications: [:logger, :runtime_tools, :os_mon]
    ]
  end

  # Specifies which paths to compile per environment.
  defp elixirc_paths(:test), do: ["lib", "test/support"]
  defp elixirc_paths(_), do: ["lib"]

  defp aliases do
    [
      setup: ["deps.get", "ecto.setup", "cmd npm install --prefix assets"],
      "ecto.setup": ["ecto.create", "ecto.migrate", "run priv/repo/seeds.exs"],
      "ecto.reset": ["ecto.drop", "ecto.setup"],
      test: ["ecto.create --quiet", "ecto.migrate --quiet", "test"]
    ]
  end

  defp deps do
    [
      # HTTP
      {:plug_cowboy, "~> 2.5"},
      {:plug_canonical_host, "~> 2.0"},
      {:corsica, "~> 1.1"},

      # Database
      {:postgrex, "~> 0.15"},
      {:ecto, "~> 3.6"},
      {:ecto_sql, "~> 3.6"},

      # Phoenix
      {:phoenix, "~> 1.5.9"},
      {:phoenix_ecto, "~> 4.2"},
      {:phoenix_html, "~> 2.14.3"},
      {:phoenix_live_view, "~> 0.15.5"},
      {:phoenix_live_dashboard, "~> 0.4"},
      {:phoenix_live_reload, "~> 1.2", only: :dev},
      {:phoenix_inline_svg, "~> 1.4"},
      {:jason, "~> 1.2"},

      # Auth
      {:ueberauth, "~> 0.6"},
      {:ueberauth_microsoft, "~> 0.9"},
      {:joken, "~> 2.3"},

      # ETS based caching
      {:mentat, "~> 0.7"},

      # HTTP client
      {:finch, "~> 0.7"},

      # Date/Time
      {:tzdata, "~> 1.1"},
      {:timex, "~> 3.7"},

      # Job processing
      {:oban, "~> 2.6"},

      # Convert numbers
      {:number, "~> 1.0"},

      # HTML parser
      {:floki, "~> 0.30"},

      # I18n
      {:gettext, "~> 0.18"},

      # Monitoring
      {:telemetry_metrics, "~> 0.4"},
      {:telemetry_poller, "~> 0.4"},

      # Test
      {:excoveralls, "~> 0.14", only: :test},
      {:faker, "~> 0.16", only: :test},
      {:mox, "~> 1.0"},
      {:mock, "~> 0.3"},

      # Linting
      {:credo, "~> 1.5", only: [:dev, :test], override: true},

      # Dialyzer
      {:dialyxir, "~> 1.1", only: [:dev, :test], runtime: false},

      # Security checks
      {:sobelow, "~> 0.11", only: [:dev, :test], runtime: true},
      {:mix_audit, "~> 0.1", only: [:dev, :test], runtime: false},

      # Health
      {:plug_checkup, "~> 0.6"},

      # Diagnostic tools
      {:recon, "~> 2.5"},
      {:observer_cli, "~> 1.6"}
    ]
  end

  defp dialyzer do
    [
      plt_ignore_apps: [:excoveralls, :credo, :sobelow, :mix_audit, :recon, :observer_cli],
      plt_file: {:no_warn, "priv/plts/foo.plt"}
    ]
  end

  defp releases do
    [
      foo: [
        version: {:from_app, :foo},
        applications: [foo: :permanent],
        include_executables_for: [:unix],
        steps: [:assemble, :tar]
      ]
    ]
  end
end