A Symfony hybrid app sharing state object with Twig, React and Vue
A Symfony project created on January 14, 2017, 9:23 am.
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 firstname.lastname@example.org:janit/symfony-hybrid-twig-react-vue.git
Open app in browser: http://localhost:8000
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 easiest way to work with TypeScript is use an editor which supports the language (such as PhpStorm, Visual Studio Code, etc...) out of the box, but otherwise you can also install the TypeScript compiler and do compilation manually:
npm i -g typescript src/AppBundle/Resources/public/js/typescript/ tsc app.ts
Background information to follow
As a bonus I will be adding example TypeScript Type Definitions for the example animation of how it is like to work with TypeScript and how you could benefit from using strong types in your front end development workflow.