Vue.js: Creating and Hosting a Full-Stack Site

Create and host a full-stack site from scratch. Learn how to set up a front end using Vue.js, set up a back end using Node.js and MongoDB, and host your site on Heroku.

Introduction

• Create and host a full-stack site with Vue.js
• What you should know
• Install Node.js and npm
• What to expect from this course

1. Create a Vue.js Front End

• Why Vue?
• Set up and run a Vue project
• Vue project structure
• Routing in Vue
• Add data, styles, and images
• Create a product page
• Create a product detail page
• Create a shopping cart page
• Create a navigation bar
• Create a 404 page in Vue
• Use modular components
• Challenge: Modular components
• Solution: Modular components

2. Create a Node Back End

• Why Node.js?
• Set up an Express server
• Test servers with Postman
• Route parameters in Express
• Get data from a server
• Use Nodemon to restart a server
• Create and delete server data

3. Add MongoDB to Your Back End

• Why MongoDB?
• Download and install MongoDB
• Add MongoDB to a Node.js server
• Add MongoDB to GET endpoints
• Create data in MongoDB
• Delete data in MongoDB

4. Connect the Front End and Back End

• Introduction to the axios library
• Load data from the server, part 1
• Load data from the server, part 2
• Add items to the shopping cart
• Improve the add-to-cart interface
• Remove items from the cart
• Challenge: Item already in cart
• Solution: Item already in cart

5. Host Your Site

• The release process
• Build and serve a Vue front end
• Set up Heroku and MongoDB
• Use environment variables in Heroku
• Push code to Heroku

Conclusion

• Next steps