如何部署反应与快递给Herku [英] How to deploy react with express to heroku

问题描述

我从头开始设置reactjs和express环境。我抛弃了webpack-dev-server，只用 webpack --watch 作为 npm start 它工作正常变化。我可以将我的反应数据无误地接收到我的快递服务器。但我如何将这部署到heroku？我是新来的后端，这是我第一次使用反应与后端。我希望你能帮助我，谢谢你。

package.json

 <$ c $ 
name：react-scratch，
version：1.0.0，
description：，
main： index.js，
scripts：{
start：webpack --watch
}，
keywords：[]，
 author：，
license：ISC，
babel：{
预设值：[
react，
 es2015

}，
dependencies：{
axios：^ 0.18.0，
body-parser：^ 1.18 .2，
express：^ 4.16.2，
mongodb：^ 3.0.4，
react：^ 16.2.0，
react-dom：^ 16.2.0，
react-router-dom：^ 4.2.2
}，
devDependencies：{
babel-cli：^ 6.26.0，
babel-core：^ 6.26.0，
babel-loader：^ 7.1.4， 
babel-plugin-transform-class-properties：^ 6.24.1，
babel-preset-es2015：^ 6.24.1，
babel-preset -react：^ 6.24.1，
nodemon： ^ 1.17.1，
path：^ 0.12.7，
webpack：^ 4.1.1，
webpack-cli：^ 2.0 .11，
webpack-dev-server：^ 3.1.1
} 
} 
  

webpack.config.js

  module.exports = {
条目：[
'./src/index.js'
]，
输出：{
路径：__dirname +'/ dist'，
 publicPath：'/' ，
文件名：'bundle.js'
}，
 devServer：{
 contentBase：'./dist'
}，
 module：{
规则：[
 {
 test：/\.(js|jsx)$/，
 exclude：/ node_modules /，
 use：['babel-loader '] 
} 
 
] 
}，
解析：{
 extensions：['*'，'.js'，'.jsx'] 
} 
} 
  

服务器

  app.get（'/'，（req，res）=> ; {
 res.sendFile（path.resolve（__ dirname，'dist'，'index.html'））; 
 $）
 $ / code> 

文件夹结构



  -dist 
  -  bundle.js 
  -  index.html 
  -  node_modules 
  -  server 
 --server.js 
 -src 
 -index.js 
 -App.js 
  




解决方案

Hi im new Heroku也是，

i花了两天的时间阅读并试图部署一个完整的应用程序，其中包含$ > reacjs + expressjs + nodejs + mongodb '。
我看到你也使用 expressjs ，所以你以后可能还需要一个db。 ：）



事情并不复杂，因为许多工具需要同步才能同时​​工作
。

快速回答：

Heroku有一个详细但很长的文档，还提供了一个示例
Node应用程序，准备在本地下载它，检查代码，然后将
部署到Heroku，并实时查看。

这里（< a href =https://elements.heroku.com/buttons/mongolab/hello-mongoose =nofollow noreferrer> https://elements.heroku.com/buttons/mongolab/hello-mongoose ）

我如何处理所有堆栈生命周期。

以下是关于我如何成功 Heroku部署（从后端向客户端获取一些数据）的我的步骤。

link'/'： https://damp-brook-72767.herokuapp.com/

link'/ users'： https://damp-brook-72767.herokuapp.com/users

link' / products'： https://damp-brook-72767.herokuapp.com/products

1. 使用'express-generator' >
   $ express shop 。创建一个简单的expressjs应用程序。
   
   在express中创建一些路线。

使用'create-react-app'创建reactjs应用程序

$ create-react-app client 。我运行这个命令到/ shop文件夹

$ npm run eject 。弹出隐藏文件夹的脚本& 'config'使用 Heroku CLI 或从创建Heroku应用程序， Heroku.com



2. 在 mlab.com 上创建一个免费账户。
   
   一旦我们创建了一个新的数据库，我们就得到了连接字符串
   eg mongodb：//< dbuser>：< dbpassword> @ ds133630.mlab.com：33630 / db

>

不要在本地运行， $ npm run start ，因为服务器'https：//会出现
a CORS问题damp-brook-72767.herokuapp.com'。
我还没有解决这个问题。


3. 因为一切都在地点。

   
   
   1. 执行'$ npm run build时，首先检查 NOT 是否有任何错误'
      本地。
   
   
   2. 将任何更改提交到'master'分支
   
   
   3. li>
      
   4. 横过我们的手指并在Heroku上打开网页。
   我忘了一些东西。我的测试项目也在github上。
   
   

   
   
   

   
   

   这里（ https://github.com/tornado1979/fullstack-shop ）

   
   

   希望这会有所帮助，祝你好运。

   
   

   I setup a reactjs and express environment from scratch. I ditched the webpack-dev-server and just use webpack --watch for the npm start it's working fine it reads the changes. I can receive my react data to my express server without errors. But how would i deploy this to heroku? I am new to back-end and this is my first time using react with a backend. I hope you can help me thank you..

   package.json

   {
     "name": "react-scratch",
     "version": "1.0.0",
     "description": "",
     "main": "index.js",
     "scripts": {
       "start": "webpack --watch"
     },
     "keywords": [],
     "author": "",
     "license": "ISC",
     "babel": {
       "presets": [
         "react",
         "es2015"
       ]
     },
     "dependencies": {
       "axios": "^0.18.0",
       "body-parser": "^1.18.2",
       "express": "^4.16.2",
       "mongodb": "^3.0.4",
       "react": "^16.2.0",
       "react-dom": "^16.2.0",
       "react-router-dom": "^4.2.2"
     },
     "devDependencies": {
       "babel-cli": "^6.26.0",
       "babel-core": "^6.26.0",
       "babel-loader": "^7.1.4",
       "babel-plugin-transform-class-properties": "^6.24.1",
       "babel-preset-es2015": "^6.24.1",
       "babel-preset-react": "^6.24.1",
       "nodemon": "^1.17.1",
       "path": "^0.12.7",
       "webpack": "^4.1.1",
       "webpack-cli": "^2.0.11",
       "webpack-dev-server": "^3.1.1"
     }
   }
   

   webpack.config.js

   module.exports = {
       entry: [
               './src/index.js'
           ],
       output: {
           path: __dirname + '/dist',
           publicPath: '/',
           filename: 'bundle.js'
       },
       devServer: {
           contentBase: './dist'
       },
       module: {
           rules: [
               {
                   test: /\.(js|jsx)$/,
                   exclude: /node_modules/,
                   use: ['babel-loader']
               }
   
           ]
       },
       resolve: {
          extensions: ['*', '.js', '.jsx']
        }
   }
   

   Server

   app.get('/', (req, res) => {
       res.sendFile(path.resolve(__dirname, 'dist', 'index.html'));
   })
   

   Folder Structure

   -dist
    - bundle.js
    - index.html
   -node_modules
   -server
    -server.js
   -src
    -index.js
    -App.js
   

   解决方案

   Hi i m new to Heroku too,
   i spent two days reading and trying to deploy a full-stack application, consisting of 'reacjs + expressjs + nodejs + mongodb'. I see that you also use expressjs, so you might later need a db also. :)

   Things are little complicated as many tools need to be sync in order to work all together.

   Quick answer:

   Heroku has a detailed but long documentation about that and also provides an example Node application, ready to download it locally, check the code, and deploy it to Heroku, and see it live.

   Here (https://elements.heroku.com/buttons/mongolab/hello-mongoose)

   How i deal with all the full-stack lifecycle.

   Below are my steps on how i succeeded Heroku deploy(fetch some data from backend to the client).

   link '/': https://damp-brook-72767.herokuapp.com/
   link '/users': https://damp-brook-72767.herokuapp.com/users
   link '/products': https://damp-brook-72767.herokuapp.com/products

   1. Create express skeleton with 'express-generator'
$ express shop. Creates a simple expressjs app.
      Inside the express i create some routes.

   2. Create the reactjs app with 'create-react-app'
$ create-react-app client. I run this command into the /shop folder
      $ npm run eject. Eject the hidden folders 'scripts' & 'config'

   3. Create the Heroku application either with Heroku CLI or from Heroku.com

   4. Create a free account on mlab.com.
      As soon we create a new db, we get the connection string, e.g. mongodb://<dbuser>:<dbpassword>@ds133630.mlab.com:33630/db

   5. Dont run locally, $ npm run start, because there will be a CORS issue with the server 'https://damp-brook-72767.herokuapp.com'. I havent solve that yet.

   6. Since everything is in place.

      1. Check first NOT to be any errors, when execute '$ npm run build' locally.
      2. Commit any changes to 'master' branch
      3. Push to Heroku master
      4. Cross our fingers and open the webpage on Heroku.

   7. That's it, except if i forgot something. I have my test project, also, on github.

   Here (https://github.com/tornado1979/fullstack-shop)

   Hope this helps, good luck.

   这篇关于如何部署反应与快递给Herku的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！