Как настроить приложение реагирования с веб-пакетом для отправки запросов API на сервер express - PullRequest
0 голосов
/ 15 марта 2020

Я создал реагирующее веб-приложение. Он хорошо работал на настольных компьютерах, но на мобильных устройствах он действительно замедлялся. Поэтому после прочтения о том, как улучшить производительность, я нашел веб-пакет, который поможет мне связать код и сократить время загрузки. Я решил попробовать и начал внедрять его в свое уже работающее приложение. После того, как код скомпилирован, я теперь могу видеть содержимое в браузере локально, но взаимодействие с моим сервером узлов (запущенным в порту 3001) облажается. Каждый вызов Ax ios в мою базу данных / GraphQl / сервер возвращает ответ 404 (все вызовы со стороны клиента: http://localhost: 8080 / auth / login ). Я не думаю, что мой «прокси»: «http://localhost: 3001 / » в пакете клиента. json больше не имеет ничего общего с моим приложением реакции. Итак, как я могу настроить webpack, чтобы мой Api вызывал go на сервер вместо webpack-dev-server в порту 8080? Все звонки, сделанные с почтальоном, работают нормально, но не отреагировали. Заранее спасибо

пакет. json

{
    "name": "pet-grooming-platform",
    "version": "0.1.0",
    "private": true,
    "proxy": "http://localhost:3001/",
    "dependencies": {
        "@babel/runtime": "^7.8.4",
        "@fortawesome/fontawesome-free": "^5.12.1",
        "@stripe/react-stripe-js": "^1.0.3",
        "@stripe/stripe-js": "^1.0.2",
        "apollo-boost": "^0.4.7",
        "apollo-client": "^2.6.8",
        "axios": "^0.19.2",
        "graphql": "^14.6.0",
        "graphql-tag": "^2.10.3",
        "jsonwebtoken": "^8.5.1",
        "lodash": "^4.17.15",
        "moment": "^2.24.0",
        "react": "^16.12.0",
        "react-apollo": "^3.1.3",
        "react-big-calendar": "^0.23.0",
        "react-datepicker": "^2.12.0",
        "react-dom": "^16.6.3",
        "react-reveal": "^1.2.2",
        "react-router-dom": "^5.1.2",
        "react-scripts": "^3.4.0",
        "react-select": "^3.0.8",
        "react-stripe-checkout": "^2.6.3",
        "react-table-6": "^6.11.0",
        "react-table-v6": "^6.8.6",
        "react-toastify": "^5.5.0",
        "reactstrap": "^8.4.1"
    },
    "scripts": {
        "start": "webpack-dev-server --mode development --open --hot",
        "build": "webpack --mode production",
        "test": "react-scripts test --env=jsdom",
        "eject": "react-scripts eject"
    },
    "browserslist": [
        ">0.2%",
        "not dead",
        "not ie <= 11",
        "not op_mini all"
    ],
    "devDependencies": {
        "@babel/core": "^7.8.7",
        "@babel/plugin-proposal-class-properties": "^7.8.3",
        "@babel/polyfill": "^7.8.7",
        "@babel/preset-env": "^7.8.7",
        "@babel/preset-react": "^7.8.3",
        "babel-loader": "^8.0.6",
        "css-loader": "^3.4.2",
        "eslint-plugin-flowtype": "^4.6.0",
        "fibers": "^4.0.2",
        "file-loader": "^5.1.0",
        "html-loader": "^0.5.5",
        "html-webpack-plugin": "^3.2.0",
        "i": "^0.3.6",
        "node-sass": "^4.13.1",
        "npm": "^6.14.2",
        "sass": "^1.26.3",
        "sass-loader": "^8.0.2",
        "typescript": "^3.8.3",
        "webpack": "^4.42.0",
        "webpack-cli": "^3.3.11",
        "webpack-dev-server": "^3.10.3"
    }
}

webpack.config. js

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

module.exports = {
    entry: "./src/index.js",
    output: {
        path: __dirname + "/build",
        filename: "index_bundle.js"
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: "babel-loader"
            },
            {
                test: /\.s?css$/,
                use: ["style-loader", "css-loader", "sass-loader"]
            },
            {
                test: /\.(ttf|eot|svg|gif|png)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
                use: [
                    {
                        loader: "file-loader"
                    }
                ]
            },
            {
                test: /\.(svg|woff|woff2|ttf|eot|otf)([\?]?.*)$/,
                loader: "file-loader?name=assets/fonts/[name].[ext]"
            }
            // { test: /\.html$/i, loader: "html-loader" }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: "public/index.html"
        })
    ]
};

Один из моих звонков из компонента реакции:

const handleSubmit = async e => {
        e.preventDefault();

        if (email === "" || password === "") {
            setloadingAxiosReq(false);
            setShowError(false);
            setShowNullError(true);
            setLoggedIn(false);
            setErrorMessage("Enter your credentials!");
        } else {
            try {
                setloadingAxiosReq(true);
                const response = await axios.post("/auth/login", {
                    email,
                    password
                });
                setModal(false);
                setloadingAxiosReq(false);
                localStorage.setItem("JWT", response.data.token);
                window.location.href = "/auth/profile";
                setShowError(false);
                setShowNullError(false);
                setLoggedIn(true);
                setAuthorized(true);
            } catch (error) {
                setErrorMessage(error.response.data.message);
                setloadingAxiosReq(false);
            }
        }
    };
...