MEAN.JS-MEANプロジェクトのセットアップ
この章には、MEANアプリケーションの作成と設定が含まれています。NodeJSとExpressJSを一緒に使用してプロジェクトを作成しています。
前提条件
MEANアプリケーションの作成を開始する前に、必要な前提条件をインストールする必要があります。
あなたはでNode.jsのウェブサイトを訪問してのNode.jsの最新バージョンをインストールすることができますNode.jsの(これはWindowsユーザーのためです)。Node.jsをダウンロードすると、npmがシステムに自動的にインストールされます。Linuxユーザーは、このリンクを使用してNodeとnpmをインストールできます。
以下のコマンドを使用して、Nodeと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 Tutorialspoint!'));
// startup our app at http://localhost:3000
app.listen(port, () ⇒ console.log(`Example app listening on port ${port}!`));
次に、以下のコマンドでアプリケーションを実行します-
$ npm start
下の画像に示すように確認が表示されます-
Expressアプリケーションが実行中であることを通知します。任意のブラウザを開き、を使用してアプリケーションにアクセスしますhttp://localhost:3000。チュートリアルポイントへようこそ!以下に示すテキスト-