Installing backpex via generator

[phyr97]

closes #980

This is the starting point for a backpex installer with igniter. You can use mix igniter.install backpex to add backpex to your project and have almost everything set up without any further work. More information about installing with igniter can be found in its docs.

The installer requires the new tailwind and daisyui update (#920), as it greatly reduces the pain of the tailwind and daisyui setup (no tailwind.config.js 🥳).

ToDo

• Install the backpex hooks via igniterjs
  • requires igniterjs to be installed in the user's project
• Install daisyui using npm command
  • checks if npm is installed and asks the user if the installer is allowed to install daisyui
• add backpex to `.formatter.exs
• configure pubsub server in `config.exs
• add backpex_routes to router.exs.
• add admin.html.heex to layouts folder
• add @source "../../deps/backpex/**/*.*ex"; to app.css
• warn user if tailwindcss/forms plugin exists in app.css
  • can be removed by the generator if the user confirms it
• warn user if bg-white class is used on body tag
  • can be removed by the generator if the user confirms it
• write docs
• test manually with new phoenix project
• improve code
• fix credo warnings and possible bugs discovered while testing
• write tests for the generator with Igniter.Test

[Flo0807]

I cannot start the demo app:

app-1       | * sourceror (Hex package)
app-1       |   the :only option for dependency sourceror
app-1       |
app-1       |   > In mix.exs:
app-1       |     {:sourceror, "~> 1.7", [env: :prod, hex: "sourceror", only: [:dev, :test], repo: "hexpm"]}
app-1       |
app-1       |   does not match the :only option calculated for
app-1       |
app-1       |   > In deps/rewrite/mix.exs:
app-1       |     {:sourceror, "~> 1.0", [env: :prod, hex: "sourceror", repo: "hexpm", optional: false]}
app-1       |
app-1       |   Remove the :only restriction from your dep
app-1       | ** (Mix) Can't continue due to errors on dependencies

I removed sourceror from the list of dependency in demo/mix.exs and it works. I think the error occurs because sourceror is a dependency of igniter (?)

[Flo0807]

I think it is more common to place the package.json into /assetsso we should probably call this within the /assets directory. What do you think? I am not sure because I also know of applications that have a package.json on the root level.

[phyr97]

I can check in which directory the package.json exists and then call the command there.

[phyr97]

I have just tested the generator with a new phoenix project using phoenix version 1.8.0-rc.3 (phoenixframework/phoenix@827dca4). As daisyui now comes with Phoenix by default, installing daisyui with our installer would no longer be necessary. So should we wait for Phoenix 1.8?

[Flo0807]

I can check in which directory the package.json exists and then call the command there.

👍

As daisyui now comes with Phoenix by default, installing daisyui with our installer would no longer be necessary. So should we wait for Phoenix 1.8?

I guess, the installer should also work if you've installed Phoenix with the 1.7 generator and do not have daisyui pre-installed.

It's easy to check if DaisyUI is installed via NPM, right? But can we also check whether it is installed without NPM, as is done in Phoenix 1.8? @phyr97

I'd prefer to check if daisyui is installed (NPM or Phoenix 1.8-way). If not, install daisyui via NPM.

[phyr97]

I guess, the installer should also work if you've installed Phoenix with the 1.7 generator and do not have daisyui pre-installed.

The problem with the generated phoenix 1.7 project is, that it comes with an older tailwind version with a tailwind config which is hardly to manage in the installer.

[Flo0807]

This installer automates most of the steps in this guide.

As the installer does not automate all the steps from our guide, the docs should make it clear where you have to continue.

My idea would be to sort the installation guide to first cover the steps the installer can do for you, and then list all the other steps. Then we can link to the section where you can continue.

Also, we should move the info for the installer task below the Prerequisites section as you are required to have Tailwind CSS v4 installed for example. I guess, we can remove the Prerequisites title at all and just list all the steps.

This is the order I came up with

(Prerequisites) - as you need to perform the below steps to be able to run the generator

• Phoenix LiveView
• Tailwind CSS
• Ecto (we could move this to the steps after running the generator)
• Add to list of dependencies

Generator hint / info (below steps are covered by the generator)

• Global configuration
• Backpex Hooks
• daisyUI (installation)
• Add files to Tailwind content
• Setup formatter
• Configure Routing (without routes to LiveResources, just backpex_routes and import Backpex.Router)
• Create a default admin layout
• Remove default background color
• Remove @tailwindcss/forms plugin

Continue Hint (steps running the generator)

• Create an example resource
• Configure LiveResource
• Configure Routing (live_session, init_assigns, route to example live_resource, default route, link in sidebar etc)
• Provide Tailwind Plugin for heroicons
• daisyUI theme

Without reordering the installation guide, it is not clear where you have to continue after you've run the command.

[Flo0807]

This installer automates most of the steps in this guide.

As the installer does not automate all the steps from our guide, the docs should make it clear where you have to continue.

My idea would be to sort the installation guide to first cover the steps the installer can do for you, and then list all the other steps. Then we can link to the section where you can continue.

Also, we should move the info for the installer task below the Prerequisites section as you are required to have Tailwind CSS v4 installed for example. I guess, we can remove the Prerequisites title at all and just list all the steps.

This is the order I came up with

(Prerequisites) - as you need to perform the below steps to be able to run the generator

• Phoenix LiveView
• Tailwind CSS
• Ecto (we could move this to the steps after running the generator)
• Add to list of dependencies

Generator hint / info (below steps are covered by the generator)

• Global configuration
• Backpex Hooks
• daisyUI (installation)
• Add files to Tailwind content
• Setup formatter
• Configure Routing (without routes to LiveResources, just backpex_routes and import Backpex.Router)
• Create a default admin layout
• Remove default background color
• Remove @tailwindcss/forms plugin

Continue Hint (steps running the generator)

• Create an example resource
• Configure LiveResource
• Configure Routing (live_session, init_assigns, route to example live_resource, default route, link in sidebar etc)
• Provide Tailwind Plugin for heroicons
• daisyUI theme

Without reordering the installation guide, it is not clear where you have to continue after you've run the command.

I prepared the docs in #1098 @phyr97