[英]How to connect and deploy React app with Node js backend?
I have completed my first project in MERN stack but now I am struggling to deploy it on hiroku.我已经在 MERN 堆栈中完成了我的第一个项目,但现在我正在努力将它部署到 hiroku。 Till now I was running both react and node code on different ports.到目前为止,我在不同的端口上同时运行 react 和 node 代码。
This are the files这是文件
client folder is frontend(React).客户端文件夹是前端(反应)。 App.js in Node is Node 中的 App.js 是
const express = require("express");
const app = express();
const userRouter = require("./routes/userRoutes");
const cookieParser = require("cookie-parser");
const cors = require("cors");
const compression = require("compression");
app.use(cors());
app.use(cookieParser());
app.use(express.urlencoded({ extended: true, limit: "10kb" }));
app.use(compression());
app.use("/api/v1/users", userRouter);
module.exports = app;
App.js in React is React 中的 App.js 是
import React from "react";
import "./App.css";
import Home from "./mainPages/home";
import Register from "./components/authentication/register";
import { Route, Switch } from "react-router-dom";
function App() {
return (
<div className="app">
<Switch>
<Route
exact
path="/"
component={() => (<Home/>)} />
<Route
exact
path="/register"
component={() => (<Register/>)} />
</Switch>
</div>
);
}
export default App;
Registeration data from client side is send like this来自客户端的注册数据是这样发送的
axios({ method: "POST", url: "http://localhost:3000/api/v1/user/register", data: data, headers: header });
How to connect client and server to deploy on hiroku?如何连接客户端和服务器以在 hiroku 上部署?
It is ideal to keep client folder outside server folder.最好将客户端文件夹保留在服务器文件夹之外。
Step 1: Build your React App and take out the contents in the output folder (dist folder)第 1 步:构建您的 React App 并取出输出文件夹(dist 文件夹)中的内容
Step 2: Deploy your front end in any static hosting services eg(AWS S3 or in any hosting providers)第 2 步:在任何静态托管服务中部署您的前端,例如(AWS S3 或任何托管服务提供商)
Step 3: Deploy your back end API in Heroku or any node hosting provider第 3 步:在 Heroku 或任何节点托管提供商中部署您的后端 API
Step 4: Update the AJAX end points in front end.第 4 步:更新前端的 AJAX 端点。
Step 5: Thoroughly test and release第 5 步:彻底测试和发布
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.