/express-vue-starter

A Full-Stack Express & Vue Project Starter

Primary LanguageJavaScript

Express + Vue Starter

This is a Full-Stack project starter using Express.js and Vue.js. This is useful if you have to build similar projects. You can just clone the repo and start bulding your app without having to setup everything from scratch.
Laravel Mix is used to compile all the front-end assets.

Getting Started

  • Installation:

    • Clone this repo

    • run npm install to install all dependencies

    • Open the .env-example file and copy the contents to a .env file in the root of the project.

  • Run

    • Note: you'll need two ternimal windows open so you can run the below commands, one in each terminal
    • Start the Express server by running : npm start or if you have nodemon installed: nodemon npm start
    • Run npm run watch to compile the front-end assets and vue components
    • Go to http://localhost:3000 to see the app.

  • Database Setup

    • MySQL is the default database server. To use PostgreSQL or another relational database, simply update the environment variables:
      • DEFAULT_DB_CONNECTION=[ your default database server ie: mysql, postgres, sqlite, etc.]
      • mysql2 is already installed and ready to go.
      • This project uses Sequelize as the ORM. Learn how to use Sequelize here
      • After you have created and connected a database, go to the main app.js file and uncomment this block:
        models.sequelize.sync().then( () => { console.log('Database synced successfully!'); }).catch( (err) => { console.error(err, "Something went wrong"); });

  • Express

    • All express views are located in resources >> assets >> views
    • All API related routes should go in routes >> api.js
    • All user specific routes should go in routes >> users.js
    • All other web routes should go in routes >> web.js

  • Vue

    • All Vue components and related scripts are in resources >> assets >> js