3

I am creating an app that uses some components of Symfony2 along with React, Webpack and Sass. We will mostly code in PHP, with the other things adding functionality to our app. I'm having a hard time figuring out how to make my folder structure.

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

Inspiration taken from Symfony, Html5 Boilerplate, and 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

Update to make question more clear

I want to have an app that uses Symfony as the backend and React, Webpack, etc. for the frontend. I want to keep the frontend and backend separated. I am not totally against Symfony's suggested folder structure, but by using it, the frontend and backend are not separated.

I know that other people have made apps that use Symfony but keep it completely separate from their frontend. What folder structure do others suggest and/or use to make separating their Symfony backend from their frontend possible?

I do realize that separating the dependencies of your code goes beyond just the folder structure, but I also think it's rather difficult to have one without the other. Also, just looking at another person's folder structure that has successful separation will give me an idea of how they did that without going into lengthy detail.

closed as unclear what you're asking by amon, user22815, GlenH7, user40980, durron597 Oct 24 '15 at 21:28

Please clarify your specific problem or add additional details to highlight exactly what you need. As it's currently written, it’s hard to tell exactly what you're asking. See the How to Ask page for help clarifying this question. If this question can be reworded to fit the rules in the help center, please edit the question.

2

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

My suggestion would be to make your Symfony2 application an independent RESTful back end. Build your front entirely separate.

However if you wish to combine the two, I would probably make a folder under "app/Resources", eg, client. Put your js/scss in there. A rough example:

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

Put webpack.config.js in the root folder of the Symfony2 application along with your package.json. Have your webpack entry point to the app/Resources/client folder. Then have the target build to something like "web/dist/app.bundle.js". You can then just include that in app/Resources/layout.html.twig. You can even have multiple bundles if it's not a single page application.

We had to add in Backbone late to our already established Symfony2 project and this is how we approached it. Webpack and CommonJS were a HUGE help to organizing our JavaScript and keeping our front end code organized and easy to deploy.

Here is our webpack config. You can ignore the externals section since we had to add this to an existing project we decided to load certain libraries externally since they were already being required.

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
};

If I could start over I would totally separate the two and build a RESTful Syfmony2 application completely separate from our front-end and that is my ultimate recommendation if it's a choice.

Good luck.

  • I'm very new to Symfony, but is keeping the js files in the app/Resources/ directory keeping it separate from Symfony? Or is that combining the two? – GreeKatrina Oct 23 '15 at 14:00
  • That would be combining the two. – Hines Bourne Oct 23 '15 at 16:33
  • okay, that's what I thought. So, the folder structure I suggested would be separating them, or no? If not, could you provide an example that would separate them? (I realize that separation requires more than just your folder structure) – GreeKatrina Oct 23 '15 at 18:05
  • 1
    Basically separate would mean that your Symfony2 application would just be a normal Symfony app. It would not contain a front-end at all. It would just output JSON and accept JSON. Using the FOSRestBundle would make it pretty straight forward. Your front end using React would be totally independent and live in its own isolated folder structure. It would just most likely AJAX calls to your Symfony2 REST API. They could be on the same server or even separate servers. They'd be totally independent of one another. This is a very common modern development practice nowadays. – Hines Bourne Oct 26 '15 at 17:39
  • Symfony Encore is another approach from the Symfony foks – Acyra Sep 12 '17 at 10:58

Not the answer you're looking for? Browse other questions tagged or ask your own question.