Struttura delle cartelle per l'app con Symfony 2, React, Webpack e Sass? [chiuso]

Question

Struttura delle cartelle per l'app con Symfony 2, React, Webpack e Sass? [chiuso]

#1 da (2 voti)

3

Sto creando un'app che utilizza alcuni componenti di Symfony2 insieme a React, Webpack e Sass. Principalmente codificheremo in PHP, con le altre cose aggiungendo funzionalità alla nostra app. Ho difficoltà a capire come creare la struttura della mia cartella.

Tieni presente che non voglio rendere un'app interamente dipendente da Symfony, ma un'app che utilizza solo parti di essa.

Ispirazione presa da Symfony, Html5 Boilerplate , e Ryan Florence .

root
├── app
│   ├── console
│   ├── cache
│   ├── config
│   ├── logs
│   └── Resources
│       └── views (Twig files)
│       └── sass
├── src
│   └── AppBundle
├── vendor (Composer dependencies)
│   └── phpUnit
├── components (Bower dependencies)
│   └── Foundation
└── web
    ├── css
    │   ├── main.css
    │   └── normalize.css
    ├── doc
    ├── img
    ├── js
    │   ├── config
    │   │   └── routes.js
    │   ├── screens
    │   │   └── App
    │   │       ├── components
    │   │       ├── screens
    │   │       │   ├── Admin
    │   │       │   │   ├── components
    │   │       │   │   ├── screens
    │   │       │   │   │   ├── Reports
    │   │       │   │   │   │   ├── components
    │   │       │   │   │   │   ├── stores
    │   │       │   │   │   │   │   └── ReportsStore.js
    │   │       │   │   │   │   └── index.js
    │   │       │   │   │   └── Users
    │   │       │   │   │       ├── components
    │   │       │   │   │       └── index.js
    │   │       │   │   ├── shared
    │   │       │   │   │   └── stores
    │   │       │   │   │       ├── AccountStore.js
    │   │       │   │   │       └── UserStore.js
    │   │       │   │   └── index.js
    │   │       ├── shared
    │   │       │   └── components
    │   │       │       ├── Avatar.js
    │   │       │       └── Icon.js
    │   │       └── index.js
    │   └── shared
    │       └── util
    │           └── createStore.js
    ├── index.js
    ├── .editorconfig
    ├── .htaccess
    ├── 404.html
    ├── apple-touch-icon.png
    ├── browserconfig.xml
    ├── index.html
    ├── humans.txt
    ├── robots.txt
    ├── crossdomain.xml
    ├── favicon.ico
    ├── tile-wide.png
    └── tile.png

Aggiornamento per rendere più chiara la domanda

Voglio avere un'app che utilizzi Symfony come back-end e React, Webpack, ecc. per il frontend. Voglio mantenere separati frontend e backend. Non sono totalmente contrario alla struttura delle cartelle suggerita da Symfony, ma usando il frontend e il backend non sono separati.

So che altre persone hanno creato app che usano Symfony ma la tengono completamente separata dal loro frontend. Quale struttura di cartelle altri suggeriscono e / o usano per rendere possibile la separazione del loro backend Symfony dal loro frontend?

Mi rendo conto che separare le dipendenze del tuo codice va oltre la semplice struttura delle cartelle, ma penso anche che sia piuttosto difficile averne una senza l'altra. Inoltre, solo guardando la struttura delle cartelle di un'altra persona che ha una separazione di successo mi verrà un'idea di come l'hanno fatto senza entrare nei dettagli.

javascript php web-applications directory-structure application-design

posta GreeKatrina 22.10.2015 - 23:22

fonte

1 risposta

Leggi altre domande sui tag javascript php web-applications directory-structure application-design

Qual è la definizione formale di un meta pacchetto? migliorare le capacità di comunicazione IM

score 2 · Accepted Answer

Please note that I don't want to make an app entirely dependent on Symfony, but an app that uses only parts of it.

Il mio suggerimento sarebbe quello di rendere l'applicazione Symfony2 un back-end RESTful indipendente. Costruisci il tuo fronte completamente separato.

Tuttavia, se si desidera combinare i due, probabilmente creerò una cartella sotto "app / Risorse", ad esempio, client. Metti il tuo js / scss lì. Un esempio approssimativo:

app/Resources/client/app.js
app/Resources/client/styles/*.scss
app/Resources/client/components/component1/main.js

Inserisci webpack.config.js nella cartella principale dell'applicazione Symfony2 insieme al tuo pacchetto.json. Fai in modo che il punto di accesso al tuo webpack sia nella cartella app / Risorse / client. Quindi la build di destinazione è qualcosa come "web / dist / app.bundle.js". Puoi quindi includerlo solo nell'app / Resources / layout.html.twig. Puoi anche avere più bundle se non è un'applicazione a singola pagina.

Abbiamo dovuto aggiungere in ritardo Backbone al nostro progetto Symfony2 già stabilito e questo è il modo in cui ci siamo avvicinati. Webpack e CommonJS erano un enorme aiuto per organizzare il nostro JavaScript e mantenere il nostro front-end organizzato e facile da implementare.

Ecco la nostra configurazione del pacchetto web. Puoi ignorare la sezione esterna visto che dovevamo aggiungerla a un progetto esistente, abbiamo deciso di caricare alcune librerie esternamente poiché erano già richieste.

var path = require('path');
var webpack = require('webpack');

var commonsPlugin = new webpack.optimize.CommonsChunkPlugin({
    name: 'common',
    filename: 'common.bundle.js'
});

var uglifyPlugin = new webpack.optimize.UglifyJsPlugin({
    compress: {
        warnings: false
    }
});

var providePlugin =
    new webpack.ProvidePlugin({
        Backbone: 'backbone'
});

var modulePlugins = [commonsPlugin, providePlugin];
if (process.env.NODE_ENV === 'prod') {
    modulePlugins.push(uglifyPlugin);
}

module.exports = {
  entry: {
    app: path.resolve(__dirname, 'app/Resources/modules/layout/app'),
    primers: path.resolve(__dirname, 'app/Resources/modules/primer/app'),
    // sample: path.resolve(__dirname, 'app/Resources/modules/sample/app'),
    cnv_batches: path.resolve(__dirname, 'app/Resources/modules/cnv/app_batches'),
    cnv_samples: path.resolve(__dirname, 'app/Resources/modules/cnv/app_samples'),
    ngs_batches: path.resolve(__dirname, 'app/Resources/modules/ngs/app_batches'),
    ngs_sample: path.resolve(__dirname, 'app/Resources/modules/sample/app_ngs'),
    sample_cnv: path.resolve(__dirname, 'app/Resources/modules/sample/app_cnv')
  },
  resolve: {
    root: path.resolve(__dirname, 'app/Resources/modules'),
    extensions: ['', '.js', '.css', '.scss', '.html']
  },
  output: {
    path: path.resolve(__dirname, 'web/dist'),
    filename: "[name].bundle.js"
  },
  module: {
    loaders: [
      { test: /\.js$/, exclude: /node_modules/, loader: 'babel' },
      { test: /\.css$/, loader: 'style!css' },
      { test: /\.scss$/, loader: 'style!css!sass' },
      { test: /\.html$/, loader: "underscore-template-loader" }
    ]
  },
  externals: {
    "jquery": "jQuery",
    "datatables": "$.fn.DataTable",
    "lodash": "_",
    "Routing": "Routing"
  },
  plugins: modulePlugins
};

Se potessi ricominciare, separerei totalmente i due e costruirò un'applicazione RESTful Syfmony2 completamente separata dal nostro front-end e questa è la mia raccomandazione definitiva se è una scelta.

Buona fortuna.