The goal of this article is to help developers, especially the beginners to speed up heir Vue.js / Express development. In case you decide to use Vue.js to build your next app, where do you start?
These are some of the options:
- read the official Vue.js docs
- use a starter kit
- an app generator
- write everything from scratch
Any of those might work, depending on your skills and perseverance. This article describes my personal choice. Feel free to follow it.
What to expect from this guide:
- Build a usable, tested and production-ready app (like this one)
- Get the sources of this full stack app, and use them for free
- Build & start the app in either development or production mode by following the README files provided on @Github
I've decided to write this article because the existing Vue.js / Express starters are facing two major issues:
Lack of support. if you want to use a starter and hit a problem that you can't handle, you're stuck at that point. If you are using that project for learning proposes, it's not a big deal. But if you planned to use that starter for production, then you have an issue.
Almost all starters are not UI-Ready. I mean you have a stable stack, and that's really good, but until you can actually use that stack to show something to a client, it will take some time to integrate a nice UI.
So, I'm writing this article because I want to provide you a fully usable Vue.js app within only 5 minutes.
Step 1 - Download the Express server from AppSeed Github Repo
Here you will find a tested Express server enhanced with JWT authentication, minimum API to authenticate users and a comprehensive README. To start the backend:
``` git clone firstname.lastname@example.org:rosoftdeveloper/appseed.git cd appseed/starter-express npm i # install the dependencies npm run start # start the server ```
``` git clone email@example.com:rosoftdeveloper/appseed.git cd appseed/starter-vue/argon-design-system npm i # install the dependencies npm run serve # start the app ```
Features and facts:
- Frontend and backend are decoupled. By doing this, it is really easy to switch to another backend like Laravel, Flask or Hapi
- Vuex store to save the state of the current user
- JWT token authentication between frontend and the backend
- UI Ready - Argon Design System
To deploy the app, you should:
- start the backend on your production server
- build the frontend for production
- deploy the frontend on a web server like nginx, apache, caddy.