--- # System prepended metadata title: Fix up L5 environment --- # Fix up L5 environment ## info * TOC [toc] * [repo link](https://github.com/bradtraversy/mern_shopping_list) * 建議 client 與 server 分開跑容易除錯，不要直接 ```npm start``` 或是 ```npm run dev``` * 底下 ```$``` 開頭為 shell command，若為 windows cmd 請使用相對應指令 (or using ```WSL```) * p.s. 我是在自己電腦上安裝 MongoDB ## client side ### error of babel-loader * 路徑: ``` mern_shopping_list/package.json ``` * 原先內容: ```js=27 "devDependencies": { "babel-cli": "^6.26.0", "babel-core": "^6.26.3", "babel-loader": "^8.0.6", "babel-preset-env": "^1.7.0", "morgan": "^1.9.1", ``` * 修改: * 若已經下載 module 了請先刪除: ```sh $ rm -rf node_modules $ rm package-lock.json ``` * 直接刪除原先 ```package.json``` 中第 30 行: ```js=27 "devDependencies": { "babel-cli": "^6.26.0", "babel-core": "^6.26.3", "babel-preset-env": "^1.7.0", "morgan": "^1.9.1", ``` * 重新下載: ```sh $ npm install $ npm run client-install ``` * test: ```sh $ npm run client ``` ### error of pretty-format * 無法成功 compile 並顯示以下頁面或是顯示錯誤訊息於 terminal 中: ![](https://i.imgur.com/X7gxIw8.png) * 修正 ```pretty-format``` module 原始碼: * 路徑: ``` mern_shopping_list/client/node_modules/pretty-format/build/index.d.ts ``` * source code 應該會長下面這樣: ```js=1 /** * Copyright (c) Facebook, Inc. and its affiliates. All Rights Reserved. * * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. */ import type { NewPlugin, Options, OptionsReceived } from './types'; export type { Colors, CompareKeys, Config, Options, OptionsReceived, OldPlugin, NewPlugin, Plugin, Plugins, PrettyFormatOptions, Printer, Refs, Theme, } from './types'; export declare const DEFAULT_OPTIONS: Options; /** ``` * 修改原先第 7, 8 行: ```js=1 /** * Copyright (c) Facebook, Inc. and its affiliates. All Rights Reserved. * * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. */ import * as PrettyFormat from './types'; export declare const DEFAULT_OPTIONS: Options; /** * Returns a presentation string of your `val` object ``` * test: ```sh $ npm run client ``` ## server ### error of connection * 在啟動前先做好 DB 設定: * ```config/default.json``` ```js { "mongoURI": "mongodb://localhost:27017", "jwtSecret": "sl_myJwtSecret" } ``` * 若出現下面錯誤訊息表示後端與資料庫連接有問題，很可能是兩個原因: ``` MongoParseError: Invalid connection string at parseConnectionString (/home/chilin/mern_shopping_list/node_modules/mongodb/lib/core/uri_parser.js:585:21) at connect (/home/chilin/mern_shopping_list/node_modules/mongodb/lib/operations/connect.js:283:3) at /home/chilin/mern_shopping_list/node_modules/mongodb/lib/mongo_client.js:284:5 at maybePromise (/home/chilin/mern_shopping_list/node_modules/mongodb/lib/utils.js:692:3) at MongoClient.connect (/home/chilin/mern_shopping_list/node_modules/mongodb/lib/mongo_client.js:280:10) at /home/chilin/mern_shopping_list/node_modules/mongoose/lib/connection.js:836:12 at new Promise () at NativeConnection.Connection.openUri (/home/chilin/mern_shopping_list/node_modules/mongoose/lib/connection.js:832:19) at /home/chilin/mern_shopping_list/node_modules/mongoose/lib/index.js:351:10 at /home/chilin/mern_shopping_list/node_modules/mongoose/lib/helpers/promiseOrCallback.js:32:5 at new Promise () at promiseOrCallback (/home/chilin/mern_shopping_list/node_modules/mongoose/lib/helpers/promiseOrCallback.js:31:10) at Mongoose._promiseOrCallback (/home/chilin/mern_shopping_list/node_modules/mongoose/lib/index.js:1149:10) at Mongoose.connect (/home/chilin/mern_shopping_list/node_modules/mongoose/lib/index.js:350:20) at Object. (/home/chilin/mern_shopping_list/app.js:31:4) at Module._compile (node:internal/modules/cjs/loader:1103:14) ``` 1. 資料庫沒裝好或是沒啟動 * 如果是在自己電腦上安裝 MongoDB 要注意下載完預設是不啟動的(for Linux)，記得先檢查 ```sh $ systemctl status mongod.service ``` 2. 後端沒有讀到你的 URI 與 DB name，建議在後端程式中輸出看看現在讀到的 DB 設定為何 * 例如 ```app.js``` 中先取得了 URI 與 DB name 才進行連接，可以多加一行看看現在讀到什麼 ```js=14 const { MONGO_URI, MONGO_DB_NAME } = config; // debug console.log(MONGO_URI) ``` * 如果還是 ```undefined``` 的話有兩種解法: * 下面註解的為原先 code 1. 手動設定所有 DB 相關變數: * ```app.js``` ```js=1 import express from 'express'; import mongoose from 'mongoose'; import path from 'path'; import cors from 'cors'; import bodyParser from 'body-parser'; import morgan from 'morgan'; // import config from './config'; import 'dotenv/config' // routes import authRoutes from './routes/api/auth'; import itemRoutes from './routes/api/items'; import userRoutes from './routes/api/users'; // const { MONGO_URI, MONGO_DB_NAME } = config; const MONGO_URI = "mongodb://localhost:27017" const MONGO_DB_NAME = "test" ``` * ```routes/api/auth.js``` * 加上第九行 ```js=1 import { Router } from 'express'; import bcrypt from 'bcryptjs'; import config from '../../config'; import jwt from 'jsonwebtoken'; import auth from '../../middleware/auth'; // User Model import User from '../../models/User'; const JWT_SECRET="sl_myJwtSecret" const router = Router(); ``` * ```middleware/auth.js``` * 加第四行 ```js=1 import jwt from 'jsonwebtoken'; import config from '../config'; const JWT_SECRET="sl_myJwtSecret" export default (req, res, next) => { ``` * ```server.js``` * 加第四行指定 port ```js=1 import app from './app'; import config from './config'; const PORT = 5000 app.listen(PORT, () => console.log(`Server started on PORT ${PORT}`)); ``` 2. 設定 env dotfile: * 這邊只以 ```app.js``` 為例子，詳細要修改的檔案請參考第一點 ```js=1 import express from 'express'; import mongoose from 'mongoose'; import path from 'path'; import cors from 'cors'; import bodyParser from 'body-parser'; import morgan from 'morgan'; // import config from './config'; import 'dotenv/config' // routes import authRoutes from './routes/api/auth'; import itemRoutes from './routes/api/items'; import userRoutes from './routes/api/users'; // const { MONGO_URI, MONGO_DB_NAME } = config; const MONGO_URI = process.env['MONGO_URI'] const MONGO_DB_NAME = process.env['MONGO_DB_NAME'] ``` * 新增 env dotfiles * ```.env``` ``` MONGO_URI=mongodb://localhost:27017 MONGO_DB_NAME=test jwtSecret=sl_myJwtSecret ``` * 測試: ```$ npm start server``` * 請確保所有操作都是正常(output ```200``` in terminal) * p.s. 這個 repo 有裝 ```nodemon``` 所以不用一直關掉重開，只要你有更動他就會重跑了 * 如果有問題歡迎直接留言！