反応ルータと反応バックエンドで反応アプリを配備すること

この記事では、ルーティングとエクスプレスバックエンドのための反応ルータを使用して反応アプリケーションを作成する方法を説明します.その後、Herokuに展開します.このチュートリアルでは、すぐに更新することができますし、反応アプリケーションを作成しながらテストするAPIを設定する簡単な方法を提供しています.また、反応するために新しい人にヘルプを提供することがあります.この目標を達成するためにいくつかの方法がありますが、私は非常に簡単な方法を私は最もよく知られて覆われている.あなたが異なる方法を持っているか、私がどんな間違いをしたならば、私に知らせてください.
このアプリケーションのソースコードはhereです.
使用する技術

エクスプレス.js

反応する.js

反応ルータ

エクスプレスアプリのバックエンドを作成する
ために我々のアプリ、両方のノードを設定を開始します.JSとNPMをインストールする必要があります.
始めるには親ディレクトリを作成する必要があります.ここでは私たちの反応エクスプレス例を呼び出します.

mkdir react-express-example
cd react-express-example

NPMでプロジェクトを初期化します

npm init -y

エクスプレスパッケージをインストールします

npm add express

インデックスという名前のファイルを作成します.JSと次のコードを入力し、これは最も基本的なエクスプレスアプリとして機能します.

const express = require('express');
const path = require('path');

const app = express();

// Serve the static files from the React app
app.use(express.static(path.join(__dirname, 'client/build')));

// An api endpoint that returns a short list of items
app.get('/api/getList', (req,res) => {
    var list = ["item1", "item2", "item3"];
    res.json(list);
    console.log('Sent list of items');
});

// Handles any requests that don't match the ones above
app.get('*', (req,res) =>{
    res.sendFile(path.join(__dirname+'/client/build/index.html'));
});

const port = process.env.PORT || 5000;
app.listen(port);

console.log('App is listening on port ' + port);

Express ()をコールして、オブジェクトアプリケーションで表されるExpressアプリケーションを作成します.次に、項目のリストでJSONレスポンスを送信する/API/getListのGETリクエストを処理するメソッドを作成します.我々は、後で我々の反応アプリからこれを呼びます.
パッケージにスクリプトを追加します.JSONので、アプリケーションを一度適切なサーバー上に配置を開始します.私は通常Heroku上の私のサンプルプロジェクトを起動します.

{
  "name": "react-express-example",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "node index.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "express": "^4.16.3"
  }
}

エクスプレスサーバーのテスト
この時点で我々はすべてがこれまでに動作することを確認するために我々のExpressアプリをテストすることができます.
上記のスクリプトでExpressアプリを実行します.

npm start

http://localhost:5000/api/getListを開き、次のように表示します.


反応アプリを作成
既に作成していない場合は、次のコード行を実行します.

npm install -g create-react-app

次のステップは、クライアントのフォルダに保持する実際の反応アプリを作成することです.プロジェクトディレクトリ内で次のコマンドを実行してこれを行います.

create-react-app client

基本的な反応アプリは現在、クライアントのフォルダ内からNPMの起動を実行した後http://localhost:3000/で表示されます.クライアント以外の名前を指定する場合は、クライアント/ビルドをポイントするようにExpressファイルに変更を加えなければなりません.
我々は上記の作成したExpressアプリにプロキシAPIの要求に我々の反応アプリのためには、クライアント/パッケージに変更を行う必要があります.JSONこれは"proxy "という行を追加することで行われます.
クライアント/パッケージ.JSON :

{
  "name": "client",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^16.4.1",
    "react-dom": "^16.4.1",
    "react-router-dom": "^4.3.1",
    "react-scripts": "1.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },
  "proxy": "http://localhost:5000"
}

http://localhost:5000
反応ルータの追加
ここで我々のプロジェクトに反応ルータを追加し、2つのページを作成する、ホーム.jsとリスト.js
あなたが反応ルータを使用しないことを選ぶならば、我々のExpressアプリを呼び出してスキップしてください.私はいくつかのトラブルを過去に簡単な実装を設定しているので、私はこのチュートリアルでそれを含まれている.
次のパッケージを作成します.

npm install -g react-router-dom

次のコードを/client/src/indexに挿入します.js

import React from 'react';
import { render } from 'react-dom';
import { BrowserRouter } from 'react-router-dom';

import './index.css';
import App from './App/App';

render((
    <BrowserRouter>
        <App/>
    </BrowserRouter>
), document.getElementById('root'));

次のコードを/client/src/appに挿入します.js

import React, { Component } from 'react';
import { Route, Switch } from 'react-router-dom';
import './App.css';
import Home from './pages/Home';
import List from './pages/List';

class App extends Component {
  render() {
    const App = () => (
      <div>
        <Switch>
          <Route exact path='/' component={Home}/>
          <Route path='/list' component={List}/>
        </Switch>
      </div>
    )
    return (
      <Switch>
        <App/>
      </Switch>
    );
  }
}

export default App;

コードのこのセグメントでは、ホームページとページを表示するページのルートを作成しました.次にこれらのページを作成する必要があります.
Alexis Manginによって を読んだ後、私はどのように記述するかに似た私の反応プロジェクトを構築し始めました.この時点で、プロジェクトの再編成を推奨します.
article
ファイルを作成します.src/app/pagesのjsと以下のコードを含みます:

import React, { Component } from 'react';
import { Link } from 'react-router-dom';


class Home extends Component {
  render() {
    return (
    <div className="App">
      <h1>Project Home</h1>
      {/* Link to List.js */}
      <Link to={'./list'}>
        <button variant="raised">
            My List
        </button>
      </Link>
    </div>
    );
  }
}
export default Home;

我々は、リストにリンクされるボタンを作成している.js

エクスプレスアプリを呼び出す
ファイルリストを作成します.src/app/pagesのjsと以下のコードを含みます:

import React, { Component } from 'react';

class List extends Component {
  // Initialize the state
  constructor(props){
    super(props);
    this.state = {
      list: []
    }
  }

  // Fetch the list on first mount
  componentDidMount() {
    this.getList();
  }

  // Retrieves the list of items from the Express app
  getList = () => {
    fetch('/api/getList')
    .then(res => res.json())
    .then(list => this.setState({ list }))
  }

  render() {
    const { list } = this.state;

    return (
      <div className="App">
        <h1>List of Items</h1>
        {/* Check to see if any items are found*/}
        {list.length ? (
          <div>
            {/* Render the list of items */}
            {list.map((item) => {
              return(
                <div>
                  {item}
                </div>
              );
            })}
          </div>
        ) : (
          <div>
            <h2>No List Items Found</h2>
          </div>
        )
      }
      </div>
    );
  }
}

export default List;

最終的なアプリのテスト
この時点でプロジェクトはアップして実行する必要があります.プロジェクトをテストするには、プロジェクトのホームディレクトリとクライアントディレクトリ内からNPMスタートを実行します.ホームページから私のリストを選択した後に、我々はそれから我々の急行サーバーから3つのアイテムを見なければなりません.


Herokuへの配備
Herokuにアップロードする前に、クライアントコードのビルド方法を決定する必要があります.クライアントへのExpressポイント/ビルドは、我々は我々の反応アプリを構築する前に持っていない.Herokuを使用すると、Herokuのポストスクリプトを追加することができますので、我々はコードをプッシュした後に、我々はコードをプッシュする必要があります反応アプリを構築するコンパイルされたコードをアップロードする.
パッケージの編集.親ディレクトリのjsonと以下のスクリプトを追加します.

  "scripts": {
    "start": "node index.js",
    "heroku-postbuild": "cd client && npm install --only=dev && npm install && npm run build"
  }

Herokuは今クライアントディレクトリを入力し、我々のための反応アプリの生産ビルドを作成します.
Herokuツールベルトがインストールされている場合は、次のコマンドを実行するのと同じくらい簡単です.

git init
git add .
git commit -m "Initial commit"
heroku create
git push heroku master