-
Notifications
You must be signed in to change notification settings - Fork 0
Next Steps
Welcome to this module on finishing touches and next steps. We've gotten a lot of work done on the Express API server, and things have been tested successfully using Postman with the locally running instance of MongoDB. But at this stage of development, it's time to move the database to the cloud, or at least to an on-premise database server. In this module, we'll start by doing just that and migrate the demo application's MongoDB instance to a cloud hosted offering. To finish this course off, we will review the completed Vue.js client project and test that out against our newly migrated database. As mentioned earlier in the course, the focus here was on Mongoose, so not much time was devoted to the UI project. To wrap the course up, we'll look at some other resources and Pluralsight courses on Vue.js and other UI frameworks that you may wish to consider, as well as additional information on MongoDB.
In this clip, we will start looking at some methods of migrating a local MongoDB instance to the cloud. One option you should consider and research is using the MongoDB package component, mongodump and mongorestore. These are utilities provided by MongoDB to back up a copy of your database, either a single instance or shards and then restore those backups. Also, some of the cloud-based MongoDB database hosting options that you will see provide their own migration tools. MLab and Atlas both provide documentation and tooling for migrating your database to their services. What we will use is the export and import features found in Studio 3T, which will allow us to export each collection as a JSON object and preserve the schema and data types. Let's open up Studio 3T and use it first to export the collections, including the schema and documents from the local virtual standups database; Then connect to the mLab sandbox account and use the import feature in Studio 3T to pull those collections into our cloud-based database. Let's make sure MongoDB is running locally first, and then open up Studio 3T, and first connect to our locally running instance of MongoDB, select the virtualstandups database, and then Export. For the purposes of this demo, we'll export JSON files and press Next. Likewise, here, we'll stick with the default of JSON mongo shell and click Next again. Now we're being asked to select a directory to export the selected database. Each collection will be exported as its own JSON file here. I'll export these to c:/Temp/export, and one last click on Start Export to get this process done. You should notice on the lower left, the exports are done on each collection, including the system indexes, which were exported to JSON files. Let's open up a browser and look at the mLab sandbox account we have set up. Once again, make note here that mLab is becoming part of MongoDB, meaning this account will soon be migrated to Atlas. Log in with the username and password. And the sandbox database that we'll be migrating this to is this one, virtualstandup. Notice that mLab provides you with a sample of the connection string here. This is primarily what I wanted to point out here. Moving back to Studio 3T. I already have that connection string set up here in Studio 3T, so let's get connected now. In the virtualstandup database, again, in the sandbox account, you can see 0 Collections. Click Import on the top menu bar. We just exported to JSON files, so we'll leave this set to JSON mongo shell and press Next. Now select the JSON Source files from the temp export folder. I'll grab all of these at once, and you can see that each JSON source is pointing to the correct collection. Click Next to see the preview, and Next once more for a summary, and now Start Import. Now let's confirm a successful import by opening up let's say the projects collection. That looks good to me. And teammembers, and that looks fine as well. I think we've successfully migrated to the cloud.
Now it's time to do a quick review of the Vue.js client project. Because this will be a quick review, I've provided the source for the Vue.js project for you to review and download at this GitHub link. After the review of the client project, we will look at some other trainer resources you should consider when it comes to a more in-depth look at Vue.js. Let's open Visual Studio Code back up, and now that we've migrated the database to the cloud using Studio 3T, let's be sure to change the connection string details in our Express API server project. Then we will do a quick review of the finished Vue.js client project. Code . to open up Visual Studio Code. And as mentioned before, now that we've migrated our MongoDB database to the cloud, be sure to change the connection string as shown here. As a reminder, this connection string was made available to us on the mLab website. Close the server project and open up the client project now. All of the code that we'll be looking at is in the src folder, and we'll start by reviewing the main.js file. This is where everything in the Vue.js application is kicked off from. Take note of the various imports here, Vue, of course, and Vuetify, and one of particular importance to the work we've done in the Express API server project is axios. Here is where we've asked Vue to make sure that axios is available globally throughout the application and set the base URL to our locally running Express API server running on port 8081/api. Calls to the API are made in the Vuex state store, which again, was imported here. Opening store.js, we can see that we're importing Vue and Vuex and then asking Vue to use Vuex. The state object is the place where we keep track of the application state, and the getters are set up to respond to any changes in this state so that anything that is bound to one of these getters will react to the state change. This next section is for actions, the methods we want to expose to expose to consumers of the Vuex state store, such as this import action, getStandups. Notice that it is using axios to call out to the API with a GET request to the standup endpoint. The response from that call is committed to the standup note's mutation, which we'll see here in a moment. And here is saveStandup, which is once again using axios to communicate with the API to post a new standup note to MongoDB through Mongoose. Here is the previously mentioned standup note's mutation, which is used to save the data payload. The standup note we wish to save in this case to the Vuex state store. The UI component that is bound to the associated getter will then react to the state change and rerender the list of standup notes. Moving back to the main.js file. Notice at the bottom of the file this render line where we're passing in App. This references App, which was imported above from the App.vue file. Let's take a look at that now. Vue files typically have three sections, template, script, and style. The template section is where you find the typical HTML markup as we see here. This is our base or parent Vue file that houses all of the other components. Speaking of components, in the script block, we have a Navigation component imported and registered in the components sections. In Computed, we see one example of wiring up the Vuex store getter, teamMembers in this example. Scrolling down more within the scrip block, you see methods. This is where we expose the various functions used to get data from the Vuex state store or perform other task. For example, notice getProjects and getTeamMembers here. These methods are used to dispatch a request to the store asking the store to call out to the API and get data. Then you take the state data accordingly. We want this to take place as soon as the page is loaded, and that is accomplished here in the mounted lifecycle event handler. Now let's take a look at this Navigation component, which is found in the components folder. This is just another self-contained Vue file with the same structure, template, script, and style blocks. This component is for the left pop-out navigation we saw earlier in the course when demonstrating the completed project. There were two other components in this project, StandupDialog.vue, which is the model dialog we'll use here in a few moments to enter in a new standup note, and the last component is StandupList, which is responsible for displaying the list of the 12 newest notes. Notice here with the notes computed property, we're getting this list of notes from the Vuex store. Back in the App.vue file now, and notice this block of code, router-view, within a Vue content component. This is where we inject other views such as the Home.vue as shown here in the router.js file. And the Home.vue is where we find the previously looked at StandupList and StandupDialog components being imported and used. That was a quick overview of the Vue.js client project. And now let's open up a terminal and test this out, making sure first that mongod is running, as well as the Express API server. And now, moving up into the client folder, yarn serve to kick off the web application project. Open up a browser and head over to localhost port 8080, and the application is up and running. And this data is now coming from the cloud hosted database. Let's try adding a new standup note now, and select a team member and project, and fill yesterday and today with filler text just to test, press SAVE, and we're good.
As we close out this Mongoose Fundamentals course, and as promised, let's explore a few more training resources to consider. We went through the review of the client project pretty quick. And as noted earlier, if you would like to learn more about Vue.js and why you should consider it for your own web application projects, take a look at a couple of the Pluralsight courses listed here or simply use the URL shown here to search the Pluralsight library for all Vue.js related courses. Vue.js is growing in popularity, so it would be worth your time to explore it and learn more by taking one of these courses. And as a quick reminder, feel free to download the Vue.js client project for this course and review the code on your own time. This course obviously focused on Mongoose, but having a good understanding of the underlying database, MongoDB, is very important to. So listed here are a couple courses on MongoDB you should consider taking as well, or you can search for all MongoDB related courses at this URL. So what's next? If you have access to the exercise files, please consider downloading that and reviewing the source code for the Express API server project. And once more, you have access to the client project there at the GitHub link mentioned earlier. As things typically go with demo applications, the demo application for this was not overly complex, but was useful in discovering the basic principles and features of Mongoose. That was the ultimate goal of this course. Consider expanding on the schema files or come up with your own custom validators. If you're more familiar with React, or Angular, or another UI framework, consider developing a client project using the framework of your choice and have it communicate with the Express API server developed in this course. Lastly, if you would like to go into more depth on Mongoose, take a look at my prior course, Moving Forward with Mongoose.js. Despite it being for a prior version of Mongoose, the advanced Mongoose topics discussed there, by in large, still apply and will be helpful to you.I hope that you've enjoyed this course, Fundamentals of Mongoose for Node and MongoDB.