UI-Ready Full-Stack Vue.js, Express Web App

Hello, everyone!

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.

Oh! I haven't introduced myself. My name is Adrian and I work as CTO, TL, Developer, and writer for  AppSeed.

Prerequisites for this guide: Basic knowledge of Javascript, Vue.js, Express and (optionally) a Github account to access and use the code

What to expect from this guide:

  1. Build a usable, tested and production-ready app (like this one)
  2. Get the sources of this full stack app, and use them for free
  3. Build & start the app in either development or production mode by following the README files provided on @Github
Argon Design System - Full Stack App in Vue.js / Express

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 git@github.com:rosoftdeveloper/appseed.git
cd appseed/starter-express
npm i # install the dependencies
npm run start # start the server
```

Step 2 - Download and start the Vue.js app (from the same repo)
The Vue.js starter is UI-Ready with Argon Design System provided by Creative-Tim.

```
git clone git@github.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.

In case you need to combine this UI with another backend like Laravel or Flask, feel free to use our fullstack app generator. For free support, join us on Discord or Facebook.

Show Comments

Get the latest posts delivered right to your inbox.