A Symfony Flex hybrid app sharing state object with Twig, React and Vue
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.
$ git clone email@example.com:janit/symfony-hybrid-flex-port.git
Set local environment variables
$ cp .env.dist .env
$ composer install
Install front end build tools (You'll need to have Node, NPM and Yarn installed)
Build Stylesheets and the TypeScript app with Symfony Encore:
$ yarn run encore production
$ ./bin/console server:run
Open app in browser: http://localhost:8000
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
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
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.
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.
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