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.


Related Tutorials

Published 01 Apr

Create a reusable modal with LiveView Component

alpinejsliveviewmodalphoenixtailwind

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 Jun

Nested Templates and Layouts in Phoenix Framework

templateslayoutsphoenix

Eventually when your site reach a certain maturity, you look into ways to refactor the code. One is to add parts of the templates in reusable layout..