Folder structure for app with Symfony 2, React, Webpack, and Sass? [on hold]

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.