Error 404 when try to access the URL manually

29
April 24, 2019, at 10:30 PM

I am new to web-development. When I run my project locally (webpack-dev-server) I can manually change url and see the particular component. So, locally, everything works fine, I added historyApiFallBack to my webpack config etc and it works just perfect.

But when I upload my build to web hosting and project goes online, I cannot change url manually like http://tizim.org.kz/about, or refresh. It gives me default 404 page of hosting. Below you can see my configurations and image that shows how application directory is managed.

Any relatable answers or suggestions would be extremely helpful. Thank you for your attention.

enter link description here

this is a pic of my project directory

server.js

const express = require("express");
const path = require("path");
const app = express();
app.use(express.static(path.join(__dirname, "build")));
app.get("*", (req, res) => {
  res.sendFile(path.join(__dirname, "build", "index.html"));
});
const port = process.env.PORT || 4444;
app.listen(port, () => console.log(`server running on port ${port}`));

webpack.config.js

const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
  entry: path.join(__dirname, "src", "index.js"),
  output: {
    path: path.join(__dirname, "build"),
    filename: "bundle.js",
    publicPath: "/"
  },

  devServer: {
    historyApiFallback:true
    },

  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: /\.(css|scss)$/,
        use: [
          MiniCssExtractPlugin.loader,
          "css-loader",
          "postcss-loader",
          "sass-loader"
        ]
      },
      {
        test: /\.(jpg|jpeg|png|gif|mp3|svg)$/,
        use: [
          {
            loader: "file-loader",
            options: {
              name: "[path][name]-[hash:8].[ext]"
            }
          }
        ]
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      filename: "index.html",
      template: path.join(__dirname, "src", "index.html")
    }),
    new MiniCssExtractPlugin({
      filename: "[name].css",
      chunkFilename: "[id].css"
    })
  ]
};

package.json

{
  "name": "webpack-babel-react-starter",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "devDependencies": {
    "@babel/core": "7.2.2",
    "@babel/plugin-proposal-class-properties": "7.2.3",
    "@babel/plugin-transform-runtime": "7.2.0",
    "@babel/preset-env": "7.2.3",
    "@babel/preset-react": "7.0.0",
    "autoprefixer": "9.4.3",
    "babel-loader": "8.0.4",
    "css-loader": "2.1.0",
    "file-loader": "3.0.1",
    "html-webpack-plugin": "3.2.0",
    "mini-css-extract-plugin": "0.5.0",
    "node-sass": "4.11.0",
    "postcss-loader": "3.0.0",
    "sass-loader": "7.1.0",
    "style-loader": "0.23.1",
    "webpack": "4.28.3",
    "webpack-cli": "3.1.2",
    "webpack-dev-server": "3.1.14"
  },
  "scripts": {
    "start": "node server.js",
    "dev": "webpack-dev-server --mode production --hot",
    "build": "webpack",
    "heroku-postbuild": "npm run build"
  },
  "dependencies": {
    "@babel/runtime": "7.2.0",
    "bootstrap": "^4.3.1",
    "react": "^16.8.6",
    "react-bootstrap": "^1.0.0-beta.8",
    "react-bootstrap-webpack": "^1.0.4",
    "react-dom": "^16.8.6",
    "react-router": "^5.0.0",
    "react-router-dom": "^4.3.1",
    "react-router-transition": "^1.3.0"
  },
  "browserslist": [
    "> 0.2%",
    "last 15 versions",
    "not dead"
  ]
}
READ ALSO
Nodejs OPENSSH - Error: read ECONNRESET at TCP.onStreamRead

Nodejs OPENSSH - Error: read ECONNRESET at TCP.onStreamRead

In one nodejs script, I am using openssh to execute dos command from one windows server to another remote windows server

69
Puppeteer: Open a page, get the data, go back to the previous page, enter a new page to get data

Puppeteer: Open a page, get the data, go back to the previous page, enter a new page to get data

Getting data from 1 page is simple, but how to go back after getting data from first page, enter a new page, get data from that pageetc

48
Nodemon and babel-node restart multiple times

Nodemon and babel-node restart multiple times

I'm using nodemon with babel-node in development environmentI'm working on Windows 7 and every time I change my code, nodemon restart multiple times

46
Why is my Promise returning undefined in main.js from a module export?

Why is my Promise returning undefined in main.js from a module export?

Trying to learn how to work with Promises and AsyncI can send an object to a module but for some reason I continue to get an undefined when processing the return

26