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.

You will need Python 3.6+ and Node.js.

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

Run cd frontend first, then:

npm install

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"

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!

MIT