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.
- The latest version of Nodejs need to be installed.
- Docker MySQL5 container
- Run
docker pull mysql:5
- Run
docker volume create mysqldata
- Run
docker run --name mysql5 -p 3306:3306 -v mysqldata:/var/lib/mysql -e MYSQL_ROOT_PASSWORD=my-secret-pw -d mysql:5
- 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"'
- 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;
- Check privileges
mysql> SHOW GRANTS FOR 'sa'@'172.17.0.1';
- If you want to rerun docker container, run
docker run mysql5
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
- 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
This project is based on https://github.com/moizKachwala/Angular2-express-mongoose-gulp-node-typescript. I learnt a lot from this project.
- browserSync cannot reload the browser automatically when modifying client side code.
- When user refreshes the browser, the login session would be gone, and user needs to login again.
- Some UI issues did not solve yet:
- When user do place comment, the UI does display comment properly