I'd like to make some of my private ex-projects public now.
😱 How? Why?
📌 drapefit-new-trial-mern
New version TRIAL of Drape Fit Web App using
MERNATTENTION! - Do not TRUST this deprecated styling service anymore!!!
I hope this archived project source would be helpful to whom want to learn MERN at production level...
System Architecture Diagram
Pre-requisites
current release: v0.1.5
latest working: v0.1.6
node.js version: ^18.12.0
mongodb version: ^6.0.4
yarn version: ^1.22.4
Please refer to the scripts part of ./package.json file:
"scripts": {
"backend": "node --max-old-space-size=4096 backend/server.js",
"backend:hotdev": "nodemon --max-old-space-size=4096 backend/server.js",
"client": "npm start --prefix frontend",
"dev": "concurrently \"npm run backend:hotdev\" \"npm run client\"",
"test:server_mocha": "mocha -r esm backend/app.test.js --exit",
"test:client_jest": "npm run test --prefix frontend",
"test:c8": "npx c8 node backend/app.js",
"test:c8_report": "npx c8 report && start \"\" \"coverage/index.html\"",
"client:build": "npm run build --prefix frontend",
"server:local": "npm run client:build && node --max-old-space-size=4096 backend/server.js",
"server:ec2_dev": "pm2 start ecosystem.config.js --node-args=\"--experimental-loader newrelic/esm-loader.mjs --max-old-space-size=4096\"",
"server:ec2_prod": "npm run client:build && pm2 start ecosystem.config.js --node-args=\"--experimental-loader newrelic/esm-loader.mjs --max-old-space-size=8192\""
},
# Install node modules
$ yarn install
# Launch local live servers
$ yarn run dev
# Launch AWS EC2 remote server in development mode
$ yarn run server:ec2_dev
# Make backend unit test using Mocha
$ yarn run test:server_mocha
Visit
User Authentication with Redux Toolkit
Authentication workflow built with the MERN stack & Redux Toolkit.
Features
- User Login/SignIn & SignUp
- Protected routes with React Router v6
- JWT storage with LocalStorage
- Automatically fetches user details on page load (Header.js)
- React Redux
Usage
Environment Variables
*.env files are as the followings:
> ./environments/dev.env
> ./environments/prod.env
NODE_ENV=YOUR_NODE_ENV # development | production
## Ports
PORT=YOUR_PORT
PORT_REACT=YOUR_REACT_PORT
## MongoDB
MONGO_URI_MAIN=YOUR_MONGO_URI_MAIN
MONGO_URI_INVENTORY=YOUR_MONGO_URI_INVENTORY
MONGO_URI_SUPPLIER=YOUR_MONGO_URI_SUPPLIER
MONGO_URI_MERCHANDISE=YOUR_MONGO_URI_MERCHANDISE
## Secrets / Keys
JWT_SECRET=YOUR_JWT_SECRET
BEARER_TOKEN_PREFIX=YOUR_BEARER_TOKEN_PREFIX
## AWS Server
SERVER_IP=YOUR_SERVER_IP
SERVER_DOMAIN=YOUR_SERVER_DOMAIN
AWS_REGION=YOUR_AWS_REGION
S3_BUCKET_NAME=YOUR_S3_BUCKET_NAME
## Multer Upload
MULTER_DEST_DIR=YOUR_MULTER_DEST_DIR
## Email
DRAPEFIT_SVC_MAIL=YOUR_DRAPEFIT_SVC_MAIL
SUPER_ADMIN_EMAIL=YOUR_SUPER_ADMIN_EMAIL
SUPER_ADMIN_INITPWD=SUPER_ADMIN_INITIAL_PASSWORD
## Payment - Stripe
STRIPE_TEST_SK=YOUR_STRIPE_TEST_SECRET_KEY
STRIPE_LIVE_SK=YOUR_STRIPE_LIVE_SECRET_KEY
STRIPE_ENDPT_SECRET=YOUR_STRIPE_ENDPOINT_SECRET
Frontend (React) Config Variables
frontend/src/configs/MyEnvConfig.js
MyEnvConfig.js file is as below:
export default {
baseurl: {
dev: 'YOUR_DEV_BASEURL',
prod: 'YOUR_PROD_BASEURL'
},
stripe: {
pbKey: 'pk_test_YOUR_PUBLISHABLE_KEY'
},
bearer: {
tokenPrefix: 'YOUR_BEARER_TOKEN_PREFIX'
},
gcaptcha: {
siteKey: 'YOUR_GOOGLE_RECAPTCHA_SITEKEY'
},
aws: {
region: 'YOUR_AWS_REGION',
s3Bucket: 'YOUR_S3_BUCKET'
}
};
AWS Credentials by Files
This is necessary for AWS JavaScript SDK integration.
-
~/.aws/credentials
[default]
aws_access_key_id=YOUR_AWS_ACCESS_KEY_ID
aws_secret_access_key=YOUR_AWS_SECRET_ACCESS_KEY
-
~/.aws/config
[default]
aws_access_key_id=YOUR_AWS_ACCESS_KEY_ID
aws_secret_access_key=YOUR_AWS_SECRET_ACCESS_KEY
For details, please refer here.
For Win 10, the path would be the following:
C:\Users\admin\.aws
For Ubuntu 20.04 on AWS EC2, the path would be the following:
/home/ubuntu/.aws
Install Dependencies
Backend & Frontend
$ yarn install
$ cd backend
$ yarn install
$ cd frontend
$ yarn install
📌 Fix Low Space Issue on Free-Tier EC2 Instance
Low space issue might occur MongoDB server down💦
# Remove temp files (ONLY on Emergency!!!)
$ sudo rm -rf /tmp/*
# Clear current user's general cache (ONLY on Emergency!!!)
## Resolving the ‘No Space Left on Device’ Error on Linux
$ sudo rm -rf ~/.cache/*
# Remove APT cache
## check the disk space consumed
$ sudo du -csh /var/cache/apt
## clean this cache
$ sudo apt-get clean
## if clean up only the outdated packages
$ sudo apt-get autoclean
# Clean journal logs
## check the log size
$ sudo journalctl --disk-usage
## clear these logs which are older than certain days (e.g. 2 days)
$ sudo journalctl --vacuum-time=2d
# Remove old kernels (optional)
$ sudo apt-get autoremove --purge
📘
Listing file sizes in folder
$ du -hsc * | sort -hr
🎯
MongoDB LogRotate on Ubuntu 20.04
We sometimes experience that the MongoDB server would get down on the EC2 test instance unexpectedly.
Trying to find out what might let the DB server down, I've noticed that the MongoDB log file's size is extremely large, even bigger than 100MB.
Since stdin & stdout processes such as logging are really memory-costing, it would be certainly an overload for the EC2 test instance of small tier.
To solve this issue, I've introduced the LogRotate function of Ubuntu to the MongoDB server.
$ sudo nano /etc/logrotate.d/mongod
Copy and paste the following content:
/var/log/mongodb/*.log {
daily
rotate 30
compress
dateext
missingok
notifempty
sharedscripts
postrotate
/bin/kill -SIGUSR1 `cat /var/lib/mongodb/mongod.lock 2> /dev/null` 2> /dev/null || true
systemctl restart mongod
endscript
}
To test the configuration running:
$ logrotate -f -v /etc/logrotate.d/mongod
📌 drapefit-cakephp
Full Source code for Drape Fit (https://www.drapefit.com) which is hosted on cPanel.
I hope this archived project source would be helpful to whom want to learn CakePHP at production level...
Database - MySQL
|
|- db_dump_mysql
|--|
|--|-- drapefit_test.sql
|
Style Guide - WordPress
|
|- styleguide
|--|
|
Inventory Page
|
|- inventory
|--|
|
Supplier Page
|
|- supplier
|--|
|
😱🎃
Top comments (0)