Psst. It would be super cool if you could try the new Phoenix Boilerplate!

Try now

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.


What are you working on?

If you want, you can send me a link to your Phoenix or Phoenix LiveView project so. Lets connect on Twitter or Linkedin.

- Andreas Eriksson, web developer since 2005

Related Tutorials

Published 11 Jul

Create a reusable modal with LiveView Component

tailwindalpinejsliveviewmodalphoenix

To reduce duplicity and complexity in your apps, Phoenix LiveView comes with the possibility to use reusable components. Each component can have its..

Published 30 Jul

Getting started with GraphQL and Absinthe in Phoenix

apiabsinthegraphqlphoenix

In the last tutorial, there I had an app with a simple rest api that was authenticated with Guardian and Json Web Token. In this tutorial, I will go..