Home

Overview

simaps-front is a Vue3 application - client-side of KAVALÉ project.
This web app aims to highlight hike trails in France.

Environments

simaps-client/.env
simaps-client/.env.production

npm run dev uses .env mode
npm run build uses .env.production mode

Configuration .env files sets global variables :

• API to consume VITE_APP_ROOT_API
• App title : VITE_APP_TITLE
• Firebase API Key : VITE_FIREBASE_API_KEY

Components and Views

The general idea is to keep reusable components tied to src/components. On the other hand, components tied to router can be seen as pages and are stored under src/views.

MapDetails component is the main component as it handles Leaflet map and hikes data.

Router

Vue Router is used. It's the official Router for Vue.js. See src/router/index.js.

Leaflet

The Leaflet map object is referenced as myMap. Then are used the following :

• vue-leaflet : a wrapper library to easily encapsulate most of the functionality of Leaflet. A series of composable vue-components are provided here
• custom wrappers compatible with vue3
• native leaflet plugins

API requests

Axios is a popular promise-based http client used to consume APIs. Asynchronous http requests are sent via async/await.

Auth with Firebase Auth

Authentification is required to perform some specific actions like create or update hikes. Firebase Auth is used to this end. Login is possible anonymously or with Google and Github providers. Then a native vuefire watcher is used to check whether user logged in or not.

// user session
import { useFirebaseAuth } from 'vuefire';
import { onAuthStateChanged } from 'firebase/auth';

const auth = useFirebaseAuth()
const isLoggedIn = ref(false)
const isAuthLoading = ref(false)

// native vuefire watcher to check whether user logged or not
onAuthStateChanged(auth, (user) => {
  isAuthLoading.value = false
  if (user) {
    isLoggedIn.value = true
  } 
  else {
    isLoggedIn.value = false
  }
});

Deploy with Firebase Hosting

CI configuration .github/workflows

Static App is hosted by Firebase Hosting.

CI is configured with GitHub Actions. Credentials are defined in GitHub Actions secrets and variables.

Custom Domains

The custom domain kavaleapp.com is used instead of the Firebase-generated domain. DNS zone is configured on Cloudflare.

License

Copyleft GNU GENERAL PUBLIC LICENSE v3.0