MEAN.JS - MEAN Project Setup

Bab ini mencakup pembuatan dan pengaturan aplikasi MEAN. Kami menggunakan NodeJS dan ExpressJS bersama-sama untuk membuat proyek.

Prasyarat

Sebelum kita mulai membuat aplikasi MEAN, kita perlu menginstal prasyarat yang diperlukan.

Anda dapat menginstal versi terbaru Node.js dengan mengunjungi situs web Node.js di Node.js (Ini untuk pengguna Windows). Saat Anda mengunduh Node.js, npm akan terinstal secara otomatis di sistem Anda. Pengguna Linux dapat menginstal Node dan npm dengan menggunakan tautan ini .

Periksa versi Node dan npm dengan menggunakan perintah di bawah ini -

$ node --version
$ npm --version

Perintah akan menampilkan versi seperti yang ditunjukkan pada gambar di bawah ini -

Membuat Proyek Ekspres

Buat direktori proyek dengan menggunakan perintah mkdir seperti yang ditunjukkan di bawah ini -

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

Direktori di atas adalah root dari aplikasi node. Sekarang, untuk membuat file package.json, jalankan perintah di bawah ini -

$ cd webapp-demo
$ npm init

Perintah init akan memandu Anda membuat file package.json -

Utilitas ini akan memandu Anda dalam membuat file package.json. Ini hanya mencakup item yang paling umum, dan mencoba menebak default yang masuk akal.

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

Klik ya dan struktur folder seperti di bawah ini akan dibuat -

-mean-demo
   -package.json

File package.json akan memiliki info berikut -

{
   "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"
}

Sekarang untuk mengkonfigurasi proyek Express ke dalam folder saat ini dan menginstal opsi konfigurasi untuk kerangka kerja, gunakan perintah di bawah ini -

npm install express --save

Buka direktori proyek Anda dan buka file package.json, Anda akan melihat informasi di bawah ini -

{
   "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"
   }
}

Di sini Anda dapat melihat ketergantungan ekspres ditambahkan ke file. Sekarang, struktur proyeknya seperti di bawah ini -

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

Menjalankan Aplikasi

Arahkan ke direktori proyek yang baru Anda buat dan buat file server.js dengan konten di bawah ini.

// 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}!`));

Selanjutnya, jalankan aplikasi dengan perintah di bawah ini -

$ npm start

Anda akan mendapatkan konfirmasi seperti yang ditunjukkan pada gambar di bawah ini -

Ini menginformasikan bahwa aplikasi Express sedang berjalan. Buka browser apa saja dan akses aplikasi menggunakanhttp://localhost:3000. Anda akan melihat Selamat datang di Tutorialspoint! teks seperti yang ditunjukkan di bawah ini -