Frontend to the Cloud Made Easy - A ReactJS + AWS Workshop

certificate
Recording and certification are available to Multipass and Full ticket holders only
Please login if you have one.
Rate this content
Bookmark

This workshop enables you to learn how to develop React applications, and then deploy them to the cloud (or building them to the console) coupled with a backend, fully abstracted, with no complex backend configuration, simplifying the building and deployment of frontend & web apps to the cloud.

This workshop has been presented at DevOps.js Conf 2024, check out the latest edition of this JavaScript Conference.

FAQ

Wing Lang is an open source programming language designed to run in the cloud. Unlike traditional programming languages that compile to run on specific computers, Wing Lang compiles to various cloud platforms like AWS, GCP, and Kubernetes.

The workshop aims to teach participants how to build a simple React application using the Wig toolchain, Wing Lang, and various cloud services.

Uri is the Director of Engineering at Wig and was invited by Eyal Keren to help ask questions during the workshop.

WebSockets are used to handle real-time communication, ensuring that the counter updates automatically across all systems.

The backend services include API Gateway, WebSockets, and various cloud resources such as AWS S3 buckets and Lambda functions. Wing Lang is used to compile and deploy these services.

Yes, Wing Lang can integrate with other programming languages like TypeScript and JavaScript. It can also run code in the cloud using Docker.

The application can be deployed to the cloud by compiling the Wing Lang code to a designated cloud platform like AWS. The deployment process involves creating and configuring various cloud resources, such as API Gateway, Lambda functions, and S3 buckets.

Wig is a company that has an open source project. The context of the workshop suggests it is related to a toolchain for JavaScript, React, and Wing.

Eyal Keren is the Chief Product Officer of Wig, a company based in Tel Aviv.

Participants will build a simple React application with a title and a counter. The counter updates automatically across all systems using WebSockets for real-time communication.

Eyal Keren
Eyal Keren
59 min
21 Feb, 2024

Comments

Sign in or register to post your comment.
Video Summary and Transcription
We will be building a simple React application using Wig, a toolchain for JavaScript, React, and Wing lang. The Wing compiler allows us to compile applications into Terraform JSON files that can be deployed on AWS. We can handle events on the cloud bucket, connect the backend and frontend using Vite, and use environment variables to expose the API gateway URL. We can create a REST API interface for the application and connect it to a DynamoDB for data storage. Lastly, we can use WebSockets to synchronize the counter with the backend and deploy the application to AWS using Terraform and AWS CLI.
Video transcription and chapters available for users with access.

Watch more workshops on topic

Building Serverless Applications on AWS with TypeScript
Node Congress 2021Node Congress 2021
245 min
Building Serverless Applications on AWS with TypeScript
Workshop
Slobodan Stojanović
Slobodan Stojanović
This workshop teaches you the basics of serverless application development with TypeScript. We'll start with a simple Lambda function, set up the project and the infrastructure-as-a-code (AWS CDK), and learn how to organize, test, and debug a more complex serverless application.
Table of contents:        - How to set up a serverless project with TypeScript and CDK        - How to write a testable Lambda function with hexagonal architecture        - How to connect a function to a DynamoDB table        - How to create a serverless API        - How to debug and test a serverless function        - How to organize and grow a serverless application


Materials referred to in the workshop:
https://excalidraw.com/#room=57b84e0df9bdb7ea5675,HYgVepLIpfxrK4EQNclQ9w
DynamoDB blog Alex DeBrie: https://www.dynamodbguide.com/
Excellent book for the DynamoDB: https://www.dynamodbbook.com/
https://slobodan.me/workshops/nodecongress/prerequisites.html

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

AWS Lambda under the hood
Node Congress 2023Node Congress 2023
22 min
AWS Lambda under the hood
Top Content
In this Talk, key characteristics of AWS Lambda functions are covered, including service architecture, composition, and optimization of Node.js code. The two operational models of Lambda, asynchronous and synchronous invocation, are explained, highlighting the scalability and availability of the service. The features of Lambda functions, such as retries and event source mapping, are discussed, along with the micro VM lifecycle and the three stages of a Lambda function. Code optimization techniques, including reducing bundle size and using caching options, are explained, and tools like webpack and Lambda Power Tuning are recommended for optimization. Overall, Lambda is a powerful service for handling scalability and traffic spikes while enabling developers to focus on business logic.
AWS Lambda Performance Tuning
Node Congress 2024Node Congress 2024
25 min
AWS Lambda Performance Tuning
This Talk covers various optimization techniques for Lambda functions, including parameter fetching, code minification and bundling, observability with Power Tools and X-Ray, baseline testing with load testing tools, caching with Elastic Cache and Redis, and optimizing code size and memory usage. The importance of library choices, power tuning for cost and performance, leveraging subprocesses and sandboxes, and adjusting concurrency limits are also discussed. Overall, these techniques can significantly improve Lambda function performance.
Demystify the DX for Lambda functions
DevOps.js Conf 2024DevOps.js Conf 2024
30 min
Demystify the DX for Lambda functions
Welcome to this session on Lambda Developer Experience. Learn about using AWS Cloud Development Kit (CDK) to write code in your favorite language and automatically generate CloudFormation templates. Test locally with the SAM CLI and deploy with CDK. Accelerate testing and updates with CDK flags. Use the AWS Toolkit to invoke Lambda functions, analyze logs, and generate code with Application Composer.
Building Real-time Serverless GraphQL APIs on AWS with TypeScript and CDK
React Summit 2020React Summit 2020
25 min
Building Real-time Serverless GraphQL APIs on AWS with TypeScript and CDK
This Talk provides an introduction to JavaScript and React, as well as insights into building real-time serverless GraphQL APIs with TypeScript, AppSync, and CDK. It covers the concepts of GraphQL schema, data sources, and resolvers, as well as the use of GraphQL subscriptions for real-time communication. The Talk also highlights the features of AppSync and CDK for building APIs and infrastructure. It concludes with a demonstration of creating an API with CDK and AppSync, including the creation of Lambda functions and DynamoDB tables.
Automate React Site Deployments from GitHub to S3 & CloudFront
DevOps.js Conf 2021DevOps.js Conf 2021
33 min
Automate React Site Deployments from GitHub to S3 & CloudFront
This Talk focuses on automating React deployments to S3 and CloudFront using a CICD pipeline in AWS. It covers setting up the pipeline, sourcing code from GitHub, and configuring infrastructure with Terraform and Terragrunt. The Talk also demonstrates the process of building and deploying a React application using AWS CodeBuild and CodePipeline. Overall, it provides a comprehensive overview of the tools and techniques involved in automating React deployments in AWS.
Building a sophisticated CodePipeline with CDK in a Monorepo Setup
DevOps.js Conf 2024DevOps.js Conf 2024
8 min
Building a sophisticated CodePipeline with CDK in a Monorepo Setup
Imagine starting as an AWS DevOps engineer in a small company. Your boss wants an all-in AWS approach, with CICD entirely on AWS for automated deployments. Use AWS CDK for creating a pipeline, stages, and actions. Learn how to handle multiple pipelines for different accounts and handle manual approval for staging and production environments. Discover how to trigger pipelines with EventBridge and Lambda, and create sophisticated pipelines for different scenarios.