Introducing Boilerplate Builder
I have started a new project. Its a free PhoenixBoilerplate that you tweak and select features after your need and taste.
So, to fill my own need, I have started a boiler plate builder project. Its is not nearly done yet but it should save you at least an hour or two.
STEP 1 - Get Started
Go to the url: https://fullstackphoenix.com/boilerplates
Fill in the app name in snake case and select the options. In this example I will call my template my_example. Then click Save.
The process takes maybe 10 seconds and then a download link should appear.
Download the file and unpack it.
Rename the folder and cd into it. Run
mix deps.get && mix ecto.create
Install assets with:
cd assets && yarn
And then start the server with:
Visit localhost:4000 and you should see something like:
STEP 3 - Generating a resource
I have included a generator for the theme that where generated with Bootstrap or Tailwind. There is both a LiveView version and a vanilla Phoenix Html version.
I call these PrettyHtml or PrettyLive. Run the PrettyLive version by running the comman:
mix phx.gen.pretty_live Products Product products name content:text active:boolean
This should generate the normal context and tests, but also Bootstrap or Tailwind themed html templates.
First, I need to follow the instructions and add to my routes:
live "/products", ProductLive.Index, :index live "/products/new", ProductLive.Index, :new live "/products/:id/edit", ProductLive.Index, :edit live "/products/:id", ProductLive.Show, :show live "/products/:id/show/edit", ProductLive.Show, :edit
If you go to localhost:4000/products/new new you should see a modal form presented with Phoenix LiveView
And it should be stored:
STEP 4 - phx_gen_auth
If you selected that the app should be installed
phx_gen_auth a full user authentication system should also be installed. More on that later, but it looks like this:
This is just the initial version and I have plans to make this more featureful and usable. There will be an admin theme and integrated payment options high on my list. If you have any ideas or questions, reach out to me for a discussion.
How to combine Phoenix LiveView with Alpine.js
No matter how great Phoenix LiveView is, there is still some use case for sprinking some JS in your app to improve UX. For example, tabs, dropdowns,..
Getting Started with Phoenix and LiveView
This guide to getting started with Phoenix covers getting up and running with Elixir and Phoenix. This is a direct conversion of the Getting started..