Fullstack web application using Angular4, Bootstrap4, Primeng, Express, Mysql, Gulp and Passport.

Introduction

This project demonstrates the basic CRUD functions combining Angular4, Bootstrap4, Primeng, Express, Mysql, Gulp4 and Passport. It also uses Gulp for running task and TsLint. You can use this web application doing user signup/login, campground create/edit/delete, and comment create/edit/delete.

Prerequisites

1. The latest version of Nodejs need to be installed.
2. Docker MySQL5 container

Docker MySQL container preparation

1. Run docker pull mysql:5
2. Run docker volume create mysqldata
3. Run docker run --name mysql5 -p 3306:3306 -v mysqldata:/var/lib/mysql -e MYSQL_ROOT_PASSWORD=my-secret-pw -d mysql:5
4. Run docker run -it --link mysql5:mysql --rm mysql:5 sh -c 'exec mysql -h"$MYSQL_PORT_3306_TCP_ADDR" -P"$MYSQL_PORT_3306_TCP_PORT" -uroot -p"$MYSQL_ENV_MYSQL_ROOT_PASSWORD"'
5. Setup database and user

mysql> CREATE DATABASE yelpcamp;
mysql> CREATE USER 'sa'@'172.17.0.1' IDENTIFIED BY '(IJN8uhb';
mysql> GRANT ALL ON yelpcamp.* TO 'sa'@'172.17.0.1';
mysql> FLUSH PRIVILEGES;

6. Check privileges mysql> SHOW GRANTS FOR 'sa'@'172.17.0.1';
7. If you want to rerun docker container, run docker run mysql5

Api Document (from Express's view)

1. getAllCampgrounds    (GET)    http://localhost:8080/api/campground
2. createCampground     (POST)   http://localhost:8080/api/campground
3. getOneCampground     (GET)    http://localhost:8080/api/campground/:id
4. getOneCampground     (GET)    http://localhost:8080/api/campground/:id/edit
5. editCampground       (PUT)    http://localhost:8080/api/campground/:id/edit
5. deleteCampground     (DELETE) http://localhost:8080/api/campground/:id
6. createComment        (POST)   http://localhost:8080/api/comment
7. getComment           (GET)    http://localhost:8080/api/comment/:comment_id/edit
8. editComment          (PUT)    http://localhost:8080/api/comment/:comment_id/edit
9. deleteComment        (DELETE) http://localhost:8080/api/comment/:comment_id
10. signup              (POST)   http://localhost:8080/api/signup
11. login               (POST)   http://localhost:8080/api/login
12. logout              (GET)    http://localhost:8080/api/logout
13. profile             (GET)    http://localhost:8080/api/profile

How do I get set up?

• Clone the repo:

git clone https://LaurenceHo@bitbucket.org/LaurenceHo/angular4-express-mysql.git

or

git clone https://github.com/LaurenceHo/angular4-express-mysql.git

• Install npm package. Build and compile the dist folder:

npm install
npm run build

• Launch the whole web application:

npm run start-all

• Visit in your browser: http://localhost:8080

Reference

This project is based on https://github.com/moizKachwala/Angular2-express-mongoose-gulp-node-typescript. I learnt a lot from this project.

Existing major issues:

1. browserSync cannot reload the browser automatically when modifying client side code.
2. When user refreshes the browser, the login session would be gone, and user needs to login again.
3. Some UI issues did not solve yet:

• When user do place comment, the UI does display comment properly