Development

The saasmvp-framework integrates VSCode with Docker using a VSCode Dev Container to provide a completely isolated and networked Dockerized development and debugging environment on your local personal computer. The saasmvp-framework includes the following: 1) a Nuxt 3 Node server, 2) a nginx http(s) proxy server, 3) a MySQL Database; and 4) the Adminer Database Management Tool. All four servers are connected to the saasmvp-net Docker network and are made available to the localhost network on your PC.

Configure the Development Environment

1. Make sure VSCode is installed.
2. Open a new terminal in VSCode and update the operating system dependencies

sudo apt-get update
sudo apt-get upgrade

3. In the terminal, install GitHub.

sudo apt install git

4. Install NodeJS which includes npm.

sudo snap install node --classic

5. Check to make sure Node and npm have been installed. Run the following from the terminal. You should see a version number for Node and npm meaning these dependencies have been correctly installed.

Verify NodeJS has Been Successfully Installed

node -v

You should see something similar in the console display:

v20.2.0

Verify npm has Been Successfully Installed

npm -v

You should see something similar in the console display:

9.6.6

6. Install Nuxt 3 from the terminal.

npm i nuxt

7. Check to make sure Nuxt 3 has been installed. Run the following fromt the terminal. You should see a version number for Nuxt 3.

Verify Nuxt 3 has Been Successfully Installed

npx nuxi info

You should see something similar in the console display:

Nuxt project info:

------------------------------
- Operating System: Linux
- Node Version:     v20.2.0
- Nuxt Version:     3.9.3
- CLI Version:      3.10.0
- Nitro Version:    2.8.1
- Package Manager:  npm@9.6.6
- Builder:          -
- User Config:      devtools, modules
- Runtime Modules:  @pinia/nuxt@0.5.1
- Build Modules:    -
------------------------------

TIP

Your Development Environment has been successfully configured! Looking for a NO ASSEMBLY REQUIRED experience? Click here.

Installing the saasmvp-framework

1. Clone the saasmvp-framework repository

git clone https://github.com/rickgregg/saasmvp-framework.git

2. Navigate to the saasmvp-framework directory from the terminal

cd saasmvp-framework

3. Start VSCode from the terminal.

code .

4. Install the npm packages specified in the package.json file by executing the following from the terminal:

npm install

5. Run the saasmvp-framework from the terminal.

npm run dev

6. If you have successfully completed the previous steps, you should see something similar to the following in the console display:

VSCode Console Display

> dev
> nuxt dev

Nuxt 3.9.3 with Nitro 2.8.

  ➜ Local:    http://localhost:3000/
  ➜ Network:  use --host to expose

  ➜ DevTools: press Shift + Alt + D in the browser (v1.0.8)

ℹ Vite client warmed up in 2310ms
ℹ Vite server warmed up in 2390ms
✔ Nitro built in 863 ms

7. Navigate to the running saasmvp-framework in your browser. Default is http://localhost:3000. Your port number may vary. You should see the Welcome to The saasmvp Project homepage.

http://localhost:3000

8. Stop the Development Environment by entering Ctrl+C in the terminal.

TIP

You have now successfully installed the saasmvp-framework. Looking for a NO ASSEMBLY REQUIRED experience? Click here.

Create the saasmvp-framework Docker Development Environment

The saasmvp-framework uses a VSCode Dev Container to provide a completely isolated and networked Dockerized development and debugging environment on your local personal computer. The saasmvp-framework includes the following: 1) a Nuxt 3 Node server, 2) a nginx http(s) proxy server, 3) a MySQL Database; and 4) the Adminer Database Management Tool. All four servers are connected to the saasmvp-net Docker network and are made available to the localhost network on your PC. Any changes you make during development of your SaaS MVP are immediately available in real-time.

1. Start Docker Desktop. Enter the following command from the VSCode terminal to check if Docker is running:

Verify Docker Desktop is running

docker -v

You should see something similar in the console display:

Docker version 24.0.7, build afdd53b

2. Make sure you have a clean Docker environment to work with. Enter the following command in the terminal:

Inspect the Docker Environment

docker ps -a

You should see the following in the console display:

CONTAINER ID   IMAGE     COMMAND   CREATED   STATUS    PORTS     NAMES

3. If you need to clean your Docker environment, open Docker Desktop and perform the following:

Cleaning the Docker Environment

1. Select the Containers menu item in the left hand sidebar, select all Containers using the select all checkbox, click on the Delete button; and confirm by clicking on the Delete Forever button.
2. Select the Images menu item in the left hand sidebar, select all Images using the select all checkbox, click on the Delete button; and confirm by clicking on the Delete Forever button.
3. Select the Volumes menu item in the left hand sidebar, select all Volumes using the select all checkbox, click on the Delete button; and confirm by clicking on the Delete Forever button.
4. From the terminal enter the following commands:

docker system prune -f
docker volume prune -f
docker network prune -f

4. Open the VSCode Command Palette by pressing the F1 key in the terminal. Scroll down and select the command Dev Containers: Rebuild and Reopen in Container. The saasmvp-framework Docker environment will build by executing the commands found in the ./.devcontainer/devcontainer.json file. This will take some time intially but will subsequently build much faster if the Docker environment hasn't been cleansed. Be patient. You will see a notification in the lower left hand corner that VSCode is in the process of Opening Remote.... You can then click on the information box in the lower right hand corner entitiled Starting Dev Container (show log) to witness the progress of your build.

5. The last step in the build process executes the Dev Container postStartCommand which runs the ./.devcontainer/dev-saasmvp.sh script. 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. The expected result of the postStartCommand follows:

Expected Dev Container postStartCommand Console Display

Running the postStartCommand from devcontainer.json...

[26605 ms] Start: Run in container: /bin/sh -c ./.devcontainer/dev-saasmvp.sh

Environment variables loaded from .env
Prisma schema loaded from database/schema.prisma

✔ Generated Prisma Client (v5.8.1) to ./node_modules/@prisma/client in 517ms

Start using Prisma Client in Node.js (See: https://pris.ly/d/client)
'''
import { PrismaClient } from '@prisma/client'
const prisma = new PrismaClient()
'''
or start using Prisma Client at the edge (See: https://pris.ly/d/accelerate)
'''
import { PrismaClient } from '@prisma/client/edge'
const prisma = new PrismaClient()
'''

See other ways of importing Prisma Client: http://pris.ly/d/importing-client

┌─────────────────────────────────────────────────────────────┐
│  Deploying your app to serverless or edge functions?        │
│  Try Prisma Accelerate for connection pooling and caching.  │
│  https://pris.ly/cli/accelerate                             │
└─────────────────────────────────────────────────────────────┘

npm notice 
npm notice New major version of npm available! 9.6.6 -> 10.4.0
npm notice Changelog: https://github.com/npm/cli/releases/tag/v10.4.0
npm notice Run npm install -g npm@10.4.0 to update!
npm notice 
Environment variables loaded from .env
Prisma schema loaded from database/schema.prisma
Datasource "db": MySQL database "saasmvp" at "saasmvp-mysql:3306"

MySQL database saasmvp created at saasmvp-mysql:3306

Applying migration `20240125023818_saasmvp`

The following migration(s) have been applied:

migrations/
  └─ 20240125023818_saasmvp/
    └─ migration.sql

Your database is now in sync with your schema.

✔ Generated Prisma Client (v5.8.1) to ./node_modules/@prisma/client in 125ms


Running seed command `tsx database/seed.ts` ...

🌱  The seed command has been executed.


┌─────────────────────────────────────────────────────────┐
│  Update available 5.8.1 -> 5.9.1                        │
│  Run the following to update                            │
│    npm i --save-dev prisma@latest                       │
│    npm i @prisma/client@latest                          │
└─────────────────────────────────────────────────────────┘
saasmvp database configured
start nuxt app

> dev
> nuxt dev

Nuxt 3.9.3 with Nitro 2.8.1 

  ➜ Local:    http://localhost:3000/
  ➜ Network:  use --host to expose

  ➜ DevTools: press Shift + Alt + D in the browser (v1.0.8)       

ℹ Vite client warmed up in 3211ms                                 
ℹ Vite server warmed up in 3511ms                                 
✔ Nitro built in 1006 ms

6. If your build has succeeded, you will now see the Dev Container: dev-saasmvp notification in the lower left hand corner of VSCode. You can now develop, debug and test your SaaS MVP in real-time using your own isolated, reproducable Docker environment. When your development is complete, you can use GitHub Actions to deploy your Docker containers to the Internet using an IaaS.

7. You are now ready to develop, debug and test your SaaS MVP in VSCode. Docker has created four servers connected to an internal Docker network that is made available through localhost on your PC. VSCode is exposed to the dev-saasmvp-nuxtapp server for development.

saasmvp-framework Server Network

Server	Description	Address
dev-saasmvp-nuxtapp	Nuxt SaaS MVP Application (VSCode)	localhost:3000
saasmvp-nginx	Nginx Node Proxy Server	localhost (localhost:80)
saasmvp-mysql	MySQL Database	localhost:3306
saasmvp-adminer	MySQL Database Management Tool	localhost:8080

7. To close the connection to your Dev Container, press the F1 key in the terminal. Scroll down and select the command Remote: Close Remote Connection

TIP

Congratulations! You have a complete, working SaaS MVP development environment. Looking for a NO ASSEMBLY REQUIRED experience? Click here.