この記事では、私がどのように設定し、私の急行のプロジェクトを作成する方法を示します.

フォルダ構造

私が反応Expressアプリを設定するとき、私は常に以下のフォルダ構造を使用します.

├─app
├─build
├─frontend

The app ディレクトリは、Expressバックエンドアプリケーションを保持します.

The build ディレクトリは、フロントエンドとバックエンドアプリケーションの生産ビルドを保持します

The frontend ディレクトリは、反応フロントエンドアプリケーションを保持します.

あなたが好きな他のフォルダ構造を使用することが自由であることに注意してください、これは単に物事を行うの私の好ましい方法です.

反応アプリの作成

レッツアプリの作成を開始しましょう.私は、使用するつもりですcreate-react-app これはNPMパッケージです.
NPMパッケージを実行するには、npx ツール.

npx create-react-app frontend

反応アプリは、1970年代に作成されますfrontend フォルダ.
インストールが正しくなったらテストしましょう.

cd frontend
yarn run start

The yarn run start コマンドは、反応開発サーバーを実行します.ファイルを変更するたびに自動的に反応アプリを再コンパイルし、ブラウザを再読み込みします!🚀

The create-react-app パッケージはまた、frontend ディレクトリ.しかし、私はプロジェクトのルートディレクトリに単一のgitリポジトリを持ちたい.
Gitリポジトリを削除するにはfrontend ディレクトリを削除する.git ディレクトリ.

rm -rf .git

エクスプレスアプリケーションの作成

我々は今、それはバックエンドTypescript Expressのアプリを設定するには時間が作業フロントエンドのアプリケーションを持っている.
プロジェクトのルートディレクトリに新しいパッケージを作成します.
それから、私は急行とtypescript依存を加えて、最終的に、私はapp ディレクトリ.

yarn init
yarn add express @types/express typescript
mkdir app

次に、私はかなりの標準を作成しますtsconfig.json ファイル.このファイルには、スクリプトスクリプトをJavaScriptにコンパイルするための設定が含まれます.

{
  "compilerOptions": {
    "module": "commonjs",
    "baseUrl": "./",
    "outDir": "build",
    "target": "es6",
    "moduleResolution": "node",
    "esModuleInterop": true,
    "lib": ["es6"],
    "allowJs": true,
    "forceConsistentCasingInFileNames": true,
  },
  "include": [
    "**.ts"
  ],
  "exclude": [
    "./frontend"
  ]
}

私は、バックエンドでTypesScriptを使用したいだけです.だから私はそれを除外するfrontend ディレクトリ.
アプリケーションディレクトリで、私はServer.ts これはサーバークラスを含みます.

import {Express, Request, Response} from "express";

export class Server {

    private app: Express;

    constructor(app: Express) {
        this.app = app;

        this.app.get("/api", (req: Request, res: Response): void => {
            res.send("You have reached the API!");
        })
    }

    public start(port: number): void {
        this.app.listen(port, () => console.log(`Server listening on port ${port}!`));
    }

}

このクラスはExpress アプリケーションのコンストラクタで、アプリケーションのルートを初期化します.
現実の世界では、私はおそらく別のクラスを作成しますRouter.ts これはすべてのアプリケーションルートを保持しますが、この記事のスコープ外です.
このサーバーを初期化するにはindex.ts アプリケーションのルートディレクトリにあるファイル.すべては、新しいサーバークラスを作成し、サーバーを起動します.

import {Server} from "./app/Server";
import express from 'express';
const app = express();

const port = 8080;

const server = new Server(app);
server.start(port);

バックエンドサーバーを起動するには、次のスニペットをpackage.json ファイル.これはts-node Typescriptコードを直接実行するパッケージ.
この方法では、すべてのあなたのために行われているように、JavaScriptにタイプスクリプトをコンパイルすることを心配する必要はありません.

"scripts": {
    "start": "npx ts-node index.ts"
}

なぜ私は次のコマンドを実行してサーバーを起動することができます.

ボーナスとして使用することができますNodemon ファイルの変更時にTSノードを自動的に再起動します.

建物の反応アプリ

レッツは、反応アプリの生産を構築する.
私は、変化を作りますfrontend/package.json ファイル.ので、私はビルドファイルを移動したい/build/frontend フォルダ.
を見つける"scripts" と更新"build" ライン.

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build && mv ./build ../build/frontend"
  },

走りましょうyarn run build コマンドは、それが動作する場合参照してください!🙌

mkdir build 
cd frontend
yarn run build

あなたが/build/frontend ディレクトリは、生産準備ができて反応アプリが表示されます!

エクスプレスアプリの構築

新しいものを加えましょう"build" へのスクリプトpackage.json ファイル.

"scripts": {
    "start": "npx ts-node index.ts",
    "build": "npx tsc"
  }

これは単にtypescriptコンパイラパッケージtsc あなたが好むならば💁‍♂— JavaScriptのタイプスクリプト.
ビルドコマンドを実行して動作するかどうかをテストします.

yarn run build

すべてが正しくなったら、ビルドディレクトリはこのようになります.

build/
├─app/
├─frontend/
├─index.js

接続エクスプレスと

バックエンドとフロントエンドアプリケーションを開発し、それらを構築することができます.しかし、我々はまた、急行に反応する必要があります.
例えば、localhost:8080/ 私は反応のアプリケーションを見に行く必要があります.
私が閲覧するならばlocalhost:8080/api APIのメッセージを見なければなりません.
これを行うにはconstructor のServer クラス.

constructor(app: Express) {
    this.app = app;

    this.app.use(express.static(path.resolve("./") + "/build/frontend"));

    this.app.get("/api", (req: Request, res: Response): void => {
        res.send("You have reached the API!");
    });

    this.app.get("*", (req: Request, res: Response): void => {
        res.sendFile(path.resolve("./") + "/build/frontend/index.html");
    });
}

最初にマークbuild/frontend 静的資産ディレクトリとしてディレクトリ.これは、Expressが自動的にそのディレクトリ内のファイルを提供することを意味します.
次にワイルドカードを追加します* ルートとそれらのすべてを送るindex.html ファイル.これは、反応フロントエンドアプリケーションを保持するファイルです.
バックエンドアプリケーションを再起動しましょう.

yarn run start

ときにナビゲーションlocalhost:8080 私は、反応アプリケーションを見に行く🎉

ときにlocalhost:8080/api APIメッセージを見に行く🔥

それだ!ソースコードを見つけることができますhere on Github 🚀