Scaffold for WTAT1 SoSe 2021
This scaffold was generated with MEVN CLI - more details on the setup below.
How to use it
The app provides a backend (/server) with an express app, a frontend (/client) serving the vue components. For the backend with express you can just use the backend part in /server.
You can start the parts individually locally or in together in docker. If started locally, you'll need a mongo database on port 27027 (see below for an docker option)
Start client/server locally
mevn serve
and choose client or server. see the output on how to access the apps:
[nodemon] starting node server.js --port 9000/api --open
Listening On http://localhost:9000/api
App running at:
- Local: http://localhost:3002/
- Network: http://192.168.178.34:3002/
Note that the server port is specified in server.js, rather than taken from the command line parameter:
const port = process.env.PORT || 9000;
The client uses vue-cli-service
https://cli.vuejs.org/guide/cli-service.html#using-the-binary
Start client, server and database in docker
docker compose -f docker-compose-complete.yml up
Other options
There are also dockerfiles for either starting the database individually
docker compose -f docker-compose-database.yml up
or just the client/server (if you have a local database installation)
mevn dockerize
or
docker compose up
Note that you need to use docker-compose-complete.yml if you want to start client, server and mongo in docker.
Also, you might to remove "orphans" to start only the database if you started everything in docker earlier, e.g.:
docker compose -f docker-compose-database.yml up --remove-orphans
If you want to generate a scaffold yourself - documentation of the steps taken
-
see the doc
mevn init mevn serve mevn dockerize mevn generate
mevn init my-app & serve
```
starter template: Default
side template (Express.js): Yes
cd my-app && mevn serve
-> choose server / or client or both in two terminals
mevn dockerize
(also uses 9000 port - stop other server first!)
mevn generate
- generates crud scaffold for user model
See also the commits in this example for the changes generated by the scripts.
Testing with Jest
This documents the steps I took to set up testing with jest - already contained in the app scaffold.
Server
Add test modules to dev: (choose server)
mevn add jest --dev
mevn add @shelf/jest-mongodb --dev
mevn add supertest --dev
Client
mevn-cli installed mocha by default. The underlying vue-cli supports jest, too.
mevn add @vue/cli-plugin-unit-jest --dev
https://vue-test-utils.vuejs.org/
- remove mocha from package.json
https://vue-test-utils.vuejs.org/guides/
For the test examples to run, adaptations to the jest and babel config are crucial to ensure that babel translates the vue components prior to their import.