The saasmvp Project

Appearance

The saasmvp-framework Directory Structure ​

The saasmvp-framework is a superset of the Nuxt 3 framework. The following directories and files are added to the Nuxt 3 framework. You can add any Nuxt directory not shown as well as your own directories to the framework as long as they don't conflict with the saasmvp-framework base directory structure shown below:

  1. ./.devcontainer/*
  2. ./.github/workflows/*
  3. ./.vscode/*
  4. ./Dockerfile
  5. ./compose-repo.yaml
  6. ./database/*
  7. ./dbconfig.sh
  8. ./nginx/*
  9. ./saasmvp.config/*
txt
.
├── .devcontainer
│   ├── compose-vscode.yaml
│   ├── dev-saasmvp.sh
│   ├── devcontainer.json
│   └── install.log
├── .env
├── .git
├── .github
│    └── workflows
│        ├── saasmvp-configure-droplet.yaml
│        └── saasmvp-create-droplet.yaml
├── .gitignore
├── .nuxt
├── .output
├── .vscode
│   └── launch.json
├── Dockerfile
├── README.md
├── app.vue
├── compose-repo.yaml
├── database
│   ├── migrations
│   ├── schema.prisma
│   └── seed.ts
├── nginx
│   ├── Dockerfile
│   ├── nginx-config.sh
│   ├── nginx-ssl
│   └── nginx.conf
├── node_modules
├── nuxt.config.ts
├── package-lock.json
├── package.json
├── public
├── saasmvp.config
│   ├── compose-prod.yaml
│   ├── register.sh
│   ├── restart-saasmvp.sh
│   ├── saasmvp.sh
│   ├── support.json
├── server
└── tsconfig.json
Figure 1. saasmvp-framework Base Directory Structure

./.devcontainer/* ​

The ./.devcontainer/* directory holds the files used by The Visual Studio Code Dev Containers extension permitting the use of a Docker container as a full-featured VSCode development environment.

compose-vscode.yaml ​

The compose-vscode.yaml file follows the rules provided by the Compose Specification to define multi-container Docker applications. The Compose Specification defines the contents of the compose-vscode.yaml file which is used to configure the saasmvp-framework's Docker application’s services, networks, volumes, and more.

The compose-vscode.yaml file is used to create four Docker Containers including dev-saasmvp-nuxtapp, saasmvp-nginx, saasmvp-mysql, and saasmvp-adminer; and the internal Docker network saasmvp-net which connects the four Docker Containers in a Network and bridges the Docker Network to localhost on your PC.

​

dev-saasmvp.sh ​

The dev-saasmvp.sh script is run by the devcontainer.json file's postStartCommand. This script generates the Prisma Database Client, creates a migration from the database schema found in ./database/schema.prisma, installs the MySQL tables specified in the schema; and runs the ./database/seed.ts program to seed the database with its' initial values.

​

devcontainer.json ​

The devcontainer.json file in the saasmvp-framework tells VS Code how to access (or create) a development Docker container with a well-defined tool and runtime stack.

​

install.log ​

The install.log file is created by the dev-saasmvp.sh script and is used by the dev-saasmvp.sh script to determine if the saasmvp-framework database client has been generated; and if the database has been migrated, installed and seeded. If the dev-saasmvp.sh script is run more than once, you will see the message The database has already been initialized. Reinitialize? (y/N):. Answering YES will delete whatever changes have been made to the database and reset the database to its' initial configuration.

./.github/workflows/*
​

GitHub Actions is a continuous integration and continuous delivery (CI/CD) platform that allows you to automate your build, test, and deployment pipeline. The saasmvp Project and the saasmvp-framework uses GitHub Actions for CI/CD deployment to an IaaS.

Github Workflows are used by GitHub Actions. A workflow is a configurable automated process that will run one or more jobs. Workflows are defined by a YAML file checked in to your GitHub repository and will run when triggered by an event in your repository, or they can be triggered manually, or at a defined schedule.

The saasmvp-framework uses two GitHub Workflows files: saasmvp-create-droplet.yaml and saasmvp-configure-droplet.yaml.

saasmvp-create-droplet.yaml
​

The saasmvp-create-droplet.yaml uses the DigitalOcean IaaS to create a DigitalOcean Docker Droplet on an Ubuntu 22.04 Server. In order to use this workflow you must create and store the GitHub Secrets DIGITALOCEAN_ACCESS_TOKEN and SASSMVP_SSH_KEY_PUB (public key) in your GitHub Repository that is used to run the saasmvp-create-droplet.yaml workflow.

​

saasmvp-configure-droplet.yaml
​

The saasmvp-configure-droplet.yaml configures the previously created DigitalOcean Docker Droplet with your SaaS MVP that was created using the saasmvp-framework. In order to use this workflow you must create and store the GitHub Secrets DIGITALOCEAN_ACCESS_TOKEN, SAASMVP_SSH_PASSWORD, SAASMVP_SSH_KEY (private key) and SASSMVP_SSH_KEY_PUB (public key) in your GitHub Repository that is used to run the saasmvp-configure-droplet.yaml workflow.

./.vscode/* ​

launch.json ​

You can debug your SaaS MVP using the VSCode Debugger. The launch.json file is used by VSCode to configure the VSCode Debugger.

./Dockerfile ​

Docker builds images automatically by reading instructions from a Dockerfile. A Dockerfile is a text document that contains all the commands a user could call on the command line to assemble an image. In the saasmvp-framework, the ./Dockerfile is used by ./compose-repo.yaml to inform Docker Compose how to build the SaaS MVP Nuxt Application (saasmvp-nuxtapp) Docker Container for use in an IaaS production environment.

./compose-repo.yaml
​

The ./compose-repo.yaml file is used by Docker Compose to build four Docker Containers for deployment to an IaaS including saasmvp-nuxtapp, saasmvp-nginx, saasmvp-mysql, and saasmvp-adminer; and the internal Docker network saasmvp-net which connects the four Docker Containers on an Ubuntu 22.04 Server in a virtual Docker Network; and then proxies the Docker Network to a nginx Web Server using TLS/SSL to the Internet.

./database/*
​

The saasmvp-framework uses Prisma to provide the data access layer for the saasmvp-framework using the Object Relational Mapping (ORM) programming technique.

/migrations/* ​

Migrations are used to create, update, and rollback the SQL Database in the saasmvp-framework. The /migrations/* directory stores a migration file every time the schema.prisma file changes. The /migrations/* directory keeps track of applied migrations in order to detect and resolve conflicts and drifts between migrations and the database schema.

​

schema.prisma ​

The Prisma schema file (schema.prisma) is the main configuration file for the saasmvp-framework SQL Database.

​

seed.ts ​

The seed.ts file tells Prisma how to seed your SaaS MVP SQL Database. Seeding allows you to consistently re-create the same data in your database and can be used to:

  1. Populate your database with data that is required for your application to start - for example, a default language or a default currency.
  2. Provide basic data for validating and using your application in a development environment.

./nginx/* ​

The ./nginx/* directory contains several files used to configure the saasmvp-framework nginx Web Server for use in development and production using TLS/SSL certificates.

Dockerfile ​

In the saasmvp-framework, the ./nginx/Dockerfile is used by both ./.devcontainer/compose-vscode.yaml (development) and ./compose-repo.yaml (production) to inform Docker Compose how to build the SaaS MVP nginx Web Server (saasmvp-nginx) Docker Container for use in a development or IaaS production environment.

​

nginx-config.sh ​

The nginx-config.sh file is a shell script that is used to configure the saasmvp-nginx Docker Container for TLS/SSL on port 443 (https) during deployment configuration. This script is used by ./saasmvp.config/saasmvp.sh.

​

nginx-ssl
​

The nginx-ssl file is used during production configuration of your Ubuntu 22.04 IaaS Server to enable TLS/SSL on port 443 (https). You must edit this file on your local machine with your chosen domain name(s). In the following example, replace the domain names demo.saasmvp.org and www.demo.saasmvp.org with your chosen domain name(s). You can have one or more domain name(s).

Edit the ./nginx/nginx-ssl File Using your Domain Name(s)

txt
# nginx-ssl
# renamed default.conf by the Docker saasmvp-nginx container on installation. SEE: nginx-config.sh
# NOTE: This web server does uses SSL and is SECURE. Use for production only
# replace demo.saasmvp.org www.demo.saasmvp.org with your domain name(s)

server {
    listen       80;
    server_name  demo.saasmvp.org www.demo.saasmvp.org;

    location / {
        return 301 https://$host$request_uri;
    }    
}  

server {
    listen 443 ssl;
    server_name  demo.saasmvp.org www.demo.saasmvp.org;

    ssl_certificate /etc/letsencrypt/live/demo.saasmvp.org/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/demo.saasmvp.org/privkey.pem;
   
    location / {
    proxy_pass http://nuxtapp:3000;
  }
}

​

nginx.conf ​

The nginx.conf file is the default configuration file for saasmvp-nginx. This configuration file sets up your development environment to use http://localhost on port 80 (http). You can demostrate your SaaS MVP on your PC by opening a browser and navigating to http://localhost.

During production configuration of your Ubuntu 22.04 IaaS Server, the [==SCRIPT?==] will use the configuration information provided in the nginx-ssl file that you have edited with your domain name(s), to enable TLS/SSL on port 443 (https).

./saasmvp.config/* ​

The ./saasmvp.config/* directory contains the scripts used after the completion of the GitHub Actions ./github/workflows/saasmvp-configure-droplet.yaml to finish the configuration of the saasmvp-framework on an IaaS in a production environment.

compose-prod.yaml
​

The ./saasmvp.config/compose-prod.yaml script is used by the ./saasmvp.config/saasmvp.sh script to create the Docker Containers and Docker Network during deployment to the IaaS in a production environment. You will need to replace the image specification in the ./saasmvp.config/compose-prod.yaml file to correspond with the production Docker Images that you built using the Docker Compose ./compose-repo.yaml script. You will need to push your Docker Images for your SaaS MVP to your Docker Hub repository in order for Docker Compose to download them during deployment.

Replace the Highlighted Lines with the Name of Your Docker Images stored in Your Docker Hub Repository.

txt
# Comments are provided throughout this file to help you get started.
# If you need more help, visit the Docker compose reference guide at
# https://docs.docker.com/compose/compose-file/

# Here the instructions define your application as a service called "server".
# This service is built from the Dockerfile in the current directory.
# You can add other services your application may depend on here, such as a
# database or a cache. For examples, see the Awesome Compose repository:
# https://github.com/docker/awesome-compose
services:
  nuxtapp:
    container_name: saasmvp-nuxtapp
    image: rickgregg/saasmvp-nuxtapp:1.0.0
    ports:
      - 3000:3000
    depends_on:
      mysql:
        condition: service_healthy
  
  mysql:
    container_name: saasmvp-mysql
    image: rickgregg/saasmvp-mysql:8.1.0
    # NOTE: use of "mysql_native_password" is not recommended: https://dev.mysql.com/doc/refman/8.0/en/upgrading-from-previous-series.html#upgrade-caching-sha2-password
    # (this is just an example, not intended to be a production configuration)
    command: --default-authentication-plugin=mysql_native_password
    restart: always
    environment:
      # Use root/example as user/password credentials
      MYSQL_ROOT_PASSWORD: example
    ports:
      - 3306:3306
    volumes:
      - mysql:/var/lib/mysql
    healthcheck:
      # make sure database is ready to accept connection requests from nuxt application
      test: mysql --user=root --password=example  -e 'show databases;'
      interval: 5s
      timeout: 5s
      start_period: 5s
      retries: 55
  
  adminer:
    container_name: saasmvp-adminer
    image: rickgregg/saasmvp-adminer:4.8.1
    restart: always
    ports:
      - 8080:8080

  nginx:
    container_name: saasmvp-nginx
    image: rickgregg/saasmvp-nginx:1.21.6
    ports:
      - '80:80'
      - '443:443'
    volumes:
      # using a bind mount
      - /etc/letsencrypt:/etc/letsencrypt
    depends_on:
      - nuxtapp
  
volumes:
  mysql:

networks:
  default:
    name: saasmvp-net
    driver: bridge

​

register.sh ​

The ./saasmvp.config/register.sh script is used by the ./saasmvp.config/saasmvp.sh script during deployment on an IaaS to register the Developer to receive free technical support from The saasmvp Project. You will be prompted to Enter Your Email to Receive FREE TECHNICAL SUPPORT from saasmvp (Press Return to Decline FREE SUPPORT) during deployment configuration. You can decline FREE techincal support if you wish.

​

restart-saasmvp.sh ​

The ./saasmvp.config/restart-saasmvp.sh script is set up as a cron job by the ./saasmvp.config/saasmvp.sh to restart your SaaS MVP Docker Containers on a restart of the IaaS Ubunti 22.04 Server.

​

saasmvp.sh
​

The ./saasmvp.config/saasmvp.sh is the main script used by the saasmvp-framework to finish configuration of your SaaS MVP Production Environment. This script will be [==MANUALLY?==] run after the GitHub Actions script ./.github/workflows/saasmvp-configure-droplet.yaml completes. The ./saasmvp.config/saasmvp.sh performs the following steps:

  1. Verifies that your DNS Records have been properly setup.
  2. Installs your FREE TLS/SSL Digital Certificate from certbot for use by the saasmvp-nginx Docker Container to enable https.
  3. Configures a cron job to automatically renew your certbot TLS/SSL Digital Certificate.
  4. Creates, migrates and seeds the saasmvp-mysql SQL Database.
  5. Optionally registers the Developer for FREE Technical Support from The saasmvp Project.
  6. Configures a cron job to automatically restart your SaaS MVP Docker Containers on a Ubuntu 22.04 restart.
  7. Creates and starts your SaaS MVP Docker Containers and Docker Network.

​

support.json ​

The ./saasmvp.config/support.json file holds the registration information for the Developer and indicates to The saasmvp Project if the Developer is registered to receive FREE Technical Support.

TIP

Want to get started right away? Looking for a NO ASSEMBLY REQUIRED experience? Click here.

Released under the MIT License

Copyright © 2024 The saasmvp Project