A GPS tracking application with Vue.js frontend and Go backend.
/frontend- Vue.js application/backend- Go server
- Clone the repository
- Set up environment variables (see below)
- Follow setup instructions in frontend and backend directories
- Copy
.env.exampleto.envin both frontend and backend directories - Fill in your own environment variables
This is my submission for the project detail. The project contains 2 folders here: (https://github.com/alexbeattie/OneStepGPS). One is labeled frontend and the other is labeled backend.
The backend is written in Go and the frontend is written in Vue.js. The backend is intended to connected to connect to a PostgreSQL database in order to demonstrate persistence.
Persistence / state is shared through the frontend through the use of Vue's Vuex state management package interfacing with PostgreSQL database.
The local repo setup and configuration of the Go web server differs from the production server in the initial configuration.
For the localhost - I put both the Go web server files under a folder entitled backend and beside it I created another folder called frontend. The frontend contains the Vue.js project in its entirety.
The variance mostly is in the main.go file.
When you put the local version up on an EC2 instance and connect to an AWS RDS PostgreSQL database you need to account for the ports, url strings, CORS and SSL.
I created an AMI (Amazon Machine Image) of an Ubuntu instance Amazon EC2. The container uses Security Groups, which need to be configured to allow incoming connections for ports 443 & 80, https & http respectively.
This will also need to be connected to your PostgreSQL database instance, which, in this case is also hosted on AWS their RDS.
Once you do that, you run into the problem of serving an app from a domain such as 34.207.185.237, which is, obviously, not good. This also presents the TLS/SSL certificate validation warning, which is overcome through creating the proper certs & keys.
In this case, I mapped the domain onestepgpsdemo.com to the domain 34.207.185.237 in order to appropriately initiate the TLS protocol handshake / authentication of the domain name. I did this with Lets Encrypt and AWS R53
This project demonstrates a Go web server using the following packages and features:
-
Gin for HTTP routing and middleware.
-
CORS middleware from
github.com/gin-contrib/cors. -
GORM for database interactions with PostgreSQL.
-
dotenv for environment variable management.
-
A modular architecture with configuration, handlers, models, and services.
- Vue.js 3
- Vuex 4
- vue3-google-map
- Lodash
- Tailwind CSS
- Go
- PostgreSQL (AWS RDS)
- EC2
- Vue files served from the EC2 Instance from the Vue.js /dist export
The application integrates with the OneStepGPS API:
- Base URL: https://track.onestepgps.com/v3/api
- Documentation: https://track.onestepgps.com/v3/apidoc/
- Database Integration: PostgreSQL with automatic migrations.
- API Endpoints:
/api/v1/preferences/:userId(GET/PUT) for managing user preferences./api/v1/devices(GET) for fetching device information./v3/api/device-info(GET) for retrieving detailed device information./v3/api/route/drive-stop(GET) for driving and stopping routes.- CORS: Configured for both development and production environments.
- Environment Variables: API keys and sensitive data managed via
.env.
OneStepProj-main/
├── frontend/
│ └── src/
│ ├── assets/
│ ├── components/
│ │ ├── device/
│ │ │ ├── DeviceFilters.vue
│ │ │ ├── DeviceListItem.vue
│ │ │ └── DriveStopModal.vue
│ │ └── map/
│ │ ├── AdvancedMarker.vue
│ │ └── CustomInfoWindow.vue
│ ├── composables/
│ │ ├── useDevices.js
│ │ ├── useGeocoding.js
│ │ └── useMap.js
│ ├── services/
│ │ ├── api.js
│ │ ├── deviceMetrics.js
│ │ └── preferencesServices.js
│ ├── store/
│ │ ├── modules/
│ │ │ ├── devices.js
│ │ │ └── mapSettings.js
│ │ └── index.js
│ ├── utils/
│ │ ├── deviceStatus.js
│ │ ├── formatters.js
│ │ ├── index.js
│ │ └── unitConversion.js
│ ├── views/
│ │ └── MapSettings.vue
│ ├── App.vue
│ └── main.js
└── backend/
├── handlers/
├── models/
└── services/