bocadillo-vue-example

URL Shortener web app built with Bocadillo and Vue.js.

Project structure

• server/: a REST API server built with Bocadillo, including orm for data validation and database storage, and hashids for URL hash generation.
• frontend/: a Single-Page Application built with Vue.js, Vue Router and Bulma.

Install

You will need Python 3.6+ and Node.js.

Backend

python -m venv venv
source venv/bin/activate
pip install -r requirements.txt

Frontend

Run cd frontend first, then:

npm install

Database

Database support is provided by Databases, and dependencies for PostgreSQL and SQLite are installed by default (see requirements.txt).

However, note that the backend connects to the database via a DATABASE_URL, so it is database-agnostic.

You can provide the DATABASE_URL via an environment variable, or in a .env file located at the project root directory, e.g.:

# PostgreSQL:
DATABASE_URL="postgresql://localhost:5432/urlshortener"

# OR, for SQLite:
DATABASE_URL="sqlite:///sqlite.db"

Quickstart

Start the Bocadillo backend app from the project root directory using:

uvicorn server.asgi:app

It will be running at http://localhost:8000.

In another terminal, run cd frontend and then start the Vue frontend using:

npm start

You can access it at http://localhost:8080.

Happy URL shortening!

License

MIT