Todolist-frontend Application

Frontend for https://github.com/guillaumebriday/todolist-backend-laravel app, built for a serie of articles on my blog.

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

Some of the tools used in this project

• Vue.js
• vue-router with Lazy Loading Routes
• vue-test-utils
• vuex
• axios
• moment.js
• Laravel Echo
• Webpack
• webpack-dev-server
• Tailwind CSS

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

More details

More details are available on my blog post : https://guillaumebriday.fr/laravel-vuejs-faire-une-todo-list-partie-1-presentation-et-objectifs (French).

Contributing

Do not hesitate to contribute to the project by adapting or adding features ! Bug reports or pull requests are welcome.

License

This project is released under the MIT license.