Tutorial

Introducing Boilerplate Builder

phoenixboilerplate

I have started a new project. Its a free PhoenixBoilerplate that you tweak and select features after your need and taste.

The background is that I always starting new side projects and these always have a fairly long setup where I always add the same styling, javascript, authentication and so on. By the time I can actually start code on my idea, I start to get a little exhausted.

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.

STEP 2

Download the file and unpack it.

Rename the folder and cd into it. Run

mix deps.get && mix ecto.create

Run migrations

mix ecto.migrate

Install assets with:

cd assets && yarn

And then start the server with:

mix phx.server

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:

Conclusion

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.

Phoenix Boilerplate

Generate a Phoenix Boilerplate and save hours on your next project.

Try now

SAAS Starter Kit

Get started and save time and resources by using the SAAS Starter Kit built with Phoenix and LiveView.

Learn More

Related Tutorials

Published 23 Dec - 2020

Getting Started with Phoenix and LiveView

phoenixliveview

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..

Published 04 May

How to combine Phoenix LiveView with Alpine.js

alpinejsliveviewphoenixtailwind

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,..