This application is a recreation of the instrument selling website Reverb.com. I am simplifying some of the features, but most of the primary functions of the site will eventually be recreated. This application is built in Vue, Vuex, Vue Router, Express, Node JS and Mongo DB.
/
Download the repository and unpack. There are two primary folders, the 'Client' folder and the 'Server' folder which are the front end and back end, respectively.
You'll need to write some environment variables with all of the essential keys to properly use this application.
Vue CLI uses several different .env files for different environments. The front end utilizes '.env.development' and '.env.production'.
in /client/.env.development
#The address and port number of the back end Express server, default is 3000
VUE_APP_API_URL=http://localhost:3000
#The name of the front end application
VUE_APP_NAME="Your App Name"
in /client/.env.production
#The deployment URL, I use Heroku for deployment, will look something like https://yourAppName.herokuapp.com
VUE_APP_API_URL=http://localhost:3000
#The name of the front end application
VUE_APP_NAME="Your App Name"
The Express server also has an environment file, these will be what variables you use for development. In the Heroku dashboard we overwrite these variables for the production variables.
in /server/.env
#This variable is your remote mongo string, I use a free MLAB database and create a user on it. Inside of the MLAB dahsboard there will be a connection string to copy. Will look something like 'mongodb://<USER>:<PASSWORD>@dsXXXXXX.mlab.com:XXXX/XXXXX'
DB_URL=""
#A random string of numbers and letters to use as a json webtoken secret
JWT_SECRET=""
#In development, this will be the address of the front end when you run 'npm run serve' from the front end. Will look like 'http://localhost:8080'.
APP_URL=""
#Application name, used on emails generated by nodemailer
APP_NAME=""
#This application uses nodemailer and an outlook account to send emails. You can change the provider type inside of the 'sendEmail.js' methods if you don't want to use Outlook. This is not a sure fire way to send emails but it does generally work, they get flagged for spam a lot by most big email providers though. This is something that needs to be changed at some point, but seemed good enough for proof of concept.
EMAIL_USER=""
Email_PW=""
We need to run NPM installs in both the front end and back end folders.
From the project root,
cd client
npm install
From the project root,
cd server
npm install
After you've created the proper environment variables and run npm installs, you can start the application.
In Client directory,
npm run serve
In Server directory,
nodemon
You should see a "database connected" message in console if the application connected to the remote database and started succesfully.
In the project root, you'll notice a package.json file. This file is used by heroku to run the same setup as above but includes a client build step to generate the front end files for the express server to serve. This allows the front end and server to be hosted on the same Heroku deployment. You could separate these out if you wanted to scale the backend and front end differently within Heroku, but it's much easier to have one repository to deploy.
Be sure to change your deployment variables within Heroku!