Front-end application for Todolist Web application built with Laravel and Vue.js

Todolist-frontend Application

The purpose of this repository is to consume API, provide by a Laravel Application, with the Vue.js JavaScript front-end framework.

Installation

Development environment requirements :

• Docker
• Docker Compose

Setting up your development environment on your local machine :

$ git clone https://github.com/guillaumebriday/todolist-frontend-vuejs.git
$ cd todolist-frontend-vuejs
$ docker-compose run --rm node npm install
$ docker-compose run --service-ports --rm node npm run hot

Useful commands

Building the app :

$ docker-compose run --rm node npm run dev

# Or

$ docker-compose run --rm node npm run watch

# Or

$ docker-compose run --rm node npm run production

Running ESLint :

$ docker-compose run --rm node npm run lint

Running tests :

$ docker-compose run --rm node npm run test

Broadcasting & WebSockets

Before using WebSockets, you need to set the PUSHER_APP_KEY key in your .env file.

You could generate a key on https://pusher.com/.

Deploy in production

You can serve your application with nginx in production. The configuration is very simple because it's only static files.

You can deploy this application with Ansible and Capistrano.

Just create an hosts file like the following one :

[webservers]
example.com

[all:vars]
ansible_python_interpreter=/usr/bin/python3

[webservers:vars]
app_url=example.com
base_url=http://example.com
pusher_app_key=a1b2c3d4

Setup your variables in the playbook.yml and in the config/deploy.rb files.

And then run :

$ ansible-playbook -i hosts playbook.yml

Now with Capistrano :

Before starting, change the configuration files with your informations, then run :

$ bundle install
$ cap production deploy

GitHub