Meanjs-project-setup

MEAN.JS-MEANプロジェクトのセットアップ

この章には、MEANアプリケーションの作成と設定が含まれます。 NodeJSとExpressJSを一緒に使用してプロジェクトを作成しています。

前提条件

MEANアプリケーションの作成を始める前に、必要な前提条件をインストールする必要があります。

Node.jsのWebサイトhttps://nodejs.org/en/[Node.js]（Windowsユーザー向け）にアクセスして、Node.jsの最新バージョンをインストールできます。 Node.jsをダウンロードすると、npmがシステムに自動的にインストールされます。 Linuxユーザーは、https://github.com/nodesource/distributions/blob/master/README.md [link]を使用して、Nodeおよびnpmをインストールできます。

以下のコマンドを使用して、ノードとnpmのバージョンを確認します-

$ node --version
$ npm --version

コマンドは、以下の画像に示すようにバージョンを表示します-

コマンド表示

Expressプロジェクトの作成

以下に示すようにmkdirコマンドを使用してプロジェクトディレクトリを作成します-

$ mkdir mean-demo//this is name of repository

上記のディレクトリは、ノードアプリケーションのルートです。 今、package.jsonファイルを作成するには、以下のコマンドを実行します-

$ cd webapp-demo
$ npm init

initコマンドは、package.jsonファイルの作成手順を示します-

このユーティリティは、package.jsonファイルの作成手順を示します。 最も一般的な項目のみを扱い、適切なデフォルトを推測しようとします。

See `npm help json` for definitive documentation on these fields and exactly what they do.
Use `npm install --save` afterwards to install a package and save it as a dependency in the package.json file.

Press ^C at any time to quit.
name: (mean-demo) mean_tutorial
version: (1.0.0)
description: this is basic tutorial example for MEAN stack
entry point: (index.js) server.js
test command: test
git repository:
keywords: MEAN,Mongo,Express,Angular,Nodejs
author: Manisha
license: (ISC)
About to write to/home/mani/work/rnd/mean-demo/package.json:

{
   "name": "mean_tutorial",
   "version": "1.0.0",
   "description": "this is basic tutorial example for MEAN stack",
   "main": "server.js",
   "scripts": {
      "test": "test"
   },
   "keywords": [
      "MEAN",
      "Mongo",
      "Express",
      "Angular",
      "Nodejs"
   ],
   "author": "Manisha",
   "license": "ISC"
}

Is this ok? (yes) yes

はいをクリックすると、以下のようなフォルダ構造が生成されます-

-mean-demo
   -package.json

_package.json_ファイルには次の情報があります-

{
   "name": "mean_tutorial",
   "version": "1.0.0",
   "description": "this is basic tutorial example for MEAN stack",
   "main": "server.js",
   "scripts": {
      "test": "test"
   },
   "keywords": [
      "MEAN",
      "Mongo",
      "Express",
      "Angular",
      "Nodejs"
   ],
   "author": "Manisha",
   "license": "ISC"
}

今すぐExpressプロジェクトを現在のフォルダに設定し、フレームワークの設定オプションをインストールするには、以下のコマンドを使用します-

npm install express --save

プロジェクトディレクトリに移動し、package.jsonファイルを開きます。以下の情報が表示されます-

{
   "name": "mean_tutorial",
   "version": "1.0.0",
   "description": "this is basic tutorial example for MEAN stack",
   "main": "server.js",
   "scripts": {
      "test": "test"
   },
   "keywords": [
      "MEAN",
      "Mongo",
      "Express",
      "Angular",
      "Nodejs"
   ],
   "author": "Manisha",
   "license": "ISC",
   "dependencies": {
      "express": "^4.17.1"
   }
}

ここで、明示的な依存関係がファイルに追加されていることがわかります。 さて、プロジェクトの構造は以下の通りです-

-mean-demo
   --node_modules created by npm install
   --package.json tells npm which packages we need
   --server.js set up our node application

実行中のアプリケーション

新しく作成したプロジェクトディレクトリに移動し、以下の内容のserver.jsファイルを作成します。

//modules =================================================
const express = require('express');
const app = express();
//set our port
const port = 3000;
app.get('/', (req, res) ⇒ res.send('Welcome to finddevguides!'));

//startup our app at http://localhost:3000
app.listen(port, () ⇒ console.log(`Example app listening on port ${port}!`));

次に、以下のコマンドでアプリケーションを実行します-

$ npm start

以下の画像に示すように、確認が得られます-

確認

Expressアプリケーションが実行されていることを通知します。 任意のブラウザーを開き、 http：//localhost：3000 を使用してアプリケーションにアクセスします。 Welcome to finddevguidesが表示されます！ 以下に示すテキスト-

ようこそfinddevguides