moersoy / adonis-with-vue

Full Stack application made in TypeScript with AdonisJs and Vue.js, using monorepo

AdonisJS with Vue.Js

This is an example of an web application made with AdonisJS in Typescript with integrated frontend in Vue.js using Yarn monorepo. It is used version 5 of AdonisJS and Vue.Js in Typescript.

Provides a Web API and a SPA with autentication.

Based on Adonis Blog Demo

It is configured with:

• SQLite (for development and tests)
• AdonisJS Shield to protect from common web attacks
• ESLint and Prettier as code formatters to backend and frontend
• Axios as HTTP client for browser
• Vue Router for SPA navigation
• Vuex state management pattern
• Vuex Persist to local data storage

📝 Prerequisite

• Docker Compose it will provide all required dependencies (via a Node.Js container)

or without Docker:

• NodeJs
• Yarn
• PostgreSQL. You can use other database, making some adjustments.

🏁 Getting Started (with Docker)

Run in bash:

# Install dependencies
yarn install --frozen-lockfile

# Build containers and run it
docker-compose up -d

# Open container's bash
docker-compose exec app sh

# Command below is run inside container
# Create database for development
PGPASSWORD=postgres psql -U postgres -h postgres -p 5432 postgres -c 'CREATE DATABASE app_development;'

# Create databases for development
yarn backend node ace migration:run

# Starts and keeps running frontend and backend
yarn start

After that server will be running on localhost:5555

🏁 Getting Started (without Docker)

In this case, you must provide a database. Run in bash:

# Install dependencies
yarn install --frozen-lockfile

# Create databases for development
yarn backend node ace migration:run

# Keeps running and watching for changes
yarn start

After that server will be running on localhost:3333

🔧 Running frontend hot reload

Hot reload allow that view changes can reflects to browser instantly.

Run in bash:

yarn frontend start

🎈 Running coding style linting

Run in bash:

# Find coding style errors and report
yarn lint

# or

# Find coding style errors; try to fix, otherwise, report
yarn lint:fix

🔧 Running tests

Run in bash:

yarn test

⛓️ Environment variables

In file .env is all the needed environment variables of project. Is recommended to store in it only values used on development or testing.

To production publishing, is recommended to ignore it and use another way to load environment variables outside project directory or use AdonisJs default convention

Building a production package

The production build is a package optimized to increase the performance of the machines that will run it. Includes front-end and back-end. To build production package, run in bash:

yarn build

An folder called build will be created with package inside. To run in production, run in bash:

node server.js