- MEVN app: Vue frontend used to Create Read Update & Delete (CRUD) cable installation data with a Node-Express backend & MongoDB database.
- Note: to open web links in a new window use: ctrl+click on link
- Cable pulling database idea inspired by time spent pulling electrical cables on an LNG plant in Northern Norway for Statoil. It is required to complete a cable database with details of cable, cable drum, amount of cable pulled and installed etc.
- Axios used to send/receive data from the MongoDB backend
- Backend node.js code separated into routes file with a Mongoose model Cable schema.
- Latest Mongoose v6 connection config. used (as of oct. 2021) with no deprecation warnings. Note an old config. will stop any Mongoose-based app from working.
- Vue 4 RouteRecordRaw route record provided by user
- Vue v3 JS framework
- Vue Router v4 the latest official router for Vue.js
- Vue CLI v5
- Axios v1, a promise-based http client, used to consume API data.
- Bootswatch v5 Bootstrap theme
- Express v4
- Mongoose v6
- cors v2 Cross Origin Resource Sharing Connect/Express middleware
- Node v16 JavaScript runtime built on Chrome's V8 JavaScript engine.
- Typescript v4
- MongoDB Atlas
- Thunder Client VS Code Extension lightweight Rest Client for Testing APIs
- rimraf the UNIX command rm -rf for node.
Dev Backend:
cd server
to change directorynpm i
to install dependencies- add MongoDB access
- Run
npm run dev
to run node.js server. - Navigate to
http://localhost:3000/api/cables
to see JSON object with cable list or an empty array if no cables (refresh after changes - does not auto-update). - CRUD operations can be performed on this backend using the Postman API dev tool or the Thunder Client VS Code Extension.
Dev Frontend:
npm i
to install dependenciesnpm run lint
to lint filesnpm run client
to run client dev server- Navigate to
http://localhost:8080/
. The app will automatically reload if you change any of the source files.
Build Full Stack:
npm run build
to create build file for both front & back ends- Navigate to
http://localhost:8080/
to see frontend andhttp://localhost:3000/
to see backend (refresh after changes - does not auto-update). - Heroku
heroku login
to login,git add .
thengit commit -m "commit message..."
thengit push heroku master
to deploy to Heroku
- 'cable.controller.ts' function to update cable by id
export const updateCableHandler = async (
req: Request,
res: Response
): Promise<Response<any, Record<string, any>>> => {
try {
const updatedCable = await Cable.findByIdAndUpdate(
req.params.id,
req.body,
{
new: true,
}
);
if (!updatedCable) {
return res.status(404).json({
message: "Cable to be updated was not found",
});
}
return res.json(updatedCable);
} catch (error) {
return res.status(500).send(error);
}
};
- Data successfully stored on MongoDB Atlas database
- Status: Working full-stack CRUD app with MongoDB Atlas database
- To-Do: Replace any data types, separate controller functions from routes, add date field
- To-Do: fix navbar burger button, styling, add cable fields, add drop down menu for cable drum selection etc.
- This project is licensed under the terms of the MIT license.
- Repo created by ABateman, email:
gomezbateman@yahoo.com