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 Tech Conference.

FAQ

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

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.

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.

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.

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.

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.
Infrastructure as Code for React Application on AWS Written in TypeScript
React Advanced Conference 2021React Advanced Conference 2021
30 min
Infrastructure as Code for React Application on AWS Written in TypeScript
This Talk covers infrastructure as code using Terraform and CDK. The speaker demonstrates how to build infrastructure for a React application, including an S3 bucket and connecting to a real domain. They also discuss configuring cache behavior, CloudFront, and remote backends. TypeScript is highlighted as a powerful language for infrastructure as code, and the importance of automation and well-documented code for global-scale infrastructures is emphasized.