A media Web Project built upon Symfony & vue.js for your next website or application. The Symfony Framework is minimally tuned, routing includes a REST interface for accessing your AWS S3 Bucket, a Glide Cloud Image Server, and a modern vue.js boilerplate for the frontend client. Get your next project up and running with SymVue, a minimal base to start developing with vue.js.

The beauty of Symfony and vue.js together is a clear abstraction between view and controller. On a recent photography website we needed to display high-resolution picture albums. New albums would frequently be added in their original size, however on the website we needed to display resized versions.

Our solution is built on hosting images in an AWS S3 Bucket, and processing the images server-side with PHP. From the Bucket the images are retrieved through a cloud filesystem interface, processed with the defined size formats, then stored locally on the server.

The frontend client lets the Symfony controller handle loading the image. No need to require these assets with webpack! Simply do a get request to the albums endpoint, and the resulting JSON includes the image paths.

• Symfony
• Flysystem
• Glide
• Webpack-Encore
• vue.js
• vue-router
• axios

Also includes a vue-bootstrap demo website with vue-fontawesome to demonstrate the routes, data getters and to help get the project started.

http://symvue.jameshcooper.com - IMDB Movie App

1. cd /var/www
2. git clone .
3. once cloned, the project is ready for edits and to fetch our dependencies
4. rename .env.example to .env.local
5. edit .env and .env.local give your app a name and generate an image signing key
6. composer install --no-dev fetches the php packages
7. yarn fetches the js modules
8. yarn dev starts the client with 'hot reloading'

Please visit http://symvue.jameshcooper.com/ for your new project.

My website is http://symvue.jameshcooper.com/

The web server root on the filesystem is /var/www/public/

The SymVue project root needs to reside out of the web server root e.g. /var/www

http://symvue.jameshcooper.com/ serves /var/www/public/index.php

For more information see Symfony - Configuring a Web Server

1. On AWS S3, create a private S3 bucket

2. Next create an AWS IAM user with access to the bucket

3. Edit .env.local with your AWS credentials -

AWS_BUCKET=mybucket
AWS_REGION=eu-west-2
AWS_KEY=mykey
AWS_SECRET=mysecret

4. In the bucket create a directory per album, and upload images into each directory.

There are three controllers which serve the routes.

1. VueController: Renders the Frontend Client with its own page router.

[GET] / 
[GET] /all-routes-load-our-client

2. APIController - Queries a directory in the S3 Bucket

[GET] /api/album/directory_name

3. ImageController - Serves the image

[GET] /img/directory_name/image.jpgp=small&s=3bab352a1e50f1861c78b63e9ddbe7ba

Image parameters -

p: Preset
s: Signature

Included are presets for a few different sized images. Resizing is based on the images width and the canvas proportions are kept intact. Please edit src/Server/ImageServer.php to extend the presets.

Presets are incredibly powerful and can flip, crop, watermark and add effects to the images. Please see the Glide API for more information.

[GET] http://symvue.jameshcooper.com/api/album/tt1109624/all

200

Content-Type: application/json

[
  {
    "name": "my-original-image.jpg",
    "path": {
      "small": "/img/myalbum/my-original-image.jpg?p=small&s=4c7c6505319f045c4ee6965a391e59ed",
      "medium": "/img/myalbum/my-original-image.jpg?p=medium&s=f277f843ca5ee128ef3ce2eecba4a185",
      "large": "/img/myalbum/my-original-image.jpg?p=large&s=3bab352a1e50f1861c78b63e9ddbe7ba"
    }
  },
  {
    "name": "next-image.jpg",
    "path": {
      "small": "/img/myalbum/next-image.jpg?p=small&s=50a4d12d7460563234155d23a3e875c6",
      "medium": "/img/myalbum/next-image.jpg?p=medium&s=fe5e5ed8dd000580dda03984ab81623d",
      "large": "/img/myalbum/next-image.jpg?p=large&s=8dcc79f8da01c185b21e874f944d08b0"
    }
  },
]

Please create your application in 'client/'

Please see 'client/router/pages/MyApp_Album.vue'

Please add to 'client/router/pages/'

Please edit 'client/router/index.js'

Edit client/plugins/axios.js

The my_app instance is for accessing our SymVue REST. Additional endpoints can be added here.

If you need to connect to a different API, please create a new instance of Axios and update the baseURL -

const imdb_api = axios.create({
  baseURL: "http://omdbapi.com/"
});

yarn dev starts the client with 'hot reloading'

While developing if you make a change in a .vue file, there's no need to refresh the page.

Coupled with Chrome's Vue.js devtools extension, projects are a lot of fun to develop!

If you develop in a local environment, SymVue is easy to deploy to a production server.

1. yarn prod to compile assets on local
2. commit into git and pull on production
3. create a seperate .env.local on production, ensure APP_ENV=prod
4. composer install --no-dev --optimize-autoloader on production

Once Symfony is installed on production, SymVue can be extended in order for frontend client updates to be pushed as a separate process.

• Add public/build to the .gitignore
• Edit webpack.config.js to include a CDN public path

If you use Bitbucket or AWS Codedeploy, please see appspec.yml to launch in 1-Click to an AWS EC2 instance. Please see the 'config/scripts' directory for a few example Docker scripts.

• HTTP server including nginx, apache or caddy
• PHP7 with GD or ImageMagick
• Composer
• npm or yarn

• AWS S3, or S3 compatible