# 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 中:
* 修正 ```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 (<anonymous>)
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 (<anonymous>)
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.<anonymous> (/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``` 所以不用一直關掉重開，只要你有更動他就會重跑了
* 如果有問題歡迎直接留言！
Google Drive
Gist
Clipboard
Sign in via Facebook
Sign in via X(Twitter)
Sign in via GitHub
Sign in via Dropbox
Sign in with Wallet
