scya597 / web-full-stack-boilerplate Goto Github PK

🎉 ✨ The Boilerplate I created to build web app, with support to ReactJS, NodeJS, Express, MongoDb, mySQL, Socket.io, webpack, hot-reload, etc.

1. Setup Boilerplate
2. Setup MongoDb
3. Setup MySQL
4. Setup Socket.io
5. Development and Production
6. Deploy in Google Compute Engine

git clone https://github.com/Scya597/Web-Full-Stack-Boilerplate.git
npm install

brew update
brew install mongo
mongod

If you don't want to run mongod everytime you want to start, executing following command will automatically start your Mongo Database while the computer is running:

brew services start mongo

Create database directory.

sudo mkdir -p /data/db

Find your username.

whoami

Take the ownership of /data/db.

// assume your username is Samuel
sudo chown -Rv Samuel /data/db

Go to /config-api.js and set the value environment.mongodb to true.

Execute cd /server/api/database/mongodb/models and create models you need.

1. Modify /server/api/controllers/controller-mongo.js to implement API functions.
2. Modify /server/api/routes.js and /config-api.js to implement API routings.

I'll only show how to setup MySQL in Mac, for Windows users please go to MySQL official site and follow their instructions.

brew update
brew install mysql
brew services start mysql

Following command set password to password.

mysqladmin -u root password 'password'

Install Sequel Pro from this site. It's not needed, but useful for development.

Go to /config-api.js and set the value environment.mysql to true.

You can find knexfile.js in /server/api/database/mysql folder. Make sure you have right user, password, and your database's name in this file. Current name of the database is testSQLdb, you can change it to any other name you like.

After setting up, you can create a database in Sequel Pro. Please make sure your database's name is the same as it is in knexfile.js.

1. Execute cd /server/api/database/mysql (The location where you put your knexfile.js)
2. Run knex migrate:make {table name} in terminal.
3. Create your own schema in the migration file and save it. You can find the documentation in the official site.
4. Run knex migrate:latest

1. Write new functions at /server/api/database/mysql/store.js
2. Modify /server/api/controllers/controller-sql.js to implement API functionss.
3. Modify /server/api/routes.js and /config-api.js to implement API routings.

Go to /config-api.js and set the value environment.socketio to true.

1. Add new socket tasks in /config-io.js.
2. Modify /server/io-setting.js and /client/components/PageIO.js to implement socket.io's tasks.

In development mode, if you modify frontend pages and save it, the project will automatically update your changes to your port without rebuilding whole project, which makes develop faster.

npm run dev

In production mode, the project will be optimized, which makes it lighter and faster.

npm run build
npm start

gcloud compute --project "project-name" ssh --zone "your-zone" "VM-name"

sudo apt-get update
curl -sL https://deb.nodesource.com/setup_6.x | sudo -E bash -
sudo apt-get install git
sudo apt-get install nodejs
sudo apt-get install nginx
sudo apt-get install tmux

git clone https://github.com/Scya597/Web-Full-Stack-Boilerplate.git
npm install

1. Replace default file in VM's /etc/nginx/sites-available/default with our default file in our repo's /deploy

2. Excute sudo service nginx reload and sudo service nginx restart to connect the port you've setup in /server/config.js into your ip address.

3. If you have use Socket.io in your application, go to /config-io.js and set the value of setting.endpoint to your new ip address.

1. Execute tmux to create new session, and tmux attach -t 0 to attach session 0.

2. Excute npm run build and npm start