A MEVN boilerplate setup with:
- Example CRUD functionality
- Auth/user functionality
- Lazy-loaded photos
- Validation
- Pagination
Includes Heroku deployment walkthrough.
Requires manually setting up a MongoDB database.
npm i -g nodemon
nodemon
cd client
npm i
npm run serveCreate a .env file in your root directory and add:
MONGO_URI=<your-mongodb-connection-string>
JWT_SECRET=<hex_string_from_server.js_function>
EMAIL_ACCOUNT=<your-gmail-account>
EMAIL_PASSWORD=<your-google-app-password>
PORT=3000Create a .env file in the client directory and add:
VUE_APP_NODE_ENV=developmentIn server/routes/api/auth.js and server/routes/api/posts.js, inside the collection functions, replace "vue_express" with your database name:
return connection.db('vue_express').collection('users');For the photo page to work, go to Pixabay and register for an account. Then go to the docs page, copy your given API key and replace <API_KEY> in the Axios request of the photos page.
Else, you can set up your own backend solution for photos and the frontend should fit to suit.
Create a Fontawesome kit and replace the one already in the <head> of client/public/index.html.
Then it will be available at http://localhost:8080.
Express
npm init
npm i express cors mongodb dotenv bcryptjs jsonwebtoken compression helmet nodemailer morganIn package.json replace
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},with
"scripts": {
"start": "node server/server.js",
"serve": "npm run serve --prefix client",
},Vue
npm i -g @vue/cli #If not already installed
vue create client
cd client
npm i axios vue-outside-events vue-meta vue-lazyload vue-scrollactive vue-toastedVue
cd client
npm run buildHeroku
Make an account if you haven't already.
Then from your terminal:
heroku login
heroku create <your-app-name>Then go to https://dashboard.heroku.com/apps click on your app, click 'deploy', choose the GitHub deployment method and follow the instructions.
Also, go to your apps settings and set config vars matching your root .env variables. Set a config var for VUE_APP_NODE_ENV but add a value of production instead of development, then add another variable with a key of NODE_ENV and value of production.
If you've chosen automatic GitHub deployment on Heroku and something isn't working, try manually deploying instead, sometimes the automatic deployment can act a little strange.
In MongoDB Atlas go to network access and allow IP addresses from anywhere or add specific IP addresses if known.
Make sure you run npm run build in /client before deploying or your changes won't be served.
If you're having trouble with Sass, make sure to install Live Sass Compiler (if using VSCode, otherwise consult the docs) and configure your settings.json to include this:
"liveSassCompile.settings.formats": [
{
"format": "compressed",
"extensionName": ".min.css",
"savePath": "/client/public/css"
}
],Otherwise, it may be an error on my end so submit an issue if you think this is the case.
Credit to Brad Traversy for providing most of this code from his tutorials. To learn more about this repo check out his videos covering both MERN and MEVN.