Beautiful Web Design in Elixir/Phoenix

Questions / Help
2

Phoenix by and large is agnostic to the front end technology being used.

It just happens that the default project setup uses EEx server side templating with the milligram CSS framework and uses webpack as a bundler to support modular JavaScript. Ultimately it is your responsibility to choose the front end technology that you want to use and understand its concepts to the extent that you can integrate it with Phoenix - there aren’t that many integration points‡.

Most neophytes struggle with the concept of bundling, some thoughts here:

But when it comes down to it you don’t even need to use a bundler, Phoenix can support “old school” practices, see:

‡ Integration points:

  1. How Phoenix launches an asset build is configured in app/config/dev.exs under :watch:
  watchers: [
    node: [
      "node_modules/webpack/bin/webpack.js",
      "--mode",
      "development",
      "--watch-stdin",
      cd: Path.expand("../assets", __DIR__)
    ]
  ]
  1. The files Phoenix watches to reload into the browser during development are configured in app/config/dev.exs under :live_reload:
# Watch static and templates for browser reloading.
config :hello, HelloWeb.Endpoint,
  live_reload: [
    patterns: [
      ~r{priv/static/.*(js|css|png|jpeg|jpg|gif|svg)$},
      ~r{priv/gettext/.*(po)$},
      ~r{lib/app_web/views/.*(ex)$},
      ~r{lib/app_web/templates/.*(eex)$}
    ]
  ]
4 Likes