Vue Project Documentation

[One-Time] Required Dependencies

Install the following by using the steps given on the website for these applications:

[One-Time] Creating a project using Vue CLI

Open a terminal.
Type the following:
```
vue create vuetifyjs-template-project
```
Select the "Manually select features" option.
Choose Vue 2.X, Babel, Router, Linter, Unit Testing, and E2E Testing.
Select "Yes" for "Use history mode for router?"
Select "ESLint + Prettier" for "Pick a linter/ formatter config"
Select "Lint on save" for "Pick additional lint features"
Select "Mocha + Chai" for "Pick a unit testing solution"
Select "WebdriverIO" for "Pick an E2E testing solution"
Select "Chrome" and "Firefox" for "Pick browsers to run end-to-end test on"
Select "In dedicated config files" for "Where do you prefer placing config for ..."
Pick "Use NPM" for "Pick the package manager to use when installing dependencies"

[One-Time] Setup Vue project to run in Docker/Docker-Compose environment

Create a file named Dockerfile in the root directory of the Vue project.

FROM node:lts-alpine

# Create app directory
WORKDIR /app

# A wildcard is used to ensure both package.json AND package-lock.json are copied
# where available (npm@5+)
COPY package*.json ./

# Install app dependencies
RUN npm install

# If you are building your code for production
# RUN npm ci --only=production

# Bundle app source
COPY . .

EXPOSE 8080
CMD ["npm", "run", "serve"]

Create a file named docker-compose.yml in the root directory of the Vue project.

version: '3.9'

# Usage:
## Start up all services:
    ### docker-compose -f docker/docker-compose.yml up -d
    ## -f flag to specify the filename if filename is not docker-compose.yml or if it's not located in the current directory.
    ## -d flag is used to detach the container's output from the terminal so you can keep using the same terminal.
## Shutdown all services:
    ### docker-compose -f docker/docker-compose.yml down
    ## -f flag to specify the filename if filename is not docker-compose.yml or if it's not located in the current directory.
services:
# BACKUP MYSQL by generating dump file
    # docker exec CONTAINER-NAME mysqldump -u root --password=root DATABASE-NAME > backup.sql
# RESTORE MYSQL from dump file
    # docker exec -i CONTAINER-NAME mysql -u root --password=root DATABASE-NAME < backup.sql
db-node:
    container_name: db-node
    image: mysql:5.7
    restart: always
    command: --default-authentication-plugin=mysql_native_password
    env_file:
        - database.env
    ports:
    - target: 3306
        published: 3306
        protocol: tcp
        mode: host

phpmyadmin-node:
    depends_on:
    - db-node
    container_name: phpmyadmin-node
    image: phpmyadmin/phpmyadmin:5.0.0
    restart: always
    env_file:
     - database.env
     - phpmyadmin.env
    ports:
    - target: 80
        published: 8081
        protocol: tcp
        mode: host

app-node:
    depends_on:
    - db-node
    container_name: app-node
    build:
    context: .
    dockerfile: Dockerfile
    image: h1ddengames/vue-bootstrap-docker-node:1.0.0
    restart: always
    volumes:
    - ./:/app
    - /app/node_modules/
    ports:
    - target: 8080
        published: 8080
        protocol: tcp
        mode: host

Fix the formatting in Dockerfile and docker-compose.yml
Create two files named database.env and phpmyadmin.env

Add the following to database.env

MYSQL_ROOT_PASSWORD=YourPasswordHere
MYSQL_USER=YourNonRootDatabaseUsernameHere
MYSQL_PASSWORD=YourNonrootDatabaseUsersPasswordHere
MYSQL_DATABASE=NameOfYourInitialDatabaseHere

Example:

MYSQL_ROOT_PASSWORD=password
MYSQL_USER=db
MYSQL_PASSWORD=password
MYSQL_DATABASE=products

Add the following to phpmyadmin.env
```
PMA_HOST=db-node
PMA_PORT=3306
```

Create two files named database-example.env and phpmyadmin.env then add the following:

For database-example.env

# 0. DO NOT DIRECTLY MODIFY THIS FILE (database-example.env)
# 1. Create a copy of this file called database.env
# 2. Update each environment field below these lines.
# 3. Remove these comments (lines starting with '#')
MYSQL_ROOT_PASSWORD=
MYSQL_USER=
MYSQL_PASSWORD=
MYSQL_DATABASE=

For phpmyadmin-example.env

# 0. DO NOT DIRECTLY MODIFY THIS FILE (phpmyadmin-example.env)
# 1. Create a copy of this file called phpmyadmin.env
# 2. Update each environment field below these lines.
# 3. Remove these comments (lines starting with '#')
PMA_HOST=
PMA_PORT=

Add database.env and phpmyadmin.env to .gitignore

.DS_Store
node_modules
/dist


/tests/e2e/logs/

# local env files
.env.local
.env.*.local
database.env
phpmyadmin.env

# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*

# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

[Every time] Development in Docker container

Before starting development on this Vue application make sure that the Docker image created in the previous step Setup Vue project to run in Docker/Docker-Compose environment is running as a container.
If it is not running, open a terminal in the root directory of this project.
Run the following command:
```
docker-compose up -d
```
Wait for the container to start, then visit the development server
Once development is finished for the day, run the following command:
```
docker-compose down
```

h1ddengames/Vue Project Documentation.md

Vue Project Documentation

[One-Time] Required Dependencies

[One-Time] Creating a project using Vue CLI

[One-Time] Setup Vue project to run in Docker/Docker-Compose environment

[Every time] Development in Docker container