Introduction

Getting started with the template

The best way to get started with Snowhite is by using the snowhite-template repository. It contains a fresh Phoenix repo but configured to use Snowhite inside.

It also includes a rename mix task so you can name the repo however you want.

mix rename SomeOtherName

Adding Snowhite to an existing project

If you want to add Snowhite to an existing project, there some things that needs to be configured in the first place. The following guide should guide you through this whole process.

Creating the Snowhite module

You must create the Snowhite module with at least a default profile to get started. Either copy paste both Snowhite.Profiles and Snowhite.Profiles.Default from the template or refer to the guide to make them manually.

Creating the routing

Open your router module, import the builder and use the macro like the following:

defmodule MyAppWeb.Router do
  # ...
  import Snowhite, only: [snowhite_router: 1]

  # or scope it however you want
  snowhite_router(SnowhiteTemplate.Profiles)
 end

Add the application supervisor

In the application file of you project, you need to reference your profile's application supervisor (the ApplicationSupervisor module is generated)

Example:

defmodule SnowhiteTemplate.Application do
  use Application

  def start(_type, _args) do
    children = [
      {Phoenix.PubSub, name: SnowhiteTemplate.PubSub},
      SnowhiteTemplateWeb.Endpoint,
      SnowhiteTemplate.Profiles.ApplicationSupervisor     # <-------
    ]

    opts = [strategy: :one_for_one, name: SnowhiteTemplate.Supervisor]
    Supervisor.start_link(children, opts)
  end

  def config_change(changed, _new, removed) do
    SnowhiteTemplateWeb.Endpoint.config_change(changed, removed)
    :ok
  end
end

Import assets

Even though CSS is not really a requirement, we do believe that it'll get you started more easily.

In assets/js/app.scss add the following:

@import "../../deps/snowhite/assets/css/app.scss"

In assets/js/app.js make sure to have at least the following live view setup.

import "../css/app.scss"
import {Socket} from "phoenix"
import {LiveSocket} from "phoenix_live_view"

let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content")
let liveSocket = new LiveSocket("/live", Socket, {params: {_csrf_token: csrfToken}})

liveSocket.connect()

window.liveSocket = liveSocket

(There is nothing special to do here if you already setup live views)