How to embed ReactJS app into SharePoint add-in

Question

I'm really new to SharePoint add-ins and ReactJS, but I'm trying to make these two guys work together. What I have now is my ReactJS app and an empty SharePoint-hosted app as a standalone projects.

I followed this article and everything seemed to work fine until I decided to try something more complex (using react-route, redux, etc.). Then it stopped working (SharePoint just shows up nothing and there're no errors in devTool).

I guess that the problem is that I don't have react-router, redux, etc. dependencies present on my SharePoint site when deploying my app. And the question is how do I add all my dependencies (and should I?) to the bundle.js file (generated by webpack) so that I could just copy this bundle.js to SharePoint app and get it working? Or are there any other ways to do this?

P.S. Here's my webpack-config.js

module.exports = {
devtool: 'source-map',
entry: "./app.js",
mode: "development",
output: {
    filename: "./app-bundle.js"
},
module: {
    rules: [
        {
            test: /\.js$/,
            exclude: /node_modules/,
            use: {
                loader: 'babel-loader',
                options: {
                    presets: ['env', 'react']
                }
            }
        },
        {
            test: /\.css$/,
            loader: 'style-loader!css-loader'
        }
    ]
}

}

Please let me know if you need some additional info regarding project structure, configuration, etc.

Thanks!

Answer 1

Use Content editor and paste all the html element inside it. Then save the page and publish