Skip to content

Home

Jump to bottom
Ajesh Avirah John edited this page Nov 26, 2018 · 38 revisions

Welcome to the CRUD-MEVN-Post wiki!

| CRUD | MEVN | SPA | Post |
| Mongo Db | Express | Vue | Node | npm |
| Create | Read | Update | Delete |
| Single Page Application | Post App | Herok |

Follow the Instruction Below to learn & create your own CRUD-MEVN-Post:

  • 1: Create a New Project Folder
  • 2: Open Terminal or cmd prompt & cd into the New Project Folder.
  • 3: Terminal: npm i express cors body-parser mongodb
  • 4: Terminal: npm i D nodemon
  • 5: Go to Package.json & modify the script [test : ""] with
    "start": "node server/index.js",
    "dev": "nodemon server/index.js"

then save it.

Creating Initial Server or Backend

  • 6: Terminal: mkdir server
  • 7: Terminal: cd server
  • 8: Terminal: touch index.js
  • 9: Go to ./server/index.js & follow the comments 13 - 18
  • 19: Terminal: cd ..
  • 20: Terminal: npm run dev That will start the server on Port 5000,
    • Refer ScreenShots/1.png

  • 21: Terminal: cd server
  • 22: Terminal: mkdir routes
  • 23: Terminal: cd routes
  • 24: Terminal: mkdir api
  • 25: Terminal: cd api
  • 26: Terminal: touch posts.js
  • 27: Go to ./server/index.js & follow the comments 28-29
  • 30: Go to ./server/api/posts.js & follow the comments 31-39
    • Install ```Postman`` & follow folder/file:
      1. ScreenShots/2.png

      2. ScreenShots/3.png

      3. ScreenShots/4.png

      4. ScreenShots/5.png

      5. ScreenShots/6.png

      6. ScreenShots/7.png

  • 40: Terminal: npm i -g @vue/cli
  • 41: Terminal: posts/touch .gitignore
  • 42: Go to .gitignore & put files to be ignored.
  • 43: Terminal: vue create client
  • 44: Terminal: git commit -am 'Initial Backend Created'
  • 45.1: Terminal: git push -u origin master

Creating Initial Client or Frontend

  • 46: Go to client/src/components/
  • 47: change HelloWorld.vue to PostComponent.vue
  • 48: Go to client/src/App.vue
  • 49: change all HelloWorld to PostComponent & Save all.
  • 50: Terminal: cd client
  • 51: Terminal: npm run serve
  • 52.1: Client will be on localhost:8080,
    • follow folder/file: ScreenShots/8.png

  • 52.2: Terminal: git commit -am 'Initial Frontend Created'
  • 52.3: Terminal: git push -u origin master

Creating CRUD-MEVN-Post Client / Frontend

  • 53: Stop the Client http://localhost:8080 [@Terminal client: App running..
    keypress ctr+c to stop Client]
  • 54: Terminal: npm i axios
  • 55: Terminal: npm run serve
  • 56: create & go to client/src/PostService.js & follow the comments 57 - 65
  • 66: Go to client/src/components/PostComponent.vue & follow the comments 67 - 69
  • 70: In /client/src/PostService.js remove the local host link of the url.
  • 71: create & go to /client/vue.config.js & follow the comments 72 - 73
  • 74.1: In client Terminal: ctrl + c to Stop client
  • 74.2: In client Terminal: npm run build
    • follow folder/file: ScreenShots/9.png

Creating App production ready for Heroku

  • 75: Handle Production in /server/index.js follow the comments 75.1 - 75.2
  • 76: In server Terminal: ctrl + c
  • 77: Terminal: git add . && git commit -m 'Added Static folder & prep SPA'
  • 78: Create Heroku Account & install Heroku
  • 79: Terminal: heroku login
  • 80: Terminal: heroku create
  • 81: Terminal: heroku open
  • 82: grab the heroku repository
  • 83: Terminal: heroku git:remote -a crud-mevn-post
  • 84: Terminal: git status
  • 85: Terminal: git push heroku master
  • 86: Terminal: heroku open

Visit the live production site @ https://crud-mevn-post.herokuapp.com/

Done with production ready Heroku CRUD-MEVN-Post App, Hope I was able to help you with basics of MEVN stack.

Clone this wiki locally