This article is based on an actual case of a successfully released project. From personal experience, that project was a great training for a frontend engineer. It provides the opportunity to expand their skills from developing single-page applications to developing APIs, cloud infrastructure, and DevOps, among other areas. Let's look at the key aspects that a frontend engineer could start with for the path of the full stack.
Use Serverless Framework for Infrastructure and API Functions
About Serverless Framework
The Serverless Framework is an open-source, developer-friendly framework for building and deploying serverless applications. It provides an easy-to-use, consistent, and vendor-agnostic way to define, deploy, and manage serverless functions and resources, making it easy for developers to build and run cloud-native applications.
Serverless Framework is based on the Infrastructure as Code (IaC) concept. Comparing it with other IaC services can help to understand its strengths.
Infrastructure as Code
YAML/JSON config files
HCL/JSON config files
YAML/JSON config files
AWS, Azure, Google Cloud, etc
AWS, Azure, Google Cloud, etc
All-in-one development solution for cloud-native applications
Provision, change, and version resources on ANY environment.
Provision, manage AWS and third-party resources
A Quick Sample of Serverless Framework
Let’s take a look at a sample Lambda-based API created using the Serverless Framework. You can find more sample codes here
As you can see from the sample code folder structure, a serverless project consists of two main parts: the application code and the configuration file for the infrastructure.
The handler.ts file creates an API that responds a simple message.
Then by a single magic command $serverless deploy, your API will be ready to use.
Plugins can also be used to enable additional cloud resources and functionality. In the above case, typescript plugin was added. In our real project, we added plugins for backend to use RDS, Data API, SQS, etc. For the frontend, since it's a Sveltkit based SPA, another plugin was used to deploy the built files to S3 and create a related Cloudfront distribution.
These features are extremely helpful to frontend engineers who may have limited knowledge of infrastructure and backend development, allowing us to begin full stack development with minimal prerequisites.
Summary of Serverless Framework
To summarize, these are the main features of Serverless Framework:
Infrastructure as Code: The framework allows developers to define their infrastructure and resources as code, using a configuration file, which can be version controlled, tested, and easily shared among team members.
Easy Deployment: The framework makes it easy to deploy your serverless application with a single command, and automates the packaging, deployment, and resource management tasks.
Plugin Architecture: The framework provides a plugin architecture that allows developers to extend and customize the functionality of the framework, by adding new plugins, or creating their own.
Local Development: The framework enables developers to test and debug their serverless applications locally, using the Serverless Offline plugin.
Overall, the Serverless Framework provides a great set of tools and features that make it easier for developers to build and deploy serverless applications, by providing a consistent and unified way to manage and deploy cloud resources.
Set up GitHub Actions with Serverless Framework for CI/CD
To ensure that your full stack applications are reliable and stable, it's important to use continuous integration and continuous deployment (CI/CD) practices. GitHub Actions is a popular CI/CD tool that integrates well with the Serverless Framework. With GitHub Actions and the Serverless Framework, you can set up automated testing, linting, and deployment processes that ensure your code is always up-to-date and running smoothly.
Workflow for CI
First, once a new PR was created, it will run jobs for lint and test. A static code analysis scan was also conducted in the end. Developers can then fix any detected issues even without requiring a manual code review, as all test and scan results will be updated in the PR conversation.
The deploy jobs run when a PR is merged to a target branch. Before and after the deployment, notifications are sent via Slack to inform about the status of the deployment. Environment variables, such as AWS and Slack keys, can be configured in the Environments of the GitHub Repo settings. Behind the deploy command npm run deploy:staging is the script defined in package.json :
Becoming a full stack engineer is an ongoing process of learning and practice. Keep up with the latest trends and technologies in both front-end and back-end development, and always be looking for ways to improve your skills. Join online communities, attend conferences and meetups, and collaborate with other team members to stay up-to-date and continue to grow as a full stack engineer.
To truly master full stack development, you'll need to build more full stack projects. Start by creating small projects that allow you to practice integrating front-end and back-end code. As you gain confidence, you can move on to larger, more complex projects that require you to use a wider range of tools and skills.
In today's digital age, mobile applications have become an integral part of our daily lives. From ordering food to managing finances, there seems to be an app for every need. Behind the scenes, these apps are powered by a technology that has revolutionize...
Spatial is a metaverse platform that allows anyone to create immersive 3D spaces, which can be instantly shared to the Web, iOS, Android, and VR, and explored by others. The Spatial Creator Toolkit, powered by Unity, allows you to add even more interactiv...