Rails APIを設定して、反応する方法.クライアント

場合によってはすぐにレールのAPIと反応をスピンしたい.JSのフロントエンドは、それがかどうか、または今後のコーディングチャレンジからプロジェクトを作るためのそれらの担当者を得るためだ.私はよくステップのほとんどを取得しますが、その後、作品を忘れて、私が間違ってどこを参照してくださいスタックオーバーフローを洗掘する必要があります.だからここでは、プロジェクトを起動する必要があるすべての私の将来の自己と他の人を助けるために作品です!
注:これは既にノード、NPM、糸、レール、ローカルインストールされ、Githubアカウントを持っていると仮定します.
クライアントの反応

お使いのターミナルを使用して、プロジェクトを有効にし、バックエンドとフロントエンドを保持し、コマンドを実行するディレクトリを作成する場所に移動します.

mkdir new-project
cd new-project

あなたの反応フロントエンド実行を作成する

npx create-react-app new-project-client

次に、あなたはプロジェクトをそれから新しい反応アプリにCDを持っているフォルダを開くことができます:

code .
cd new-project-client

次は我々のコードをGithubに接続しましょう.

コマンド作成反応アプリは、Gitリポジトリを初期化する必要がありますが、端末で手動で追加することはできません.

git init

前方に移動し、あなたのGitHubのアカウントに移動し、右上の隅に新しいリポジトリをクリックして通知ベルの横にある.

一度リポジトリページを作成し、プロジェクト名を指定します.リポジトリを初期化しないでください.をクリックします.

この次のページが表示されます.

Create Reaction Appを使用すると、初期のコミットメッセージ(作成プロジェクトを使用してプロジェクトを初期化)を行います.したがって、次のコマンドを実行して次のコマンドを実行できます.

git remote add origin git@github.com:MMcClure11/new-project-client.git
git push

新しいプロジェクトクライアントに移動し、Githubの初期コミットを参照できます.

レールAPIの作成

今、あなたは両方のプロジェクトを保持するフォルダーにいるので、クライアントディレクトリのCDをしたいです.

cd ..

Railsアプリを作成するには、APIフラグを追加し、Herokuのような場所に配備する予定の場合は、データベースをPostgreSQLとして指定してください.

rails new new-project-api --api --database=postgresql

注:「新規プロジェクトAPI」は、プロジェクトのRails部分を呼び出したいものです.
次に、Git initを実行し、初期コミットを追加する必要があります.

git init
git add .
git commit -m "Initial commit."

Githubリポジトリを作成するための手順に従います.一度作成したら実行します.

git remote add origin git@github.com:MMcClure11/new-project-api.git
git push

その後、あなたの新しいRails APIがGithubの上にあるのを見るために、

をチェックしてください.

次へ進み、選択したアクティブモデルシリアライザーまたはシリアライザーを追加します.

bundle add active_model_serializers

私たちのフロントエンドがバックエンドにリクエストをするのを許すために、ラックCors Gemをコメントアウトする必要があります.(ユーザ認証を追加する予定なら、パスワード保護のためにbcrpyt gemに戻ることもできます).

# Use Rack CORS for handling Cross-Origin Resource Sharing (CORS), making cross-origin AJAX possible
gem 'rack-cors'

あなたの端末で実行します.

bundle install

次に、config/initializers/coreに移動する必要があります.ROSとCORSミドルウェアの使用に対するコメント

Rails.application.config.middleware.insert_before 0, Rack::Cors do
  allow do
    origins 'http://localhost:3000', 'http://localhost:3001', 'http://localhost:3002'

    resource '*',
      headers: :any,
      methods: [:get, :post, :put, :patch, :delete, :options, :head]
  end
end

あなたの起源のための

は、ワイルドカードである'*'を使用することができて、どんなURLも要求を送るのを許容します、あるいは、あなたは開発の間、あなたがどんなローカルポートを使うかもしれなくて、後で配備されたURLを加えるかもしれません.

すべての権利は、今あなたはすべてのAPIとクライアントを構築を開始する設定されて!下に記載されているブログは、あなたのモデルとserializersを含むAPIを造ることについてのさらなる詳細のための本当に大きい資源です.これが役に立つという望み!
ハッピーコーディング!
資源
Spinning up a Rails API