A single-page application (SPA) demonstrating the VueJS+NodeJS+MongoDB stack.

The frontend employs a RESTful API requesting a local MongoDB instance with Mongoose ODM on ExpressJS and NodeJS server. The Swagger tools were used for building and documenting the API, and the API exposes an endpoint for accessing the Swagger UI.

The source code is (c) 2019 by Sergei Vasilyev, and is distributed by the author under the terms of MIT License.

The following instructions apply to Debian Linux distributions. Installation was tested on a clean Ubuntu Desktop 16.04 x64 instance, the client was test run in Chromium v.71 and Firefox v.65.

1. If on Ubuntu, open a Terminal window by pressing Ctrl+Alt+T. Clean apt cache and run updates.

	sudo apt-get clean
	sudo apt-get update
	sudo apt-get upgrade

2. Install Node.js.

	sudo apt-get install curl
	curl -sL https://deb.nodesource.com/setup_11.x | sudo -E bash -
	sudo apt-get install -y nodejs

3. Install MongoDB.

	sudo apt-key adv --keyserver hkp://keyserver.ubuntu.com:80 --recv 9DA31620334BD75D9DCB49F368818C72E52529D4

	echo "deb [ arch=amd64,arm64 ] https://repo.mongodb.org/apt/ubuntu xenial/mongodb-org/4.0 multiverse" | sudo tee /etc/apt/sources.list.d/mongodb-org-4.0.list

	sudo apt-get update
	sudo apt-get install -y mongodb-org

4. Change to the dir where this README file is located, e.g.

	cd ~/vue-mongodb-nodejs-example

5. Install prerequisite NPM modules.

	sudo npm install express body-parser mongoose validator swagger-ui-express yamljs

6. Run the local MongoDB instance.

	sudo service mongod start

7. Import test collections to MongoDB.

	mongoimport --db vue-mongodb-nodejs-example --collection clients --file ./db/export/clients.json
	mongoimport --db vue-mongodb-nodejs-example --collection providers --file ./db/export/providers.json

1. Run the webapp from this README file's directory

	npm start

2. Open the client in your browser

   http://localhost:8080/

3. Open Swagger UI in another browser tab

   http://localhost:8080/api-docs/

• clicks on the Name and Phone table headers to change table sorting;

• the filter is case-insensitive;

• double-clicks on the table rows bring about the Edit Client dialog;

• Edit/delete features of the New/Edit Client form are implemented as in-place editors as Bootstrap 4 prohibits stacked modal dialogs: "Bootstrap only supports one modal window at a time. Nested modals aren’t supported as we believe them to be poor user experiences."

Press Ctrl+C in the Terminal window.

	sudo service mongodb stop