Reactjs - /dist folder has only 2 files - bundle.js and bundle.js.map - doesn't include any other files

Question

I have a reactjs app - which is running well in dev environment. I mean, when I use

npm start

It's running in localhost:8080 without any issues.

When I try to execute the same with below command, to generate a distribution folder for static hosting, somewhere in AWS S3. That's where the problem.

npm run build

Below is my output folder structure when I execute the above command:

dist

• bundle.js
• bundle.js.map

public

• index.html

I have gone through these posts (regarding warning which I'm getting related to bundle.js file sizes & this link) and did modify as per the suggestion, but I haven't got the desired outcome.

Below is my package.json for reference:

{
  "name": "react-starter",
  "version": "1.1.5",
  "description": "example",
  "main": "dist/bundle.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack-dev-server --config ./webpack.dev.js",
    "build": "webpack --max_old_space_size=4096 --config ./webpack.prod.js --progress --profile --colors"
  },
  "homepage": ".",
  "keywords": [
    "react"
  ],
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-core": "^6.26.3",
    "babel-eslint": "^10.0.2",
    "babel-loader": "^7.1.5",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-plugin-transform-object-rest-spread": "^6.26.0",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "^6.24.1",
    "clean-webpack-plugin": "^0.1.19",
    "css-loader": "^3.2.0",
    "dotenv": "^6.2.0",
    "eslint": "^5.16.0",
    "eslint-config-airbnb": "^17.1.0",
    "eslint-plugin-import": "^2.17.3",
    "eslint-plugin-jsx-a11y": "^6.2.1",
    "eslint-plugin-react": "^7.13.0",
    "eslint-plugin-react-hooks": "^1.6.0",
    "file-loader": "^1.1.11",
    "node-sass": "^4.12.0",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.21.0",
    "stylelint": "^9.10.1",
    "stylelint-config-standard": "^18.3.0",
    "uglifyjs-webpack-plugin": "^2.1.3",
    "webpack": "^4.34.0",
    "webpack-cli": "^3.3.4",
    "webpack-dev-server": "^3.7.1",
    "webpack-merge": "^4.1.4"
  },
  "dependencies": {
    "bootstrap": "^4.3.1",
    "i18next": "^16.0.0",
    "i18next-browser-languagedetector": "^3.0.1",
    "konva": "^2.5.1",
    "normalizr": "^3.4.0",
    "prop-types": "^15.7.2",
    "react-hot-loader": "^4.11.1",
    "react-i18next": "^10.11.1",
    "react-icons": "^3.7.0",
    "react-konva": "^16.8.6",
    "react-player": "^1.11.1",
    "react-scroll": "^1.7.12",
    "reactstrap": "^6.5.0"
  },
  "peerDependencies": {
    "react": "^16.8.6",
    "react-dom": "^16.8.6"
  }
}

webpack.prod.js is below:

const path = require('path');
const merge = require('webpack-merge');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const common = require('./webpack.common.js');

module.exports = merge(common, {
    entry: 'apps/index.js',
    mode: 'production',
    devtool: 'source-map',
    output: {
        path: path.resolve(__dirname, 'dist/'),
        publicPath: '/dist/',
        filename: 'bundle.js',
        libraryTarget: 'commonjs2',
    },
    plugins: [
        new CleanWebpackPlugin(['dist/*.*']),
    ],
    externals: {
        react: 'react',
        'react-dom': 'react-dom',
    },
});

I also noticed some deprecations in the library which I'm trying to integrate with. I've installed the missing peer dependencies. I've reported the issues with the library here. I believe to upload it to S3, we should have all necessary files in the dist or public folder along with index.html which would be added as a prefix in S3 from where the app gets the entry point.

Any help on this would be highly appreciated. Also, I would be ready to provide any additional information.

Answer 1

Looking at your package.json file it seems you haven't used create-react-app.

I suggest to simply create a new React.js app using it and copy the content of your app in the newly created. It's easy and it works.

Hope this helps.