Skip to content

janit/symfony-hybrid-flex-port

Repository files navigation

A Symfony Flex hybrid app sharing state object with Twig, React and Vue

NOTE: This is a port of the original app from Symfony 3 to Symfony Flex. Details in article: Porting a Symfony 3 application to Flex

This is a sample app that provides a working example concept of simply sharing a state object between the Twig template rendering engine as well as JavaScript view layers Vue and React.

This introduces no complexity of server side rendering for decent performance, but SSR can be done as an enhancement for improved performance and SEO: Introduction to React.js Components and Server Side Rendering in PHP, Testing React.js isomorphic rendering with php-v8js and the Symfony Microkernel

This will just handle the sharing of initial state on page load and you'll need to then take over your state management in your front end using some kind of tools for that, e.g. MobX, Redux. There is also a simple API backend that also returns the same object and keeps things predictable for developers.

The application comes complete with an SQLite database and built JavaScript clients to keep overhead of installation minimal. The application itself is simple enough to figure out with basic understanding of OO PHP and Symfony, so it's better just to take a look for yourself to see if this feels like a good idea or not.

Installation

Clone app:

$ git clone [email protected]:janit/symfony-hybrid-flex-port.git

Set local environment variables

$ cp .env.dist .env

Install dependencies:

$ composer install

Install front end build tools (You'll need to have Node, NPM and Yarn installed)

$ yarn

Build Stylesheets and the TypeScript app with Symfony Encore:

$ yarn run encore production

Run:

$ ./bin/console server:run

Open app in browser: http://localhost:8000

Docker installation

There is a Docker-compose setup included that runs PHP-FPM and Nginx web server. It is based on this example from Kevin Dunglas and was used for some PHP 7.1 vs 7.2 benchmarks.

Currently the installation requires that you build the front end assets with Symfony Encore manually, but once this is done you should be able to boot the environment with Docker Compose:

$ docker-compose up

The app will be available at http://localhost:8086

GraphQL API

In an update to the application there was an addition to the application that provides support for a GraphQL API using the Overblog GraphQL bundle.

In development mode the GraphiQL client is available in the URL http://localhost:8000/graphiql and there are two endpoints created:

  • apartment(id: Int): Apartment
  • apartment_list(limit: Int): ApartmentList

You can learn more about the process of adding GraphQL in this article: Adding a GraphQL API to your Symfony Flex application

JavaScript builds

There are three separate client implementations included, React, Vue.js and Vanilla JavaScript (via TypeScript). If you want to try modifications to the behaviour of the clients you'll need to do some build setup:

Vue.js

No Vue there is build process, just start editing src/AppBundle/Resources/public/js/vue/app.js. Note that example uses some the ES6+ syntax is not supported natively everywhere, so you'll need an up-to-date browser.

React

The React app is built using nwb, a fast way to get started with contemporary (as of February 2017) JavaScript builds.

Install nwb globally:

$ npm install -g nwb

Enter directory and run build:

$ cd src/AppBundle/Resources/public/js/react
$ react build app.js

The built filename changes by default, so unless you tweak config, you'll need to edit app/Resources/views/base.html.twig to the current one.

JavaScript / TypeScript

The vanilla JavaScript app is written in TypeScript, which adds type information and some other syntax on top of the JavaScript language.

The build of the TypeScript app is now done using Symfony Encore. You can use the dev mode with watch for automatic builds when developing:

$ ./node_modules/.bin/encore dev --watch

Note: You can also use Encore to run Webpack dev server for live reloads, etc. More information in the Symfony documentation: Using webpack-dev-server and HMR