{"id":21468321,"url":"https://github.com/scya597/web-full-stack-boilerplate","last_synced_at":"2026-03-09T00:31:58.590Z","repository":{"id":21438804,"uuid":"92752829","full_name":"Scya597/Web-Full-Stack-Boilerplate","owner":"Scya597","description":"The Boilerplate I created to build web app, with support to ReactJS, NodeJS, Express, MongoDB, MySQL, Socket.io, webpack, hot-reload, etc.","archived":false,"fork":false,"pushed_at":"2023-01-11T00:56:53.000Z","size":4617,"stargazers_count":12,"open_issues_count":23,"forks_count":3,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-04-13T23:54:06.013Z","etag":null,"topics":["boilerplate","express","hot-module-replacement","mern-stack","mongodb","mysql","nodejs","project","react","webpack"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Scya597.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-05-29T15:36:01.000Z","updated_at":"2024-04-13T23:54:06.014Z","dependencies_parsed_at":"2023-01-12T03:45:37.720Z","dependency_job_id":null,"html_url":"https://github.com/Scya597/Web-Full-Stack-Boilerplate","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Scya597%2FWeb-Full-Stack-Boilerplate","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Scya597%2FWeb-Full-Stack-Boilerplate/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Scya597%2FWeb-Full-Stack-Boilerplate/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Scya597%2FWeb-Full-Stack-Boilerplate/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Scya597","download_url":"https://codeload.github.com/Scya597/Web-Full-Stack-Boilerplate/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":226020104,"owners_count":17560967,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["boilerplate","express","hot-module-replacement","mern-stack","mongodb","mysql","nodejs","project","react","webpack"],"created_at":"2024-11-23T08:24:20.665Z","updated_at":"2026-03-09T00:31:58.537Z","avatar_url":"https://github.com/Scya597.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"![logo](https://github.com/Scya597/MERN-Boilerplate/blob/master/assets/images/boilerplate-logo.png)\n\n\u003cp align=center\u003e\n\u003ca target=\"_blank\" href=\"http://nodejs.org/download/\" title=\"Node version\"\u003e\u003cimg src=\"https://img.shields.io/badge/node.js-%3E=_6.0-green.svg\"\u003e\u003c/a\u003e\n\u003ca target=\"_blank\" href=\"http://makeapullrequest.com\" title=\"PRs Welcome\"\u003e\u003cimg src=\"https://img.shields.io/badge/PRs-welcome-brightgreen.svg\"\u003e\u003c/a\u003e\n\u003ca target=\"_blank\" href=\"https://opensource.org/licenses/MIT\" title=\"License: MIT\"\u003e\u003cimg src=\"https://img.shields.io/badge/License-MIT-blue.svg\"\u003e\u003c/a\u003e\n\u003c/p\u003e  \n\n\n\u003e 🎉 ✨ The Boilerplate I created to build web app, with support to ReactJS, NodeJS, Express, MongoDb, mySQL, Socket.io, webpack, hot-reload, etc.\n\n## Table of Contents  \n1. [Setup Boilerplate](#1-setup-boilerplate)\n2. [Setup MongoDb](#2-setup-mongodb)\n3. [Setup MySQL](#3-setup-mysql)\n4. [Setup Socket.io](#4-setup-socket.io)\n5. [Development and Production](#5-development-and-production)\n6. [Deploy in Google Compute Engine](#6-deploy-in-google-compute-engine)\n\n\n## 1. Setup Boilerplate\n```\ngit clone https://github.com/Scya597/Web-Full-Stack-Boilerplate.git\nnpm install\n```\n\n## 2. Setup MongoDB\n\n### 2.1 Install and start MongoDB\n\n```\nbrew update\nbrew install mongo\nmongod\n```\n\nIf 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:\n\n```\nbrew services start mongo\n```\n\n\n### 2.2 Init config of MongoDB\n\nCreate database directory.\n\n```\nsudo mkdir -p /data/db\n```\n\nFind your username.\n\n```\nwhoami\n```\n\nTake the ownership of `/data/db`.\n\n```\n// assume your username is Samuel\nsudo chown -Rv Samuel /data/db\n```\n\n### 2.3 Connect your server to MongoDB\n\nGo to `/config-api.js` and set the value `environment.mongodb` to `true`. \n\n### 2.4 Create New Model\n\nExecute `cd /server/api/database/mongodb/models` and create models you need.\n\n### 2.5 Develop MongoDB API\n\n1. Modify `/server/api/controllers/controller-mongo.js` to implement API functions.\n2. Modify `/server/api/routes.js` and `/config-api.js` to implement API routings.\n\n## 3. Setup MySQL\n\nI'll only show how to setup MySQL in Mac, for Windows users please go to [MySQL official site](https://dev.mysql.com/downloads/windows/installer/5.7.html) and follow their instructions.  \n\n### 3.1 Install and start MySQL\n\n```\nbrew update\nbrew install mysql\nbrew services start mysql\n```\n\n### 3.2 Setup password\n\nFollowing command set password to `password`.\n\n```\nmysqladmin -u root password 'password'\n```\n\n### 3.3 Install Sequel Pro\n\nInstall Sequel Pro from this [site](https://www.sequelpro.com/). It's not needed, but useful for development.\n\n### 3.4 Connect your server to MySQL\n\nGo to `/config-api.js` and set the value `environment.mysql` to `true`.\n\n\n### 3.5 Modify knexfile.js\n\nYou 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.\n\n### 3.6 Create your database\n\nAfter 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`.\n\n### 3.7 Create New Table\n\n1. Execute `cd /server/api/database/mysql` (The location where you put your `knexfile.js`)\n2. Run `knex migrate:make {table name}` in terminal.\n3. Create your own schema in the migration file and save it. You can find the documentation in the [official site](http://knexjs.org/).\n4. Run `knex migrate:latest`\n\n### 3.8 Develop MySQL API\n\n1. Write new functions at `/server/api/database/mysql/store.js`\n2. Modify `/server/api/controllers/controller-sql.js` to implement API functionss.\n3. Modify `/server/api/routes.js` and `/config-api.js` to implement API routings.\n\n## 4. Setup Socket.io\n\n### 4.1 Connect your server to Socket.io\n\nGo to `/config-api.js` and set the value `environment.socketio` to `true`.\n\n### 4.2 Develop Socket.io tasks\n\n1. Add new socket tasks in `/config-io.js`.\n2. Modify `/server/io-setting.js` and `/client/components/PageIO.js` to implement socket.io's tasks.\n\n\n## 5. Development and Production\n\n### 5.1 Run the project in Development mode\n\nIn 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.\n\n```\nnpm run dev\n```\n\n### 5.2 Run the project in Production mode\n\nIn production mode, the project will be optimized, which makes it lighter and faster.\n\n```\nnpm run build\nnpm start\n```\n\n\n## 6 Deploy in Google Compute Engine\n\n\n### 6.1 SSL connect to your VM \n\n```\ngcloud compute --project \"project-name\" ssh --zone \"your-zone\" \"VM-name\"\n```\n\n### 6.2 Install everything you need\n\n```\nsudo apt-get update\ncurl -sL https://deb.nodesource.com/setup_6.x | sudo -E bash -\nsudo apt-get install git\nsudo apt-get install nodejs\nsudo apt-get install nginx\nsudo apt-get install tmux\n```\n\n### 6.3 Clone your project\n\n```\ngit clone https://github.com/Scya597/Web-Full-Stack-Boilerplate.git\nnpm install\n```\n\n### 6.4 Setup NGINX\n\n1. Replace `default` file in VM's `/etc/nginx/sites-available/default` with our `default` file in our repo's `/deploy`\n\n2. 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.\n\n3. 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.\n\n### 6.5 Run your project with tmux\n\n1. Execute `tmux` to create new session, and `tmux attach -t 0` to attach session 0.\n\n2. Excute `npm run build` and `npm start`\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fscya597%2Fweb-full-stack-boilerplate","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fscya597%2Fweb-full-stack-boilerplate","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fscya597%2Fweb-full-stack-boilerplate/lists"}