Tutoriel pour apprendre à mettre en place un flux infini Symfony-React

# config.yml
# Doctrine Configuration
doctrine:
    dbal:
        driver: pdo_pgsql
        host: '%database_host%'
        port: '%database_port%'
        dbname: '%database_name%'
        user: '%database_user%'
        password: '%database_password%'
        charset: UTF8
    orm:
        auto_generate_proxy_classes: '%kernel.debug%'
        naming_strategy: doctrine.orm.naming_strategy.underscore
        auto_mapping: true

# parameters.yml
parameters:
    database_host: '%env(POSTGRES_HOST)%'
    database_port: '%env(POSTGRES_PORT)%'
    database_name: '%env(POSTGRES_DB)%'
    database_user: '%env(POSTGRES_USER)%'
    database_password: '%env(POSTGRES_PASSWORD)%'
    secret: '%env(SECRET)%'

// .env
# PATH DIR
SYMFONY_APP_PATH=./
LOGS_DIR=./docker/logs

# DATABASE
POSTGRES_HOST=postgres
POSTGRES_DB=infinite
POSTGRES_USER=infinite
POSTGRES_PASSWORD=infinitepass
POSTGRES_PORT=5432

# PORT WEB
WEB_PORT=80

# SYMFONY
SECRET=d3e2fa9715287ba25b2d0fd41685ac031970f555

/nginx/Dockerfile
FROM debian:jessie

MAINTAINER Maxence POUTORD <maxence.poutord@gmail.com>

RUN apt-get update && apt-get install -y \
    nginx

ADD nginx.conf /etc/nginx/
ADD symfony.conf /etc/nginx/sites-available/

RUN ln -s /etc/nginx/sites-available/symfony.conf /etc/nginx/sites-enabled/symfony
RUN rm /etc/nginx/sites-enabled/default

RUN echo "upstream php-upstream { server php:9000; }" > /etc/nginx/conf.d/upstream.conf

RUN usermod -u 1000 www-data

CMD ["nginx"]

EXPOSE 80
EXPOSE 443

/php/Dockerfile
# See https://github.com/docker-library/php/blob/4677ca134fe48d20c820a19becb99198824d78e3/7.0/fpm/Dockerfile
FROM php:7.1-fpm

MAINTAINER Maxence POUTORD <maxence.poutord@gmail.com>

RUN apt-get update && apt-get install -y \
    git \
    unzip \
    zlib1g-dev \
    libpq-dev

# Install Composer
RUN curl -sS https://getcomposer.org/installer | php -- --install-dir=/usr/local/bin --filename=composer
RUN composer --version
RUN mkdir /var/www/.composer && chown -R www-data /var/www/.composer

# Set timezone
RUN rm /etc/localtime
RUN ln -s /usr/share/zoneinfo/Europe/Paris /etc/localtime
RUN "date"

# Type docker-php-ext-install to see available extensions
RUN docker-php-ext-install pdo pdo_pgsql zip

# install xdebug
RUN pecl install xdebug
RUN docker-php-ext-enable xdebug
RUN echo "error_reporting = E_ALL" >> /usr/local/etc/php/conf.d/docker-php-ext-xdebug.ini
RUN echo "display_startup_errors = On" >> /usr/local/etc/php/conf.d/docker-php-ext-xdebug.ini
RUN echo "display_errors = On" >> /usr/local/etc/php/conf.d/docker-php-ext-xdebug.ini
RUN echo "xdebug.remote_enable=1" >> /usr/local/etc/php/conf.d/docker-php-ext-xdebug.ini
RUN echo "xdebug.remote_connect_back=1" >> /usr/local/etc/php/conf.d/docker-php-ext-xdebug.ini
RUN echo "xdebug.idekey=\"PHPSTORM\"" >> /usr/local/etc/php/conf.d/docker-php-ext-xdebug.ini
RUN echo "xdebug.remote_port=9001" >> /usr/local/etc/php/conf.d/docker-php-ext-xdebug.ini

RUN echo 'alias sf3="php bin/console"' >> ~/.bashrc

RUN usermod -u 1000 www-data

WORKDIR /var/www/symfony

/node/Dockerfile
FROM node:8

RUN apt-get update && apt-get install -y \
    curl \
    apt-transport-https

RUN curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | apt-key add - && \
    echo "deb https://dl.yarnpkg.com/debian/ stable main" | tee /etc/apt/sources.list.d/yarn.list

RUN apt-get update && apt-get install yarn

WORKDIR /var/www/symfony

/nginx/ngin.conf
user www-data;
worker_processes 4;
pid /run/nginx.pid;

events {
  worker_connections  2048;
  multi_accept on;
  use epoll;
}

http {
  server_tokens off;
  sendfile on;
  tcp_nopush on;
  tcp_nodelay on;
  keepalive_timeout 15;
  types_hash_max_size 2048;
  include /etc/nginx/mime.types;
  default_type application/octet-stream;
  access_log off;
  error_log off;
  gzip on;
  gzip_disable "msie6";
  include /etc/nginx/conf.d/*.conf;
  include /etc/nginx/sites-enabled/*;
  open_file_cache max=100;
}

daemon off;

/nginx/symfony.conf
server {
    server_name infinite.dev;
    root /var/www/symfony/web;

    location / {
        try_files $uri @rewriteapp;
    }

    location @rewriteapp {
        rewrite ^(.*)$ /app.php/$1 last;
    }

    location ~ ^/(app|app_dev|config)\.php(/|$) {
        fastcgi_pass php-upstream;
        fastcgi_split_path_info ^(.+\.php)(/.*)$;
        include fastcgi_params;
        fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
        fastcgi_param HTTPS off;
    }

    error_log /var/log/nginx/symfony_error.log;
    access_log /var/log/nginx/symfony_access.log;
}

version: '2'

services:
    postgres:
        image: postgres:9.6
        ports:
            - ${POSTGRES_PORT}:5432
        volumes:
            - ./.data/pgdata:/var/lib/postgresql/data
        environment:
            POSTGRES_DB: ${POSTGRES_DB}
            POSTGRES_USER: ${POSTGRES_USER}
            POSTGRES_PASSWORD: ${POSTGRES_PASSWORD}
    php:
        build: docker/php7-fpm
        env_file: ./.env
        volumes:
            - ${SYMFONY_APP_PATH}:/var/www/symfony
        links:
            - postgres
    nginx:
        build: docker/nginx
        ports:
            - ${WEB_PORT}:80
        volumes_from:
            - php
        volumes:
            - ${LOGS_DIR}/nginx/:/var/log/nginx
    node:
        build: docker/node
        volumes:
            - ${SYMFONY_APP_PATH}:/var/www/symfony
        command: bash -c "yarn install && yarn watch"

{
  "name": "infinite",
  "version": "0.0.1",
  "engines": {
    "node": "6.x"
  },
  "private": true,
  "description": "Infinite flux",
  "main": "index.js",
  "scripts": {
    "build": "webpack --config app/config/webpack.config.js -p",
    "lint": "eslint src app/config --ext .js --ext .jsx",
    "lint:fix": "npm run lint -- --fix",
    "test": "jest",
    "test:coverage": "jest --coverage",
    "watch": "webpack --config app/config/webpack.config.js --devtool source-map --debug --watch --display-error-details",
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/captainjojo/infinite.git"
  },
  "bugs": {
    "url": "https://github.com/captainjojo/infinite/issues"
  },
  "homepage": "https://github.com/captainjojo/infinite#readme",
  "devDependencies": {
    "babel-core": "^6.14.0",
    "babel-jest": "^15.0.0",
    "babel-loader": "^6.2.5",
    "babel-preset-react": "^6.11.1",
    "eslint": "^3.2.0",
    "eslint-config-airbnb": "^10.0.1",
    "eslint-import-resolver-webpack": "^0.8.0",
    "eslint-plugin-import": "^1.14.0",
    "eslint-plugin-jsx-a11y": "^2.2.1",
    "eslint-plugin-react": "^6.2.0",
    "jest": "^18.0.0",
    "react-test-renderer": "^15.3.1"
  },
  "dependencies": {
    "babel-polyfill": "^6.16.0",
    "babel-preset-es2015": "^6.18.0",
    "clean-webpack-plugin": "^0.1.14",
    "lodash": "^4.15.0",
    "react": "^15.3.1",
    "react-dom": "^15.3.1",
    "react-redux": "^4.4.5",
    "redux": "^3.6.0",
    "redux-thunk": "^2.1.0",
    "release-it": "^2.5.1",
    "webpack": "^v2.2.0-rc.3",
    "whatwg-fetch": "^2.0.0"
  },
  "jest": {
    "cacheDirectory": "var/jest",
    "coverageDirectory": "build/coverage/jest",
    "moduleFileExtensions": [
      "js",
      "jsx"
    ],
    "transformIgnorePatterns": [
      "/node_modules/(?!o-.*)/"
    ],
    "moduleNameMapper": {
      "^actions(.*)": "<rootDir>/src/AppBundle/Resources/scripts/js/react/actions$1",
      "^components(.*)": "<rootDir>/src/AppBundle/Resources/scripts/js/react/components$1",
      "^containers(.*)": "<rootDir>/src/AppBundle/Resources/scripts/js/react/containers$1",
      "^helpers(.*)": "<rootDir>/src/AppBundle/Resources/scripts/js/helpers$1",
      "^lib(.*)": "<rootDir>/src/AppBundle/Resources/scripts/js/lib$1",
      "^reducers(.*)": "<rootDir>/src/AppBundle/Resources/scripts/js/react/reducers$1",
      "^store(.*)": "<rootDir>/src/AppBundle/Resources/scripts/js/react/store$1"
    },
    "testRegex": ".*.(test|spec).js[x]?$"
  }
}

{
    "presets": ["es2015", "react"]
}

---
    extends: "airbnb"
    env:
        node: true
        browser: true
        jest: true
    settings:
        import/resolver:
            webpack:
                config: 'app/config/webpack.config.js'

const _ = require('lodash');
const fs = require('fs');
const resolve = require('path').resolve;
const webpack = require('webpack');

const CleanWebpackPlugin = require('clean-webpack-plugin');

const env = process.env.NODE_ENV === 'prd' ? 'production' : 'development';
const root = `${__dirname}/../../`;
const paths = {
  assets: resolve(root, 'src/AppBundle/Resources/views/Assets/'),
  scripts: resolve(root, 'web/scripts/js'),
  context: resolve(root, 'src/AppBundle/Resources/scripts/js/'),
};

const manifestPlugin = (file, path) => ({
  apply: (compiler) => {
    compiler.plugin('done', (stats) => {
      fs.writeFileSync(
        resolve(path, file),
        JSON.stringify(
          _.mapValues(
            stats.toJson().assetsByChunkName,
            (chunk) => (env === 'development' ? chunk[0] : chunk)),
          null,
          '\t'
        )
      );
    });
  },
});

const config = {
  context: paths.context,
  entry: {
    /**
     * Contain all the vendors entries
     *
     * Vendors library (React, Lodash, ...)
     * Polyfills
     */
    vendor: [
      // Polyfills
      'core-js/es6/object',
      'core-js/es6/promise',
      'whatwg-fetch',

      // Vendors
      'lodash/isEqual',
      'react',
      'react-dom',
      'react-redux',
      'redux',
      'redux-thunk',
    ],
    /**
     * Each of the following entries represent the single entrypoints
     * for a given page type
     */
    home: [
      'entrypoints/latest_news_home.jsx',
    ],
  },
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules\/(?!o-.*)/,
        loader: 'babel-loader',
        query: {
          presets: ['react', ['es2015', { modules: false }]],
        },
      },
    ],
  },
  output: {
    filename: '[name].[chunkhash].js',
    path: paths.scripts,
  },
  performance: {
    hints: env === 'production' ? 'warning' : false,
  },
  plugins: [
    new webpack.optimize.CommonsChunkPlugin({
      names: ['vendor', 'inlined'],
      minChunks: Infinity,
    }),
    new CleanWebpackPlugin(['**'], {
      root: paths.scripts,
    }),
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: JSON.stringify(env),
      },
    }),
    manifestPlugin('manifest.json', resolve(root, 'var/webpack/')),
  ],
  resolve: {
    alias: {
      actions: 'react/actions',
      components: 'react/components',
      containers: 'react/containers',
      helpers: 'helpers',
      lib: 'lib',
      reducers: 'react/reducers',
      store: 'react/store',
    },
    extensions: ['.js', '.jsx'],
    modules: [
      'node_modules',
      './src/AppBundle/Resources/scripts/js',
    ],
  },
  target: 'web',
};

if (env === 'production') {
  config.plugins.push(
    new webpack.LoaderOptionsPlugin({
      minimize: true,
    })
  );
  config.plugins.push(
    new webpack.optimize.UglifyJsPlugin({
      minimize: true,
      compress: {
        negate_iife: true,
        unused: true,
        dead_code: true,
        drop_console: true,
        warnings: false,
      },
      output: { comments: false },
    })
  );
}

module.exports = config;

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';

import reducers from 'reducers';

export default function configureStore(initial) {
  return createStore(reducers, initial, applyMiddleware(thunk));
}

import { combineReducers } from 'redux';

import latestNews from './latest_news';

export default combineReducers({
  latestNews,
});

import actions from 'actions';

export default function latestNews(state = {}, action) {
  switch (action.type) {
    default:
      return state;
  }
}

import * as latestNews from './latest_news';

const actions = {
  latestNews,
};

export default actions;

import React, { Component, PropTypes } from 'react';
import { connect } from 'react-redux';

import actions from 'actions';

class LatestNewsHome extends Component {
  constructor() {
    super();
  }

  componentDidMount() {
  }

  render() {
    return (
      <div>Coucou</div>
    );
  }
}

LatestNewsHome.propTypes = {
};

const mapStateToProps = (state) => ({
});

export default connect(mapStateToProps)(LatestNewsHome);

import React from 'react';
import { render } from 'react-dom';
import { Provider } from 'react-redux';

import LatestNewsHome from 'containers/LatestNewsHome.jsx';
import configureStore from 'store';

const elements = {
  latest_news: document.getElementById('react-latest-news-home'),
};

// eslint-disable-next-line no-underscore-dangle
const store = configureStore(window.__INITIAL_STATE__);

const component = (
  <Provider store={store}>
    <LatestNewsHome />
  </Provider>
);

render(component, elements.latest_news);

{% extends 'base.html.twig' %}

{% block body %}
    <div id="react-latest-news-home" >
    <div>
{% endblock %}

{% block javascripts %}
{% endblock  %}

{% block stylesheets %}
{% endblock %}

<script src="http://infinite.dev/scripts/js/inlined.2d4b19e4578c3af04a03.js" defer></script>
<script src="http://infinite.dev/scripts/js/vendor.2d4b19e4578c3af04a03.js" defer></script>
<script src="http://infinite.dev/scripts/js/home.e428223280fc3028d63f.js" defer></script>

{% block javascripts %}
<script src="{{ asset('inlined.js', 'js') }}" defer></script>
<script src="{{ asset('vendor.js', 'js') }}" defer></script>
<script src="{{ asset('home.js', 'js') }}" defer></script>
{% endblock  %}

framework:
    #esi: ~
    #translator: { fallbacks: ['%locale%'] }
    secret: '%secret%'
    router:
        resource: '%kernel.project_dir%/app/config/routing.yml'
        strict_requirements: ~
    form: ~
    csrf_protection: ~
    validation: { enable_annotations: true }
    #serializer: { enable_annotations: true }
    templating:
        engines: ['twig']
    default_locale: '%locale%'
    trusted_hosts: ~
    session:
        # https://symfony.com/doc/current/reference/configuration/framework.html#handler-id
        handler_id: session.handler.native_file
        save_path: '%kernel.project_dir%/var/sessions/%kernel.environment%'
    fragments: ~
    http_method_override: true
    assets: ~
    php_errors:
        log: true
    assets:
        packages:
            js:
                base_urls: 'http://infinite.dev/scripts/js'
                version_strategy: 'app.assets.js.version_strategy'

services:
    app.assets.js.version_strategy:
        class: AppBundle\Service\VersionStrategy\JavascriptBusterVersionStrategy
        arguments:
            - '%kernel.root_dir%/../var/webpack/manifest.json'

<?php

namespace AppBundle\Service\VersionStrategy;

use Symfony\Component\Asset\VersionStrategy\VersionStrategyInterface;

class JavascriptBusterVersionStrategy implements VersionStrategyInterface
{
    /**
     * The manifest object containing for each entry
     * the filename containing the version.
     *
     * @var array
     */
    private $hashes = [];

    /**
     * The manifest file path.
     *
     * @var string
     */
    private $path;

    /**
     * @param string $path The manifest file path
     */
    public function __construct(string $path)
    {
        $this->path = $path;
    }

    /**
     * {@inheritdoc}
     */
    public function getVersion($asset): string
    {
        $this->ensureHashesLoaded();

        preg_match(
            // Matches pattern like 'vendor.67e29947398bcbf9b383.js'
            '/(?:.*)\.([[:alnum:]]*)\.js/',
            $this->hashes[$this->getEntryName($asset)] ?? '',
            $matches
        );

        return $matches[1] ?? '';
    }

    /**
     * {@inheritdoc}
     */
    public function applyVersion($asset): string
    {
        $this->ensureHashesLoaded();

        return $this->hashes[$this->getEntryName($asset)] ?? '';
    }

    /**
     * Return the manifest entry name for the given asset.
     *
     * @return string
     */
    private function getEntryName($path): string
    {
        // Replace pattern like 'vendor.js' into 'vendor'
        return preg_replace(
            '/(.*)\.js/',
            '$1',
            $path
        );
    }

    /**
     * Load hashes from manifest if needed.
     */
    private function ensureHashesLoaded()
    {
        if (empty($this->hashes)) {
            $this->hashes = json_decode(file_get_contents($this->path), true);
        }
    }
}

{% block javascripts %}
{% set initial_state = {latestNews: {}} %}
<script>window.__INITIAL_STATE__ = {{ initial_state|json_encode|raw }};</script>
<script src="{{ asset('inlined.js', 'js') }}" defer></script>
<script src="{{ asset('vendor.js', 'js') }}" defer></script>
<script src="{{ asset('home.js', 'js') }}" defer></script>
{% endblock  %}