diff --git a/README.md b/README.md
index e057e4c..c3bb5c4 100644
--- a/README.md
+++ b/README.md
@@ -1,35 +1,59 @@
-# Membrane Template Plugin
+# Membrane WebRTC Live
-[](https://hex.pm/packages/membrane_template_plugin)
-[](https://hexdocs.pm/membrane_template_plugin)
-[](https://circleci.com/gh/membraneframework/membrane_template_plugin)
+[](https://hex.pm/packages/membrane_webrtc_live)
+[](https://hexdocs.pm/membrane_webrtc_live)
+[](https://circleci.com/gh/membraneframework/membrane_webrtc_live)
-This repository contains a template for new plugins.
-
-Check out different branches for other flavors of this template.
+Phoenix LiveViews that can be used with Membrane Components from [membrane_webrtc_plugin](https://github.com/membraneframework/membrane_webrtc_plugin).
It's a part of the [Membrane Framework](https://membrane.stream).
## Installation
-The package can be installed by adding `membrane_template_plugin` to your list of dependencies in `mix.exs`:
+The package can be installed by adding `membrane_webrtc_live` to your list of dependencies in `mix.exs`:
```elixir
def deps do
[
- {:membrane_template_plugin, "~> 0.1.0"}
+ {:membrane_webrtc_live, "~> 0.1.0"}
]
end
```
-## Usage
+## Modules
+
+`Membrane.WebRTC.Live` comes with two `Phoenix.LiveView`s:
+ - `Membrane.WebRTC.Live.Capture` - exchanges WebRTC signaling messages between `Membrane.WebRTC.Source` and the browser. It expects the same `Membrane.WebRTC.Signaling` that has been passed to the related `Membrane.WebRTC.Source`. As a result, `Membrane.Webrtc.Source` will return the media stream captured from the browser, where `Membrane.WebRTC.Live.Capture` has been rendered.
+ - `Membrane.WebRTC.Live.Player` - exchanges WebRTC signaling messages between `Membrane.WebRTC.Sink` and the browser. It expects the same `Membrane.WebRTC.Signaling` that has been passed to the related `Membrane.WebRTC.Sink`. As a result, `Membrane.WebRTC.Live.Player` will play media streams passed to the related `Membrane.WebRTC.Sink`. Currently supports up to one video stream and up to one audio stream.
+
+## Usage
+
+To use `Phoenix.LiveView`s from this repository, you have to use related JS hooks. To do so, add the following code snippet to `assets/js/app.js`
+
+```js
+import { createCaptureHook, createPlayerHook } from "membrane_webrtc_live";
+
+let Hooks = {};
+const iceServers = [{ urls: "stun:stun.l.google.com:19302" }];
+Hooks.Capture = createCaptureHook(iceServers);
+Hooks.Player = createPlayerHook(iceServers);
+```
+
+and add `Hooks` to the WebSocket constructor. It can be done in a following way:
+
+```js
+new LiveSocket("/live", Socket, {
+ params: SomeParams,
+ hooks: Hooks,
+});
+```
-TODO
+To see the full usage example, you can go to `example_project/` directory in this repository (take a look especially at `example_project/assets/js/app.js` and `example_project/lib/example_project_web/live_views/echo.ex`).
## Copyright and License
-Copyright 2020, [Software Mansion](https://swmansion.com/?utm_source=git&utm_medium=readme&utm_campaign=membrane_template_plugin)
+Copyright 2025, [Software Mansion](https://swmansion.com/?utm_source=git&utm_medium=readme&utm_campaign=membrane_webrtc_live)
-[](https://swmansion.com/?utm_source=git&utm_medium=readme&utm_campaign=membrane_template_plugin)
+[](https://swmansion.com/?utm_source=git&utm_medium=readme&utm_campaign=membrane_webrtc_live)
Licensed under the [Apache License, Version 2.0](LICENSE)
diff --git a/assets/capture.js b/assets/capture.js
new file mode 100644
index 0000000..664bde2
--- /dev/null
+++ b/assets/capture.js
@@ -0,0 +1,57 @@
+export function createCaptureHook(iceServers = [{ urls: "stun:stun.l.google.com:19302" }]) {
+ return {
+ async mounted() {
+ this.handleEvent("media_constraints-" + this.el.id, async (mediaConstraints) => {
+ console.log("[" + this.el.id + "] Received media constraints:", mediaConstraints);
+
+ const localStream = await navigator.mediaDevices.getUserMedia(mediaConstraints);
+ const pcConfig = { iceServers: iceServers };
+ this.pc = new RTCPeerConnection(pcConfig);
+
+ this.pc.onicecandidate = (event) => {
+ if (event.candidate === null) return;
+ console.log("[" + this.el.id + "] Sent ICE candidate:", event.candidate);
+ message = { type: "ice_candidate", data: event.candidate };
+ this.pushEventTo(this.el, "webrtc_signaling", message);
+ };
+
+ this.pc.onconnectionstatechange = () => {
+ console.log(
+ "[" + this.el.id + "] RTCPeerConnection state changed to",
+ this.pc.connectionState
+ );
+ };
+
+ this.el.srcObject = new MediaStream();
+
+ for (const track of localStream.getTracks()) {
+ this.pc.addTrack(track, localStream);
+ this.el.srcObject.addTrack(track);
+ }
+
+ this.el.play();
+
+ this.handleEvent("webrtc_signaling-" + this.el.id, async (event) => {
+ const { type, data } = event;
+
+ switch (type) {
+ case "sdp_answer":
+ console.log("[" + this.el.id + "] Received SDP answer:", data);
+ await this.pc.setRemoteDescription(data);
+ break;
+ case "ice_candidate":
+ console.log("[" + this.el.id + "] Recieved ICE candidate:", data);
+ await this.pc.addIceCandidate(data);
+ break;
+ }
+ });
+
+ const offer = await this.pc.createOffer();
+ await this.pc.setLocalDescription(offer);
+ console.log("[" + this.el.id + "] Sent SDP offer:", offer);
+ message = { type: "sdp_offer", data: offer };
+ this.pushEventTo(this.el, "webrtc_signaling", message);
+ });
+ },
+ };
+}
diff --git a/assets/index.js b/assets/index.js
new file mode 100644
index 0000000..70eb23c
--- /dev/null
+++ b/assets/index.js
@@ -0,0 +1,4 @@
+import { createCaptureHook } from "./capture.js";
+import { createPlayerHook } from "./player.js";
+
+export { createCaptureHook, createPlayerHook };
diff --git a/assets/player.js b/assets/player.js
new file mode 100644
index 0000000..7a9e769
--- /dev/null
+++ b/assets/player.js
@@ -0,0 +1,41 @@
+export function createPlayerHook(iceServers = [{ urls: "stun:stun.l.google.com:19302" }]) {
+ return {
+ async mounted() {
+ this.pc = new RTCPeerConnection({ iceServers: iceServers });
+ this.el.srcObject = new MediaStream();
+
+ this.pc.ontrack = (event) => {
+ this.el.srcObject.addTrack(event.track);
+ };
+
+ this.pc.onicecandidate = (ev) => {
+ console.log("[" + this.el.id + "] Sent ICE candidate:", ev.candidate);
+ message = { type: "ice_candidate", data: ev.candidate };
+ this.pushEventTo(this.el, "webrtc_signaling", message);
+ };
+
+ const eventName = "webrtc_signaling-" + this.el.id;
+ this.handleEvent(eventName, async (event) => {
+ const { type, data } = event;
+
+ switch (type) {
+ case "sdp_offer":
+ console.log("[" + this.el.id + "] Received SDP offer:", data);
+ await this.pc.setRemoteDescription(data);
+
+ const answer = await this.pc.createAnswer();
+ await this.pc.setLocalDescription(answer);
+
+ message = { type: "sdp_answer", data: answer };
+ this.pushEventTo(this.el, "webrtc_signaling", message);
+ console.log("[" + this.el.id + "] Sent SDP answer:", answer);
+
+ break;
+ case "ice_candidate":
+ console.log("[" + this.el.id + "] Recieved ICE candidate:", data);
+ await this.pc.addIceCandidate(data);
+ }
+ });
+ },
+ };
+}
diff --git a/example_project/.formatter.exs b/example_project/.formatter.exs
new file mode 100644
index 0000000..e945e12
--- /dev/null
+++ b/example_project/.formatter.exs
@@ -0,0 +1,5 @@
+[
+ import_deps: [:phoenix],
+ plugins: [Phoenix.LiveView.HTMLFormatter],
+ inputs: ["*.{heex,ex,exs}", "{config,lib,test}/**/*.{heex,ex,exs}"]
+]
diff --git a/example_project/.gitignore b/example_project/.gitignore
new file mode 100644
index 0000000..d039d2b
--- /dev/null
+++ b/example_project/.gitignore
@@ -0,0 +1,37 @@
+# The directory Mix will write compiled artifacts to.
+/_build/
+
+# If you run "mix test --cover", coverage assets end up here.
+/cover/
+
+# The directory Mix downloads your dependencies sources to.
+/deps/
+
+# Where 3rd-party dependencies like ExDoc output generated docs.
+/doc/
+
+# Ignore .fetch files in case you like to edit your project deps locally.
+/.fetch
+
+# If the VM crashes, it generates a dump, let's ignore it too.
+erl_crash.dump
+
+# Also ignore archive artifacts (built via "mix archive.build").
+*.ez
+
+# Temporary files, for example, from tests.
+/tmp/
+
+# Ignore package tarball (built via "mix hex.build").
+example_project-*.tar
+
+# 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/
+
diff --git a/example_project/README.md b/example_project/README.md
new file mode 100644
index 0000000..e8d516a
--- /dev/null
+++ b/example_project/README.md
@@ -0,0 +1,23 @@
+# Example Project
+
+Example project showing how `Membrane.WebRTC.Live.Capture` and `Membrane.WebRTC.Live.Player` can be used.
+
+It contains a simple demo, where:
+ - the video stream is get from the browser and sent via WebRTC to Elixir server using `Membrane.WebRTC.Live.Capture`
+ - then, this same video stream is re-sent again to the browser and displayed using `Membrane.WebRTC.Live.Player`.
+
+This demo uses also [Boombox](https://hex.pm/packages/boombox).
+
+The most important file in the project is `example_project/lib/example_project_web/live_views/echo.ex`, that
+contains the usage of `Boombox` and LiveViews defined in `membrane_webrtc_live`.
+
+You can also take a look at `example_project/assets/js/app.js` to see how you can use `membrane_webrtc_live` JS hooks.
+
+## Run server
+
+To start Phoenix server:
+
+ * Run `mix setup` to install and setup dependencies
+ * Start Phoenix endpoint with `mix phx.server` or inside IEx with `iex -S mix phx.server`
+
+Now you can visit [`localhost:4000`](http://localhost:4000) from your browser.
diff --git a/example_project/assets/js/app.js b/example_project/assets/js/app.js
new file mode 100644
index 0000000..dc38d9a
--- /dev/null
+++ b/example_project/assets/js/app.js
@@ -0,0 +1,51 @@
+// 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";
+
+import { createCaptureHook, createPlayerHook } from "membrane_webrtc_live";
+
+let Hooks = {};
+const iceServers = [{ urls: "stun:stun.l.google.com:19302" }];
+Hooks.Capture = createCaptureHook(iceServers);
+Hooks.Player = createPlayerHook(iceServers);
+
+let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content");
+let liveSocket = new LiveSocket("/live", Socket, {
+ longPollFallbackMs: 2500,
+ params: { _csrf_token: csrfToken },
+ hooks: Hooks,
+});
+
+// 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(300));
+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;
diff --git a/example_project/assets/vendor/topbar.js b/example_project/assets/vendor/topbar.js
new file mode 100644
index 0000000..4e2445f
--- /dev/null
+++ b/example_project/assets/vendor/topbar.js
@@ -0,0 +1,155 @@
+/**
+ * @license MIT
+ * topbar 2.0.0, 2023-02-04
+ * https://buunguyen.github.io/topbar
+ * Copyright (c) 2021 Buu Nguyen
+ */
+(function (window, document) {
+ "use strict";
+
+ // https://gist.github.com/paulirish/1579671
+ (function () {
+ var lastTime = 0;
+ var vendors = ["ms", "moz", "webkit", "o"];
+ for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
+ window.requestAnimationFrame = window[vendors[x] + "RequestAnimationFrame"];
+ window.cancelAnimationFrame =
+ window[vendors[x] + "CancelAnimationFrame"] ||
+ window[vendors[x] + "CancelRequestAnimationFrame"];
+ }
+ if (!window.requestAnimationFrame)
+ window.requestAnimationFrame = function (callback, element) {
+ var currTime = new Date().getTime();
+ var timeToCall = Math.max(0, 16 - (currTime - lastTime));
+ var id = window.setTimeout(function () {
+ callback(currTime + timeToCall);
+ }, timeToCall);
+ lastTime = currTime + timeToCall;
+ return id;
+ };
+ if (!window.cancelAnimationFrame)
+ window.cancelAnimationFrame = function (id) {
+ clearTimeout(id);
+ };
+ })();
+
+ var canvas,
+ currentProgress,
+ showing,
+ progressTimerId = null,
+ fadeTimerId = null,
+ delayTimerId = null,
+ addEvent = function (elem, type, handler) {
+ if (elem.addEventListener) elem.addEventListener(type, handler, false);
+ else if (elem.attachEvent) elem.attachEvent("on" + type, handler);
+ else elem["on" + type] = handler;
+ },
+ options = {
+ autoRun: true,
+ barThickness: 3,
+ barColors: {
+ 0: "rgba(26, 188, 156, .9)",
+ ".25": "rgba(52, 152, 219, .9)",
+ ".50": "rgba(241, 196, 15, .9)",
+ ".75": "rgba(230, 126, 34, .9)",
+ "1.0": "rgba(211, 84, 0, .9)",
+ },
+ shadowBlur: 10,
+ shadowColor: "rgba(0, 0, 0, .6)",
+ className: null,
+ },
+ repaint = function () {
+ canvas.width = window.innerWidth;
+ canvas.height = options.barThickness * 5; // need space for shadow
+
+ var ctx = canvas.getContext("2d");
+ ctx.shadowBlur = options.shadowBlur;
+ ctx.shadowColor = options.shadowColor;
+
+ var lineGradient = ctx.createLinearGradient(0, 0, canvas.width, 0);
+ for (var stop in options.barColors) lineGradient.addColorStop(stop, options.barColors[stop]);
+ ctx.lineWidth = options.barThickness;
+ ctx.beginPath();
+ ctx.moveTo(0, options.barThickness / 2);
+ ctx.lineTo(Math.ceil(currentProgress * canvas.width), options.barThickness / 2);
+ ctx.strokeStyle = lineGradient;
+ ctx.stroke();
+ },
+ createCanvas = function () {
+ canvas = document.createElement("canvas");
+ var style = canvas.style;
+ style.position = "fixed";
+ style.top = style.left = style.right = style.margin = style.padding = 0;
+ style.zIndex = 100001;
+ style.display = "none";
+ if (options.className) canvas.classList.add(options.className);
+ document.body.appendChild(canvas);
+ addEvent(window, "resize", repaint);
+ },
+ topbar = {
+ config: function (opts) {
+ for (var key in opts) if (options.hasOwnProperty(key)) options[key] = opts[key];
+ },
+ show: function (delay) {
+ if (showing) return;
+ if (delay) {
+ if (delayTimerId) return;
+ delayTimerId = setTimeout(() => topbar.show(), delay);
+ } else {
+ showing = true;
+ if (fadeTimerId !== null) window.cancelAnimationFrame(fadeTimerId);
+ if (!canvas) createCanvas();
+ canvas.style.opacity = 1;
+ canvas.style.display = "block";
+ topbar.progress(0);
+ if (options.autoRun) {
+ (function loop() {
+ progressTimerId = window.requestAnimationFrame(loop);
+ topbar.progress("+" + 0.05 * Math.pow(1 - Math.sqrt(currentProgress), 2));
+ })();
+ }
+ }
+ },
+ progress: function (to) {
+ if (typeof to === "undefined") return currentProgress;
+ if (typeof to === "string") {
+ to =
+ (to.indexOf("+") >= 0 || to.indexOf("-") >= 0 ? currentProgress : 0) + parseFloat(to);
+ }
+ currentProgress = to > 1 ? 1 : to;
+ repaint();
+ return currentProgress;
+ },
+ hide: function () {
+ clearTimeout(delayTimerId);
+ delayTimerId = null;
+ if (!showing) return;
+ showing = false;
+ if (progressTimerId != null) {
+ window.cancelAnimationFrame(progressTimerId);
+ progressTimerId = null;
+ }
+ (function loop() {
+ if (topbar.progress("+.1") >= 1) {
+ canvas.style.opacity -= 0.05;
+ if (canvas.style.opacity <= 0.05) {
+ canvas.style.display = "none";
+ fadeTimerId = null;
+ return;
+ }
+ }
+ fadeTimerId = window.requestAnimationFrame(loop);
+ })();
+ },
+ };
+
+ if (typeof module === "object" && typeof module.exports === "object") {
+ module.exports = topbar;
+ } else if (typeof define === "function" && define.amd) {
+ define(function () {
+ return topbar;
+ });
+ } else {
+ this.topbar = topbar;
+ }
+}).call(this, window, document);
diff --git a/example_project/config/config.exs b/example_project/config/config.exs
new file mode 100644
index 0000000..4e81c3c
--- /dev/null
+++ b/example_project/config/config.exs
@@ -0,0 +1,45 @@
+# This file is responsible for configuring your application
+# and its dependencies with the aid of the Config module.
+#
+# This configuration file is loaded before any dependency and
+# is restricted to this project.
+
+# General application configuration
+import Config
+
+config :example_project,
+ generators: [timestamp_type: :utc_datetime]
+
+# Configures the endpoint
+config :example_project, ExampleProjectWeb.Endpoint,
+ url: [host: "localhost"],
+ adapter: Bandit.PhoenixAdapter,
+ render_errors: [
+ formats: [html: ExampleProjectWeb.ErrorHTML, json: ExampleProjectWeb.ErrorJSON],
+ layout: false
+ ],
+ pubsub_server: ExampleProject.PubSub,
+ live_view: [signing_salt: "+TWYHjZu"]
+
+# Configure esbuild (the version is required)
+config :esbuild,
+ version: "0.17.11",
+ example_project: [
+ args:
+ ~w(js/app.js --bundle --target=es2017 --outdir=../priv/static/assets --external:/fonts/* --external:/images/*),
+ cd: Path.expand("../assets", __DIR__),
+ env: %{"NODE_PATH" => Enum.map_join(["../deps", "../../.."], ":", &Path.expand(&1, __DIR__))}
+ ]
+
+# Configures Elixir's Logger
+config :logger, :console,
+ format: "$time $metadata[$level] $message\n",
+ metadata: [:request_id],
+ level: :info
+
+# Use Jason for JSON parsing in Phoenix
+config :phoenix, :json_library, Jason
+
+# Import environment specific config. This must remain at the bottom
+# of this file so it overrides the configuration defined above.
+import_config "#{config_env()}.exs"
diff --git a/example_project/config/dev.exs b/example_project/config/dev.exs
new file mode 100644
index 0000000..b323f26
--- /dev/null
+++ b/example_project/config/dev.exs
@@ -0,0 +1,71 @@
+import Config
+
+# For development, we disable any cache and enable
+# debugging and code reloading.
+#
+# The watchers configuration can be used to run external
+# watchers to your application. For example, we can use it
+# to bundle .js and .css sources.
+# Binding to loopback ipv4 address prevents access from other machines.
+config :example_project, ExampleProjectWeb.Endpoint,
+ # Change to `ip: {0, 0, 0, 0}` to allow access from other machines.
+ http: [ip: {127, 0, 0, 1}, port: 4000],
+ check_origin: false,
+ code_reloader: true,
+ debug_errors: true,
+ secret_key_base: "q5zn/L1BnrCev7xxgSkgCgilInhLIiGMGh8IjH6roOgrxsTJ7hJIvIH/IY2lHe3y",
+ watchers: [
+ esbuild: {Esbuild, :install_and_run, [:example_project, ~w(--sourcemap=inline --watch)]}
+ ]
+
+# ## SSL Support
+#
+# In order to use HTTPS in development, a self-signed
+# certificate can be generated by running the following
+# Mix task:
+#
+# mix phx.gen.cert
+#
+# Run `mix help phx.gen.cert` for more information.
+#
+# The `http:` config above can be replaced with:
+#
+# https: [
+# port: 4001,
+# cipher_suite: :strong,
+# keyfile: "priv/cert/selfsigned_key.pem",
+# certfile: "priv/cert/selfsigned.pem"
+# ],
+#
+# If desired, both `http:` and `https:` keys can be
+# configured to run both http and https servers on
+# different ports.
+
+# Watch static and templates for browser reloading.
+config :example_project, ExampleProjectWeb.Endpoint,
+ live_reload: [
+ patterns: [
+ ~r"priv/static/(?!uploads/).*(js|css|png|jpeg|jpg|gif|svg)$",
+ ~r"priv/gettext/.*(po)$",
+ ~r"lib/example_project_web/(controllers|live|components)/.*(ex|heex)$"
+ ]
+ ]
+
+# Enable dev routes for dashboard and mailbox
+config :example_project, dev_routes: true
+
+# Do not include metadata nor timestamps in development logs
+config :logger, :console, format: "[$level] $message\n"
+
+# Set a higher stacktrace during development. Avoid configuring such
+# in production as building large stacktraces may be expensive.
+config :phoenix, :stacktrace_depth, 20
+
+# Initialize plugs at runtime for faster development compilation
+config :phoenix, :plug_init_mode, :runtime
+
+config :phoenix_live_view,
+ # Include HEEx debug annotations as HTML comments in rendered markup
+ debug_heex_annotations: true,
+ # Enable helpful, but potentially expensive runtime checks
+ enable_expensive_runtime_checks: true
diff --git a/example_project/config/prod.exs b/example_project/config/prod.exs
new file mode 100644
index 0000000..8acfd85
--- /dev/null
+++ b/example_project/config/prod.exs
@@ -0,0 +1,15 @@
+import Config
+
+# Note we also include the path to a cache manifest
+# containing the digested version of static files. This
+# manifest is generated by the `mix assets.deploy` task,
+# which you should run after static files are built and
+# before starting your production server.
+config :example_project, ExampleProjectWeb.Endpoint,
+ cache_static_manifest: "priv/static/cache_manifest.json"
+
+# Do not print debug messages in production
+config :logger, level: :info
+
+# Runtime production configuration, including reading
+# of environment variables, is done on config/runtime.exs.
diff --git a/example_project/config/runtime.exs b/example_project/config/runtime.exs
new file mode 100644
index 0000000..07c04f3
--- /dev/null
+++ b/example_project/config/runtime.exs
@@ -0,0 +1,84 @@
+import Config
+
+# config/runtime.exs is executed for all environments, including
+# during releases. It is executed after compilation and before the
+# system starts, so it is typically used to load production configuration
+# and secrets from environment variables or elsewhere. Do not define
+# any compile-time configuration in here, as it won't be applied.
+# The block below contains prod specific runtime configuration.
+
+# ## Using releases
+#
+# If you use `mix release`, you need to explicitly enable the server
+# by passing the PHX_SERVER=true when you start it:
+#
+# PHX_SERVER=true bin/example_project start
+#
+# Alternatively, you can use `mix phx.gen.release` to generate a `bin/server`
+# script that automatically sets the env var above.
+if System.get_env("PHX_SERVER") do
+ config :example_project, ExampleProjectWeb.Endpoint, server: true
+end
+
+if config_env() == :prod do
+ # The secret key base is used to sign/encrypt cookies and other secrets.
+ # A default value is used in config/dev.exs and config/test.exs but you
+ # want to use a different value for prod and you most likely don't want
+ # to check this value into version control, so we use an environment
+ # variable instead.
+ secret_key_base =
+ System.get_env("SECRET_KEY_BASE") ||
+ raise """
+ environment variable SECRET_KEY_BASE is missing.
+ You can generate one by calling: mix phx.gen.secret
+ """
+
+ host = System.get_env("PHX_HOST") || "example.com"
+ port = String.to_integer(System.get_env("PORT") || "4000")
+
+ config :example_project, :dns_cluster_query, System.get_env("DNS_CLUSTER_QUERY")
+
+ config :example_project, ExampleProjectWeb.Endpoint,
+ url: [host: host, port: 443, scheme: "https"],
+ http: [
+ # Enable IPv6 and bind on all interfaces.
+ # Set it to {0, 0, 0, 0, 0, 0, 0, 1} for local network only access.
+ # See the documentation on https://hexdocs.pm/bandit/Bandit.html#t:options/0
+ # for details about using IPv6 vs IPv4 and loopback vs public addresses.
+ ip: {0, 0, 0, 0, 0, 0, 0, 0},
+ port: port
+ ],
+ secret_key_base: secret_key_base
+
+ # ## SSL Support
+ #
+ # To get SSL working, you will need to add the `https` key
+ # to your endpoint configuration:
+ #
+ # config :example_project, ExampleProjectWeb.Endpoint,
+ # https: [
+ # ...,
+ # port: 443,
+ # cipher_suite: :strong,
+ # keyfile: System.get_env("SOME_APP_SSL_KEY_PATH"),
+ # certfile: System.get_env("SOME_APP_SSL_CERT_PATH")
+ # ]
+ #
+ # The `cipher_suite` is set to `:strong` to support only the
+ # latest and more secure SSL ciphers. This means old browsers
+ # and clients may not be supported. You can set it to
+ # `:compatible` for wider support.
+ #
+ # `:keyfile` and `:certfile` expect an absolute path to the key
+ # and cert in disk or a relative path inside priv, for example
+ # "priv/ssl/server.key". For all supported SSL configuration
+ # options, see https://hexdocs.pm/plug/Plug.SSL.html#configure/1
+ #
+ # We also recommend setting `force_ssl` in your config/prod.exs,
+ # ensuring no data is ever sent via http, always redirecting to https:
+ #
+ # config :example_project, ExampleProjectWeb.Endpoint,
+ # force_ssl: [hsts: true]
+ #
+ # Check `Plug.SSL` for all available options in `force_ssl`.
+end
diff --git a/example_project/config/test.exs b/example_project/config/test.exs
new file mode 100644
index 0000000..402a222
--- /dev/null
+++ b/example_project/config/test.exs
@@ -0,0 +1,18 @@
+import Config
+
+# We don't run a server during test. If one is required,
+# you can enable the server option below.
+config :example_project, ExampleProjectWeb.Endpoint,
+ http: [ip: {127, 0, 0, 1}, port: 4002],
+ secret_key_base: "NOw9umqMS7gzFHxbPLvAI2Z9f/2iAOmS54sZ/bpjElo+WynkIdf1SeGWKuNJvT3p",
+ server: false
+
+# Print only warnings and errors during test
+config :logger, level: :warning
+
+# Initialize plugs at runtime for faster test compilation
+config :phoenix, :plug_init_mode, :runtime
+
+# Enable helpful, but potentially expensive runtime checks
+config :phoenix_live_view,
+ enable_expensive_runtime_checks: true
diff --git a/example_project/lib/example_project.ex b/example_project/lib/example_project.ex
new file mode 100644
index 0000000..ef1a176
--- /dev/null
+++ b/example_project/lib/example_project.ex
@@ -0,0 +1,9 @@
+defmodule ExampleProject do
+ @moduledoc """
+ ExampleProject keeps the contexts that define your domain
+ and business logic.
+
+ Contexts are also responsible for managing your data, regardless
+ if it comes from the database, an external API or others.
+ """
+end
diff --git a/example_project/lib/example_project/application.ex b/example_project/lib/example_project/application.ex
new file mode 100644
index 0000000..45343cb
--- /dev/null
+++ b/example_project/lib/example_project/application.ex
@@ -0,0 +1,32 @@
+defmodule ExampleProject.Application do
+ # See https://hexdocs.pm/elixir/Application.html
+ # for more information on OTP Applications
+ @moduledoc false
+
+ use Application
+
+ @impl true
+ def start(_type, _args) do
+ children = [
+ {DNSCluster, query: Application.get_env(:example_project, :dns_cluster_query) || :ignore},
+ {Phoenix.PubSub, name: ExampleProject.PubSub},
+ # Start a worker by calling: ExampleProject.Worker.start_link(arg)
+ # {ExampleProject.Worker, arg},
+ # Start to serve requests, typically the last entry
+ ExampleProjectWeb.Endpoint
+ ]
+
+ # See https://hexdocs.pm/elixir/Supervisor.html
+ # for other strategies and supported options
+ opts = [strategy: :one_for_one, name: ExampleProject.Supervisor]
+ Supervisor.start_link(children, opts)
+ end
+
+ # Tell Phoenix to update the endpoint configuration
+ # whenever the application is updated.
+ @impl true
+ def config_change(changed, _new, removed) do
+ ExampleProjectWeb.Endpoint.config_change(changed, removed)
+ :ok
+ end
+end
diff --git a/example_project/lib/example_project_web.ex b/example_project/lib/example_project_web.ex
new file mode 100644
index 0000000..786bb1c
--- /dev/null
+++ b/example_project/lib/example_project_web.ex
@@ -0,0 +1,115 @@
+defmodule ExampleProjectWeb do
+ @moduledoc """
+ The entrypoint for defining your web interface, such
+ as controllers, components, channels, and so on.
+
+ This can be used in your application as:
+
+ use ExampleProjectWeb, :controller
+ use ExampleProjectWeb, :html
+
+ The definitions below will be executed for every controller,
+ component, etc, so keep them short and clean, focused
+ on imports, uses and aliases.
+
+ Do NOT define functions inside the quoted expressions
+ below. Instead, define additional modules and import
+ those modules here.
+ """
+
+ def static_paths, do: ~w(assets fonts images favicon.ico robots.txt)
+
+ def router do
+ quote do
+ use Phoenix.Router, helpers: false
+
+ # Import common connection and controller functions to use in pipelines
+ import Plug.Conn
+ import Phoenix.Controller
+ import Phoenix.LiveView.Router
+ end
+ end
+
+ def channel do
+ quote do
+ use Phoenix.Channel
+ end
+ end
+
+ def controller do
+ quote do
+ use Phoenix.Controller,
+ formats: [:html, :json],
+ layouts: [html: ExampleProjectWeb.Layouts]
+
+ use Gettext, backend: ExampleProjectWeb.Gettext
+
+ import Plug.Conn
+
+ unquote(verified_routes())
+ end
+ end
+
+ def live_view do
+ quote do
+ use Phoenix.LiveView,
+ layout: {ExampleProjectWeb.Layouts, :app}
+
+ unquote(html_helpers())
+ end
+ end
+
+ def live_component do
+ quote do
+ use Phoenix.LiveComponent
+
+ unquote(html_helpers())
+ end
+ end
+
+ def html do
+ quote do
+ use Phoenix.Component
+
+ # Import convenience functions from controllers
+ import Phoenix.Controller,
+ only: [get_csrf_token: 0, view_module: 1, view_template: 1]
+
+ # Include general helpers for rendering HTML
+ unquote(html_helpers())
+ end
+ end
+
+ defp html_helpers do
+ quote do
+ # Translation
+ use Gettext, backend: ExampleProjectWeb.Gettext
+
+ # HTML escaping functionality
+ import Phoenix.HTML
+ # Core UI components
+
+ # Shortcut for generating JS commands
+ alias Phoenix.LiveView.JS
+
+ # Routes generation with the ~p sigil
+ unquote(verified_routes())
+ end
+ end
+
+ def verified_routes do
+ quote do
+ use Phoenix.VerifiedRoutes,
+ endpoint: ExampleProjectWeb.Endpoint,
+ router: ExampleProjectWeb.Router,
+ statics: ExampleProjectWeb.static_paths()
+ end
+ end
+
+ @doc """
+ When used, dispatch to the appropriate controller/live_view/etc.
+ """
+ defmacro __using__(which) when is_atom(which) do
+ apply(__MODULE__, which, [])
+ end
+end
diff --git a/example_project/lib/example_project_web/components/layouts.ex b/example_project/lib/example_project_web/components/layouts.ex
new file mode 100644
index 0000000..ebdca43
--- /dev/null
+++ b/example_project/lib/example_project_web/components/layouts.ex
@@ -0,0 +1,14 @@
+defmodule ExampleProjectWeb.Layouts do
+ @moduledoc """
+ This module holds different layouts used by your application.
+
+ See the `layouts` directory for all templates available.
+ The "root" layout is a skeleton rendered as part of the
+ application router. The "app" layout is set as the default
+ layout on both `use ExampleProjectWeb, :controller` and
+ `use ExampleProjectWeb, :live_view`.
+ """
+ use ExampleProjectWeb, :html
+
+ embed_templates "layouts/*"
+end
diff --git a/example_project/lib/example_project_web/components/layouts/app.html.heex b/example_project/lib/example_project_web/components/layouts/app.html.heex
new file mode 100644
index 0000000..8fbfe45
--- /dev/null
+++ b/example_project/lib/example_project_web/components/layouts/app.html.heex
@@ -0,0 +1,31 @@
+
+ <%!--
![]({~p"/images/logo.svg"})
+
+