Introducing Boilerplate Builder

I have started a new project. It's 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 boilerplate builder project. It 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 was 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 command:

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