Initial Setup

Admin Area

SAAS Starter Kit

Get Started Guide

Thank you for showing interest in the SAAS Starter Kit

This tutorial should help you get started

Requirements

Make sure you have a recent version of Elixir, Postgresql and Yarn installed

Install Dependencies

After the package is downloaded, cd into the folder

and install the dependencies with:

$

If you have trouble installing the dependencies and run ASDF as a package manager, it may help if to add a tool-versions file. 


    
    # .tool-versions
    elixir 1.12.3-otp-24
    erlang 24.1.2

Setup the database

Setup the database and run the migrations with:

$

Install assets

From the assets folder, install the packages with Yarn (or NPM)

$

Create the default .env file

The .env file contains secret keys for Stripe and Guardian

$

Update the core settings

The settings are in .env and config.exs


    
    # .env
    # Generate two different Guardian secrets
    export STRIPE_SECRET=
    export STRIPE_PUBLIC=
    export STRIPE_WEBHOOK_SIGNING_KEY=
    export GUARDIAN_SECRET_KEY= # mix guardian.gen.secret
    export GUARDIAN_SECRET_KEY_ADMINS= # mix guardian.gen.secret
$

You need different guardian keys for admins and non admins. Guardian for non admins are used for API authentication.

Update config.exs with information you have. These should be used throughout the app. 


    
    # config.exs
    config :my_app,
      stripe_service: Stripe,
      require_subscription: true, # Should be false until Stripe is setup
      page_name: "my-app.com",
      company_name: "My App Inc",
      company_address: "26955 Fritsch Bridge",
      company_zip: "54933-7180",
      company_city: "San Fransisco",
      company_state: "California",
      company_country: "United States",
      contact_name: "John Doe",
      contact_phone: "+1 (335) 555-2036",
      contact_email: "contact@my-app.com"

Initial Setup Done

You should now be able to start the server and visit http://localhost:4000

$

Requirements

You should go for the latest versions of the requirements if possible. The versions that I have tested with and use are:

  • Elixir (version 1.12+)
  • PostgreSQL (version 12+)
  • Phoenix (1.6+ with Esbuild)
  • Alpine Js (3.8+)
  • Tailwind (3+)
  • LiveView (0.17+)

Install dependencies

If you have trouble installing the dependencies and run ASDF as a package manager, it may help if to add a tool-versions file. Use the versions that you have installed and make sure to install a recent version.

# .tool-versions
elixir 1.12.3-otp-24
erlang 24.1.2

Setup the database

As all Phoenix applications, you need to have Postgres installed. I prefer to install and run Postgres App which usually works out of the box with OS X.

However, you can also install postgres with Homebrew. Run the command:

brew install postgres

Check that everything was installed correctly and the version of PostgreSQL by using the psql command.

psql --version

To start PostgreSQL run the following command in the Terminal.

brew services start postgres

When you have Postgres installed and running, you can then run the mix command to create the database for the application. 

mix ecto.create && mix ecto.migrate

Node and Yarn

You will also need Node.js and Yarn installed to manage your Phoenix application’s frontend.

You most likely have this installed or have a preferred way to install it. Otherwhise find the installation instructions at the Node.js website and verify it’s installed correctly with the following command:

node --version

Make sure its recent version (> 12.16.1)

You can install Yarn through the Homebrew package manager. This will also install Node.js if it is not already installed.

brew install yarn

Check the version in the console by:

yarn -v

If it says something like “1.22.5”, Yarn has been installed correctly.

From the assets folder, install the packages with Yarn

cd assets && yarn install

ENV file

The app depends on some env-variables to be set. These should not be in the source-control (Git) but be stored in a .env-file that the app reads from. Most importantly, from the start it will be where you store the Stripe keys and Guardian secrets.

There is already an example .env that you can copy:

cp .env.example .env

Update the core settings

There are some settings that need to be set before the app can start. You need to generate two different secrets for the Guardian library. One is used for the GraphQL API authentication and the other is used for authenticate the admins in the admin area. 

# .env
export GUARDIAN_SECRET_KEY= # mix guardian.gen.secret
export GUARDIAN_SECRET_KEY_ADMINS= # mix guardian.gen.secret
mix guardian.gen.secret

Remember to source the env file after its updated

source .env

Other settings are not mandatory to set before getting started but in the configs, you can customize company info and also not require Stripe subscriptions for created accounts.

# config.exs
config :my_app,
  stripe_service: Stripe,
  require_subscription: true, # Should be false until Stripe is setup
  page_name: "my-app.com",
  company_name: "My App Inc",
  company_address: "26955 Fritsch Bridge",
  company_zip: "54933-7180",
  company_city: "San Fransisco",
  company_state: "California",
  company_country: "United States",
  contact_name: "John Doe",
  contact_phone: "+1 (335) 555-2036",
  contact_email: "contact@my-app.com"

Initial Setup Done

Now the initial setup is done and you sould be able to start the app by running

mix phx.server

and then visit http://localhost:4000 in your browser.