First dive into Vue with Typescript + Lumen + Gitlab CI/CD (Part 1 — Frontend)

Robin Oster
Mar 14, 2018 · 8 min read
Will it still work? Or will all fall into pieces?

Lets start with the frontend

Project folder structure

Folder structure in the frontend project

From API to Vue JS component

JSON return of API and the corresponding models
Interfaces are used to store the structured data
Webservice class which is responsible for the topic endpoint

Vuex and using Local Storage

Vuex folder structure
Main vuex store file including the other stores
Module based stores
Vuex module topic store implementation

Routing Configuration

Routing file to manage all views

Integration tests with Cypress

Automated integration tests with cypress
Pretty straightforward test writing with cypress
Gitlab monitor of the current build status (The failed one was included for demo purposes :P)

That’s it for now

Robin Oster

Written by

Founder of Prine Software Engineering —

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade