How to plan, build and migrate a scalable Azure environment for a full-stack SaaS service?

The client project MyDigiMap SaaS was designed to help organizations to manage their IT architecture, processes, integrations, contracts and to plan their IT investments. The development teams challenges revolved around complex data structures and authentication, user privilidges and team formations logic. Solving these challenges with logic and technological solutions was my task.

Next images are an small reference to tasks about designing a team creation and a user lifecycle from app, sales and marketing perspectives on a swim lane.

MyDigiMap SaaS had been built on a PHP Laravel framework and deployed with development and staging environments to Laravel Forge service and Digital Ocean Ubuntu virtual machine for production using Docker.

Preliminary technology stack:

• PHP & MySQL Backend
• React.js Front-end with Context API stage management
• Laravel Framework
• Docker container
• Auth0 IAM solution
• Digital Ocean Deployment

The app included an built in JavaScript front-end, using React.js that had been embedded to the Laravel build and a MySQL database that was built on local development environments for local development. This architecture was problematic considering scalability of the app.

• API connections to third party services difficult to execute
• Business Logic layer difficult to identify
• Development requires all code in one repository and code splitting difficult
• Locally developed builds required database on local machine
• Front-end development slow due Laravel build times
• Deployment and hosting expenses difficult to manage
• Multiple clients API connections not possible without complex authentication challenges

The client organisation was working in Microsoft environment so the Azure Cloud services were a natural choice for the migration.

The steps to transform the solution and team for the migration required following planning steps:

• Environments and their respectful repositories and pipelines in Azure Dev Ops
• Resource groups and app services in Azure portal
• Separation of backend and frontend services in the current app solution
• Clear respectful responsibilities in the development team
• Authentication flow and required authentication steps
• API Gateway design
• Redefining business logic layer

The benefits for the microservice architecture and separation of backend and front-end layers opened possibilites for API connectivity to customer data without specific client connection with respectful authentication only. Thus the front-end needed a new, in this case Node.js express server for it's own business logic, that in the future will open possibilities for more complex front end behaviour, like real time messaging and native app -like behaviour.

Separating front-end and backend repositories transformed the code base into individually manageable instances and improved continuous integration.

Benefits of migration to Azure also included CI pipeline improvements and managing deployment environments separately for the backend and front end. Azure contains variety of tools such as API managers ect. that can later be implemented to improve data flow and management.