3

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.

DevLoverUmar
  • 11,809
  • 11
  • 68
  • 98
Santosh
  • 581
  • 7
  • 17
  • Could you share what's in your `webpack.prod.js`? It's hard to know why the build isn't working without that info – JuanCaicedo Jun 30 '20 at 16:10
  • Hi @JuanCaicedo. Thank you for checking on my post. Could you please find the updated webpack.prod.js in the description (edited above). Kindly let me know if you need any additional information. – Santosh Jun 30 '20 at 16:34
  • What files do you expect to see in that `dist` directory? From what I can tell, getting only one js file is the correct behavior (all js files are combined into one bundle). Are there other files which are missing? – JuanCaicedo Jun 30 '20 at 21:41
  • If this is the correct behavior, I would like to know what am I missing to host it on S3 as a static website. When I add the bundle.js and bundle.map.js in the S3 bucket and make it publicly accessible. While trying to access the bucket path. There should an entry point or root file from where the app gets load, for instance in angular it's index.html. Likewise, how does that work here in reactjs. – Santosh Jul 02 '20 at 17:19

2 Answers2

2

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.

Daniele Ricci
  • 15,422
  • 1
  • 27
  • 55
  • Thank you for your suggestion @Daniele. While I was trying your suggestion, I am getting the below error. react-scripts start Could not find a required file. Name: index.js After searching in several places, I'm asking here. In the boilerplate code, index.js was in the ./src folder. While in my app, it's in the: src>apps>demo>index.js Appreciate your help on this. – Santosh Jun 30 '20 at 00:52
  • If the issue is just the path of the file @Santosh , you can just move it where create-react-app expects to find it. In other words it seems you are "wasting" your time trying to solve some problems which create-react-app already solved. If your target is to learn webpack, ok go on, youare not wasting but investing yuor time. If your target is to have a working react app, I strongly suggest you to rethink about your work. Take me as an example, I know nothing about webpack, but thanks to create-react-app I'm able to have a running (and building) new react app in 5 mins. Hope this helps. – Daniele Ricci Jul 03 '20 at 13:40
1

Just getting things working is not enough. You should go through a simple guide to setup things step-by-step like these

  1. creating-a-production-ready-webpack-4-config-from-scratch

  2. react-boilerplate using WebPack 4

And try some simple boilerplate projects before messing with a complex one like these

  1. react-boilerplate

  2. react-webpack-boilerplate

And yes starting with create-react-app is also good as suggested by @Daniele Ricci and You can use react-scripts eject to understand what's going on under the hood.

DevLoverUmar
  • 11,809
  • 11
  • 68
  • 98