Git Product home page Git Product logo

api-vue-boilerplate's Introduction

My API App Boilerplate

Ready-to-use Dockerized API app structure powered by:

  • Symfony 4.1
  • API Platform 2 (+ swagger for API documentation)
  • VueJS + Vuex client structure
  • Frontend toolkit (Webpack ready: SCSS, Icons/SVG sprites)
  • Full docker stack with PHP 7.2 fpm + nginx, node, varnish
  • JWT-Ready with login implementation

Clone, Build, Enjoy.

Usage

$ . aliases.sh
[api] $ stack up -d

Install

Create and edit an .env file:

$ cp .env.dist .env
$ . aliases.sh
[api] $ stack up -d
[api] $ composer install -o
[api] $ npm install && npm run dev

Visit http://localhost and start coding! (the varnish-cached version is on http://localhost:81)

Upcoming/TODO features

  • JWT-ready (with login form demo)
  • Better http component (ie: understand api-platform responses)
  • Form validation component (sync with validation from api-platform)
  • self-signed HTTPS ?
  • CLI aliases
  • Xdebug install option ?
  • Demo component with Greeting model

How to use/customize

Suggested browser extensions

PHPStorm Plugins

  • Symfony
  • .env files support
  • VueJS

Command Line Aliases

You have to source the aliases.sh file before using these aliases (on your host computer).

  • stack: shortcut to docker-compose (ex: stack up -d)
  • php: runs php in the container (ex: php -i)
  • npm: runs npm in the container (ex: npm --version)
  • console: runs the symfony console in the container (ex: console ca:cl)
  • cli: enters the PHP CLI
  • composer: runs composer in the container (ex: composer install -o)
  • errorlog: tails the httpd (nginx) error log
  • accesslog: tails the httpd (nginx) access log
  • phplog: tails the PHP-FPM error log

API Endpoint

  • Swagger/API doc is available at the API root: http://localhost/api
  • You can change the API root url by changing the prefix in config/routes/api_platform.yaml

translations

  • Translation files are shared with Symfony4
  • Translations are stored in assets/translations in JSON format
  • Add a new locale in assets/vue/main.js:
import messagesEN from '../translations/messages.en.json'

// ...

const i18n = new VueI18n({
  locale: locale,
  fallbackLocale: 'fr',
  messages: {
    fr: messagesFR,
    en: messagesEN
  }
});

use in vue components:

<template>
    <h1>{{ $t('app.welcome_msg') }}</h1>
</template>

use in twig/symfony:

<h1>{{ 'app.welcome_msg'|trans }}</h1>

api-vue-boilerplate's People

Contributors

neiluj avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.