LogoLogo
v2.2.0
v2.2.0
  • 🌸What is Petal Pro?
  • πŸ’‘Changelog
  • ⏫Upgrade guide
  • Guides
    • πŸš€Creating a web app from start to finish
    • 🌎Deploy to Fly.io
    • πŸ’³Adding a subscription
    • πŸ”’Creating Your Own API
    • πŸ”ŒContent Editor - adding your own plug-in
  • πŸ‘©β€πŸ³Recipes
    • πŸ’How to apply a recipe with git cherry pick
    • #️⃣UUIDs
    • ✍️First/Last name
    • πŸ—ΊοΈGoogle Maps
    • Password Hashing for Windows
  • Fundamentals
    • πŸ’ΏInstallation
    • πŸ“‚Folder structure
    • πŸ—ƒοΈIncluded Pages
    • πŸ˜€Users & Authentication
    • 🏒Organizations & Multitenancy
    • πŸ’³Stripe billing
    • Blog/CMS
    • πŸ””User Notifications
    • 🧊Components
    • ⬛Dark mode
    • 🎨Branding
    • 🌱Seeding
    • πŸ“„Layouts & Menus
    • πŸ–ΌοΈImage uploads
    • πŸ‘₯Impersonation
    • πŸ› οΈBackground Tasks and Jobs
    • πŸ”§Util & Helpers
    • πŸ“§Emails
    • πŸͺJavascript Hooks
    • πŸ“šExtra Hex Libraries
    • πŸ—οΈGenerators
    • πŸ—£οΈTranslations
    • πŸ–οΈContributing
    • πŸ›«Deployment
    • πŸ›‘οΈTesting
    • πŸ”’REST API
Powered by GitBook
On this page
  • Prerequisites
  • Quick install instructions
  • Comprehensive install instructions
  • Other tools we use to help develop web apps
  • Contributing

Was this helpful?

  1. Fundamentals

Installation

Prerequisites

You will need:

  • a paid subscription to Petal Pro (or be part of a team with a paid subscription)

  • this guide is written from the point of view of a Mac. However, it shouldn't be hard to find the equivalents for Linux or Windows

Quick install instructions

If you just want to see something running without configuring anything:

  1. Download the latest release

  2. Run mix setup

  3. Run mix phx.server

You can now sign in as admin:

  • Email: admin@example.com

  • Password: password

Or a normal user:

  • Email: user@example.com

  • Password: password

Comprehensive install instructions

1. Download and unzip a release

We recommend downloading the latest version from a proper "Release" (either from Github or via a Project).

To download via a project you first need to go to the projects page and create one:

Then you can download:

Done!

If you're a Github member it is possible to clone from the main branch, but we don't recommend it because there is a higher chance of bugs. Before each release, we do comprehensive testing and ensure the docs are up to date.

2. Install Elixir & Erlang with asdf

If you already have Elixir and Erlang installed you can skip to the next section.

We recommend using asdf to manage your Elixir and Erlang versions. It allows you to have multiple versions on your computer.

For Macs using Homebrew:

brew install coreutils curl git gnupg gnupg2
brew install asdf

# Add executable to your terminal setup file. 
# Bash users:
echo -e "\n. $(brew --prefix asdf)/libexec/asdf.sh" >> ~/.bash_profile

# zsh users
echo -e "\n. $(brew --prefix asdf)/libexec/asdf.sh" >> ${ZDOTDIR:-~}/.zshrc

# Reload your terminal
asdf plugin add erlang
asdf plugin add elixir

# Navigate to the root of your Petal Pro folder
# Check the file .tool-versions - these are the version we will use.
asdf install

3. Rename your project (not recommended if you want updates)

Warning: if you plan to merge in future Petal Pro commits (eg. if you're waiting for an upcoming feature), then perhaps hold off renaming as it makes merging harder.

Your app module is currently called PetalPro. There is a hex package to help you rename:

# mix.exs

{:rename_project, "~> 0.1.0", only: :dev, runtime: false}

This package enables you to use this command:

mix rename PetalPro YourNewName

4. Run the setup command

In your terminal, run the command:

mix setup

This will fetch dependencies, create and migrate your database, and run the seeds script (creates and admin user and some dummy users).

5. Install chromedriver

In order for tests to work, you will need to install Chromedriver (we utilize Wallaby for e2e tests). On a Mac you can install it with:

brew install --cask chromedriver

# You may also need to run this (if it says something like "Unable to open chromedriver"):
xattr -d com.apple.quarantine $(which chromedriver)

6. Run the server

mix phx.server

# Or, if you want IEX running at the same time:
iex -S mix phx.server

Now you can visit localhost:4000 from your browser.

You can now sign in as admin:

  • Email: admin@example.com

  • Password: password

Or a normal user:

  • Email: user@example.com

  • Password: password

7. Add in your branding and details (can be done later)

We have added comments throughout the codebase providing instructions on how to add in your app details and branding. Simply do a global find in your code editor for the text "SETUP_TODO" and follow the instructions.

8. Look over our recipes

We have some recipes to cover common use cases that aren't part of the normal setup. For example, UUID's instead of ordinary IDs. You can git cherry pick them into your codebase. Check them out here.

Other tools we use to help develop web apps

  • iTerm2 to replace Mac terminal

  • Fig to enhance your terminal

  • ZSH Prezto to replace BASH with zsh within the terminal

  • Database GUI - pick one based on your budget:

    • TablePlus (paid) - though it's included with a SetApp subscription

    • Beekeeper (free)

  • SourceTree to help use git

  • Dash for near instantaneous documentation. Useful when you keep looking up Elixir functions like String.match?.

  • Linear for issue tracking

  • Figma for design

  • Raycast to replace spotlight

Contributing

Petal Pro is a paid product but we welcome PR's if you find small bugs / typos / improvements. Let us know if you want to contribute in a more significant way and we can offer unlimited membership in return.

PreviousPassword Hashing for WindowsNextFolder structure

Was this helpful?

πŸ’Ώ
Create a new Petal Pro project
Download the zip file