A full-functional (Work in progress now) ecommerce web application that is developed by using MERN (MongoDB, Express.js, React.js, and Node.js)
Below are the sample of a product-shop and list page:
This repository is built on top of Express.js and React.js, however in the implementation detail, we will find other supporting technologies as well.
Details frameworks and packages can be found in the package.json files in server and client directory.
This project can be run basically in two ways. One is using docker, other way is to run manually via vscode.
Depending on the MongoDB hosting option, we choose the appropriate docker-compose file.
Currently we have two docker-compose files:
docker-compose.mongocloud.yml
- MongoDB.com hosted clusterdocker-compose.yml
- Local MongoDB containerMONGODB_CLOUD_URL
in docker-compose.mongocloud.yml
to the appropriate MongoDB URL.REACT_APP_API_URL
in docker-compose.yml
to the appropriate API URL. If we want to expose our client to the internet, we need to change the REACT_APP_API_URL
to the appropriate API URL. Otherwise keep REACT_APP_API_URL
as http://localhost:8008
.Run docker-compose commands
It is expected that the machine must have docker and docker-compose installed. Go to the root of the repository and execute appropriate commands. This will spin up the server and client containers along with the MongoDB container (if we are using local MongoDB server) inside of Docker environment.
Using docker containers with cloud hosted MongoDB
> cd project-root
> docker-compose -f docker-compose.mongocloud.yml build
> docker-compose -f docker-compose.mongocloud.yml up
Using docker containers with local MongoDB
> cd project-root
> docker-compose build
> docker-compose up
The client and server both are up and running and we should see the following screen if we navigate to the client url.
seed data
Go inside of the docker container and execute below commands. These will seed the database with roles
, users
and products
data.
docker exec -it appserver bash
npm run db:seed
npm run db:migrate
You should see the following output:
You should be now login to the application and see the products list.
To run via vscode, we should run the server and client side projects separately, and also make sure mongodb is up and running.
Create a .env
file inside of the server
directory. Add the below entries or change accordingly. You can follow the .env.sample
file to see the format.
DB_HOST=localhost
DB_PORT=27017
DB_NAME=sabil
JWT_SECRET=secret
JWT_EXPIRES_IN=3600
PORT=8008
IS_MONGODB_CLOUD_URL=false
MONGODB_CLOUD_URL=mongodb+srv:// <USER >: <PASSWORD >@cluster0.abcd.mongodb.net/myFirstDatabase?retryWrites=true
We assume we run the MongoDB in the docker container.
cd server
npm i
npm run db:up
npm start
cd client
nvm use --lts
npm i
npm start
To seed the database, we need to run the following commands in the docker container. You can run these commands in the terminal as well if you are running the server and client outside of the docker environment. I assume we are running appserver in the docker container.
docker exec -it appserver bash
npm run db:seed
npm run db:migrate
You should be able to see the username and password in the /server/setup/users.json
file.