Netlify accessing index.html from src but not from dist folder

I have a react app build in webpack and deployed after generating the build into /dist folder. In local build I can see the below folder structure
image
But when I deploy the build to netlify drop pane, I don’t see the assets folder.

image

I assume it is taking the index.html from my src/ when rendering the content instead of index.html in dist because of which **

images are not loading in the app

**.

Here’s my webpack.config.js

const path = require("path");
const webpack = require("webpack");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const CopyPlugin = require("copy-webpack-plugin");

module.exports = {
    entry: ["./src/index.js", "@babel/polyfill"],
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: ["babel-loader"],
            },
            {
                test: /\.css$/i,
                exclude: /node_modules/,
                use: [
                    "style-loader",
                    {
                        loader: "css-loader",
                        options: {
                            modules: true,
                        },
                    },
                ],
            },
            {
                test: /\.(jpe?g|gif|png|svg)$/i,
                use: [
                    {
                        loader: "url-loader",
                        options: {
                            limit: 10000,
                        },
                    },
                ],
            },
            {
                test: /\.(gif|png|jpe?g)$/,
                use: [
                    {
                        loader: "file-loader",
                        options: {
                            name: "[name].[ext]",
                            outputPath: "assets/images/",
                        },
                    },
                ],
            },
        ],
        // loaders: [{ test: /\.jsx?$/, loader: 'babel' }],
    },
    devServer: {
        host: "192.168.1.10", //your ip address,
        // host: '0.0.0.0', //your ip address,
        historyApiFallback: true,
        contentBase: "././src",
        port: 8080,
        disableHostCheck: true,
    },
    resolve: {
        extensions: ["*", ".js", ".jsx"],
    },
    output: {
        path: path.join(__dirname, "/dist"),
        filename: "bundle.js",
        publicPath: "/",
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new HtmlWebpackPlugin({
            template: path.resolve("./dist/index.html"),
        }),
        new CopyPlugin({
            patterns: [
                {
                    from: path.resolve(__dirname, "/src/assets/images"),
                    to: path.resolve(__dirname, "dist"),
                },
            ],
        }),
    ],
    devServer: {
        // contentBase: './dist',
        contentBase: "./build",
        hot: true,
    },
};

Here’s a stackoverflow link for the same issue

Please guide…

@sg19repos,

Are you zipping up just your ‘dist/’ folder when deploying your site via netlify drop? You’ll want to make sure that you aren’t dragging you ‘src/’ or project root folder by mistake.

1 Like

That’s it. That’s what I’m doing, generating a build and dropping the entire project including build + src into Netlify drop. Now it I changed it and is working fine. Thanks for the quick help.

I wish it was mentioned some where in the FAQs. Because I see this one confusing -

image

which states to drop entire site folder rather than the build folder, when netlify is not going to build it.
It would help someone with my knowledge level if it’s mentioned somewhat more clearly :grinning:

It is a great tool, at the same time please try to add some more steps and examples links/gifs as to how to use the Netlify drop.
Sorry, if it’s already mentioned somewhere and I missed it

glad you got that working, @sg19repos! We’ll talk internally if there is a way to make this more clear.