voltra / slim-vue-app

A ready-to-start project (w/ demos) for applications written using Slim 4, Twig 3 and Vue 2

SLIM-VUE-APP

A ready-to-start project setup for the use of Slim 4, Vue 2 and Twig 3.

Discover the setup for yourself to see all the nice things available to you (a short description below).

Requirements

The following items are required in order to take advantage of this starter project :

• a bash-like environment (e.g. Git for Windows)
• PHP >= 7.2.0
• Composer installed globally (available from the command-line)
• Node >= 10.13.0
• NPM >= 6
• DBMate (and therefore go)

Setup

First and foremost, clone (or init from) this repo. You can also use the project template feature from Github.

In order to have a complete setup of your development environment, run :

npm run setup

It will first setup the CLI tools (e.g. DBMate), then the JS dependencies, then the PHP dependencies and finally the routes.

You also have a aliases.sh file that contains handy command aliases that you can setup (temporarily) using :

source aliases.sh

Then you will have to write your own .env file (see .env.example).

Then run :

dbmate up

It will create the DB (if needed) and apply all migrations.

What does it provide ?

CLI

A lot of NPM scripts to do various tasks such as :

• run tests independently
  • npm run test:php
  • npm run test:js
    • npm run test:e2e
    • npm run test:unit:js
• run all tests (npm run test)
• install the CLI tools
• etc..

It also provides CLI command aliases via the aliases.sh file that can be source'd.

It also integrates a framework agnostic DB migration tool: DBMate. It uses raw SQL statements for migrations and has a lot of useful features.

PHP

Because it uses composer, you have access to the whole variety of PHP libraries you can think of.

It comes with the following :

• Slim 4 which brings a lot of weird changes (thanks PSR15)
• Twig
• Laravel's DB component
• Laravel's pagination component
• PHP-DI which brings a lot of restriction due to PSR11
• Hassankhan's config
• A secure random (rng) library
• Session tools
• Flash messages
• Fig Cookies
• Whoops
• DotEnv
• PHPUnit
• PHP Mock (and extensions for PHPUnit)

It also comes with a bit of boilerplate already setup :

• Base DB migrations for a basic auth system
• Route filters
• CSRF middleware and extensions
• Server-side FS path utilities
• Actions for
  • Authentication
  • Cookies
  • CSRF
  • Flash messages
  • Hashing
  • POST validation
  • RNG
  • Response type promotion (PSR Response to Slim Response)
• "Automatic" config loading and setup of
  • .env and ENV variables
  • the app's config
  • the DB component
  • the actions
  • the container tools (twig, session, flash, etc...)
  • base middlewares
  • routes "autoload"

And a lot more to discover (such as PHPUnit setup)!

JS

Webpack is useful, popular, well developed and has a lot of tooling available. It has been my first choice and my only choice ever since.

This starter project provides the following :

• Webpack
• Babel
• Vue
• Sass
• Jest
• Cypress
• Useful bonus libraries

Webpack

It has been setup to handle JS, JSX, Vue, Sass, files, etc...

It also comes with the two powerful plugins :

• manifest plugin
• clean plugin

Babel

Everything has been setup to use Vue+JSX+JS+ES6 (and onward) including a few plugins :

• transform class properties
• transform do expressions
• transform function bind
• transform vue jsx
• helper vue jsx merge props
• etc...

Vue

It has been setup in a way that allows you to use Single File Components with JSX and Sass.

A few helpers (plugins, helpers, etc...) are ready to be used.

It also comes with vuex and vue-router

Sass

Just setup from webpack without any additional tooling but you can modify this as you wish.

Jest

Unit tests have configured to run on a Node environment with the correct files and ES6 (and onward) enabled thanks to babel-jest.

Cypress

E2E testing has grown more popular and is a very useful tool to ensure that every piece of functionality has been thoroughly and properly tested.

Useful bonus libraries

Some tools are just tooooo good to be ignored.

Sequency

Sequency is a collection manipulation library that relies on lazy evaluation to reduce computation costs.

This is a really handy tool if like me you like to write functional-ish code.

Compary

Comparison functions are always a bit tricky to write, this just makes the pain go away.

db.js

This is a library that abstract the indexedDB technology through a Promise based interface that is really enjoyable and actually makes it feasible to interact with the indexedDB.

store

This is a very lightweight wrapper around localStorage that is rather enjoyable.

spinner-lord

Loading can be expensive and long, why not display something to make the user wait in a good mood?

@voltra/json

A very basic wrapper around fetch that abstracts away all the pain of extracting/sending JSON via AJAX.

vanilla_flash

We have flash messages to display, we might as well make them look good ;D!

slim-vue-app's Issues

Request validation

Add a way to easily validate input via form requests

Error handling refactor

Some places use very "weird" logic to go around error handling, replace these with exceptions

Rewrite the README

Everything will change, the README should still reflect what is in this starter project

Add 2FA

• 2FA action
• 2FA scaffold
• wired with auth
• middleware for "requires 2FA"

Add redirect capability

• Allow routes to accept a redirect URI (avoids malicious redirects)
• Integrate in scaffoldings

Validate the whole thing

Once everything has been tested we can finally put everything in production

SSR

Add the ability to do SSR for Vue

Fix Issues w/ Selenium/Nightwatch

Nightwatch can't resolve the webdrivers if I don't use Selenium

Can't use Selenium (fails somewhere with sockets)

Emailing

Add the ability to write/send emails

Add implementation agnostic File System handler

league/flysystem

Revoke sessions on password change

session-driven invalidation :

• store the hash of the password in the session
• on auth, check the hash from the session is identical to the one in the DB
  • it is → can continue
  • it is not → force log out

Event-driven

Add the ability to trigger/respond to events easily (e.g. on User registration, send an email)

Error handler middleware

Add a way to handle generic exceptions (e.g. CsrfTokenMismatch or Invalid2FA) on a per type basis

Would it be a hassle to update it to Slim 4?

I noticed Slim 4 was released a while ago and I like Slim but I don't know if it'd break anything, for instance, in this project.-

Write the architecture and config files

The first part of going from v1.0.0 to v2.0.0 is to rewrite the config files and do a makeover of the architecture

Prototype test the whole thing

Once everything is reworked, we need to actually test it out to ensure everything works smoothly

Setup Error

I can only assume that golang is also required as I get this error:

npm run setup

> [email protected] setup /var/www/slim-vue
> npm run setupCLI && npm run setupJS && npm run setupPHP && npm run setupRoutes


> [email protected] setupCLI /var/www/slim-vue
> go get -u github.com/turnitin/dbmate

sh: 1: go: not found
npm ERR! file sh
npm ERR! code ELIFECYCLE
npm ERR! errno ENOENT
npm ERR! syscall spawn
npm ERR! [email protected] setupCLI: `go get -u github.com/turnitin/dbmate`
npm ERR! spawn ENOENT
npm ERR! 
npm ERR! Failed at the [email protected] setupCLI script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm WARN Local package.json exists, but node_modules missing, did you mean to install?

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/darkalchemy/.npm/_logs/2019-01-21T11_08_22_065Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] setup: `npm run setupCLI && npm run setupJS && npm run setupPHP && npm run setupRoutes`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] setup script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm WARN Local package.json exists, but node_modules missing, did you mean to install?

So other than fetching something is golang needed for anything else in your code?

Jobs

Add the ability to queue jobs

Add auth scaffold

• create routes
• create views
• create feature middlewares (to enable/disable features)

Docs

Add an actual documentation that explains every feature available

API Scaffolding

Add the API scaffolding that allows for decoupled/async front-end (e.g. dynamic 2FA)