Static Web Apps demo – CI/CD, Deployment and Test Pipeline on Azure

Rate this content
Bookmark

A real-world demo and a playground for Azure Static Web Apps service.

This workshop has been presented at TestJS Summit 2021, check out the latest edition of this JavaScript Conference.

FAQ

Vanya Lebedev is an engineering manager for the Dynamics 365 supply chain manager team at Microsoft Ireland. He has been with Microsoft for over 12 years, previously working as a software engineer before transitioning to a managerial role.

Vanya Lebedev finds Microsoft special due to its global impact and the opportunity to work on products that are essential for many organizations around the world. The company's vision, culture, and the challenges in engineering keep him motivated and engaged.

Vanya's team is working on integrating multiple applications into a seamless suite for better user experience, ensuring the scalability and performance of these applications to meet the demands of global enterprise companies.

Microsoft promotes a culture where employees are encouraged to be curious, take risks, and learn from mistakes. The environment supports a growth mindset, customer obsession, and embraces diversity, which drives innovation and efficiency in their engineering organization.

The yearly hackathon at Microsoft allows engineers to work intensively on projects in a creative and supportive environment, helping to foster innovation and teamwork. This event is a platform for employees to develop new ideas and solutions over three days, significantly contributing to the company's dynamic engineering culture.

Vanya's team focuses on Dynamics 365 applications related to supply chain management, including sales, procurement, manufacturing, cost accounting, and more, specifically targeting intelligent order management, field service, and supply chain planning capabilities.

Juarez Barbosa Junior
Juarez Barbosa Junior
50 min
25 Nov, 2021

Comments

Sign in or register to post your comment.

Video Summary and Transcription

This workshop provides insights into engineering at Microsoft, highlighting the company's culture of curiosity, learning, and customer focus. It discusses the use of hackathons to generate ideas and overcome challenges in building large-scale products. The workshop also covers technical resources and tutorials on Azure Static Web Apps and Playwright testing framework. It emphasizes the flexibility and powerful features of Playwright for testing and code reuse. The session concludes with information about open positions at Microsoft.

1. Introduction to Engineering at Microsoft

Short description:

I'm an engineering manager at Microsoft Ireland, and I'll be sharing my personal view and experience on engineering at Microsoft. Microsoft has a long history of building products adopted worldwide. We work on products that make a difference for thousands of organizations and people. Our culture encourages curiosity, learning, and taking risks. We prioritize understanding our customers' needs and embrace diversity and inclusion. We believe everyone should be a leader and contribute to our culture and product development. Our yearly hackathon events promote a growth mindset.

Hello, everybody. Please allow me to introduce myself. My name is Vanya Lebedev and I'm an engineering manager with the Dynamics 365 supply chain manager team at Microsoft Ireland. I have been working at Microsoft for over 12 years, first as a software engineer, and then as a manager, and I'm super thrilled about the opportunity to join the TESTJS summit today and to talk about engineering at Microsoft. So I will be sharing my personal view, perspective and experience on the topic.

I will dive into why I find Microsoft special and what kept me going for this 12 years. I will talk about the engineering challenges that my team is currently solving and about the engineering opportunities in the team. So I hope you will find it interesting. So, let's get started.

Everyone knows Microsoft. We have a long history of building products that got adopted all around the world. And this is probably the main reason why I joined the company back in 2009. It was a fantastic opportunity to learn what it's like to work in one of the most famous companies in the world. So I joined and never regretted. The engineering challenges for sure have been exciting so far and I've been having a really great time in the process of solving them.

One of the best things for me personally is that I've been working on products that are truly needed that make a difference for thousands of organizations around the world and for hundreds of thousands of people in these organizations. Our CEO, Satchin Adella, has expressed this ambition in the mission statement that you see on the screen right now. We want to empower every person and every organization on the planet to achieve more. This statement excites me personally very much, specifically because of the ambition, because of the scope of this vision. Think about it. It's every person on the planet. This is the scope of the reach that we are trying to achieve. This is a truly global endeavor.

And you know what? Having a great goal is great, but another thing that really, really inspires me, really gets me going is that not only do we have a vision of where we are going, but we also have a clear understanding of how we will be getting there. One smart man said that culture is strategy for breakfast. And it's very true. I think that it is the people around me and the culture that we all share that is and will be the cornerstone of Microsoft's success.

Everyone in the company, everyone around me is encouraged to always be curious, eager to learn, to take risks. And another thing that's really great is that everyone is also encouraged to not be afraid of making mistakes along the way. Because if you don't make mistakes, if you don't take risks, we will not make a difference. However, if we do make the mistakes, we will learn, we will get better and we will create a revolutionary software. So this is the culture. These are the messages that are really resonating with me.

And as part of this growth mindset, we are also trying to get obsessed with the customers, to get out of our way of understanding what their real needs are. We will not assume that we have learned everything. We know everything, but we will keep learning and learning and learning about them. Ultimately, creating better products and making a difference. Same goes for diversity and inclusion. We are a team which is so global, you cannot imagine. People from around the world with all different backgrounds, genders, etc. are very welcome on the team, and everyone brings a unique perspective.

There were so many examples in my career where their opinions and ideas helped us to produce better software and products, and ultimately succeed. This is something that I think is very unique and very inspiring about my work. This is why I keep going. Another thing that really stands out to me about about work at Microsoft is that the culture like this, the culture that I was just describing, does not come up on its own, does not emerge on its own. It requires a strong vision and strong leadership and collective effort and to accelerate our culture we have introduced this vision of what are the great leaders in the organization and we believe that everyone, every engineer, every person in the org should be a leader, otherwise we will not be able to progress as fast as we want to, we will not be able to shape our culture, we will not be able to build the products that we need, and it's really great when people start adopting this mindset, this is something that really helps us to get things done, people do not sit in the corner and complain, everyone takes their fate in their hands and makes a difference, makes a change, this really helps driving great, healthy, efficient engineering organisation, so this is something I really like.

It was a lot of words, but what about some concrete examples, I think one great example of how Microsoft is promoting this growth mindset are the yearly hackathon events. For three days, everyone in the org, every engineer in the org just goes in a completely dark mode with pizzas and everything to hack their ideas and produce code applications, improvements that they have been thinking about for a long time. Let's have a quick look at the recording of what can be achieved. Yep.

2. Hackathons and Engineering Challenges

Short description:

Hackathons have been an amazing experience for me, generating great ideas and fostering a strong team dynamic. Our team focuses on supply chain management applications for enterprises, covering various areas such as sales, procurement, manufacturing, and more. Building such a large-scale product requires a team of thousands of engineers. We face challenges in performance, scalability, integration, and user experience. Fortunately, we leverage the Microsoft Cloud and cutting-edge technology like Power Apps and microservice architecture to overcome these challenges.

So this is what can be achieved with hackathons. I personally have been participating for the last five years. Every time, it was an amazing experience, and we always came up with great ideas and had an amazing time doing this. Again, it was a lot of words and a lot of cultural things, but we are all engineers here.

You're probably curious, okay, what are the engineering challenges. What is your team doing? So our team is bringing supply chain management applications to enterprises. We are focusing on the business applications side of things, and this is a small slide, which shows what kind of areas we are covering. So our applications cover sales, procurement, manufacturing, cost accounting, supply and demand planning, warehousing, transportation, finance, tax. You can see on the slide, just reading the titles of the applications that comprise the suite of our products is immense. And if you think about the size of the product, it's tens of thousands of types of persistent entities. It's hundreds of thousands of classes, millions of automated tests.

The team that is needed to build software like this is a few thousand people, a few thousand engineers. Naturally, my team is responsible for a smaller piece of this application. Primarily, we are focusing on intelligent order management, on field service and on supply chain planning capabilities. But the engineering challenges are many. So we are targeting upper-mid-size to global enterprise companies. And with a company size like this, performance and scalability requirements are insanely hard to meet. Another interesting challenge is how do we integrate so many applications into a suite that would have a seamless look and feel and would be integrated seamlessly to give the users an easy and efficient experience. And, of course, the user experience itself. So how do we make this application as delightful as possible? So, luckily, we are tapping into the power of the Microsoft Cloud to build this suite of applications, and we are using the latest and the greatest technology to achieve this. Power Apps is the platform that sets up the framework for our development. We are also embracing the microservice architecture as a means of scaling out independently, releasing independently, making sure that our...

Watch more workshops on topic

Designing Effective Tests With React Testing Library
React Summit 2023React Summit 2023
151 min
Designing Effective Tests With React Testing Library
Top Content
Featured Workshop
Josh Justice
Josh Justice
React Testing Library is a great framework for React component tests because there are a lot of questions it answers for you, so you don’t need to worry about those questions. But that doesn’t mean testing is easy. There are still a lot of questions you have to figure out for yourself: How many component tests should you write vs end-to-end tests or lower-level unit tests? How can you test a certain line of code that is tricky to test? And what in the world are you supposed to do about that persistent act() warning?
In this three-hour workshop we’ll introduce React Testing Library along with a mental model for how to think about designing your component tests. This mental model will help you see how to test each bit of logic, whether or not to mock dependencies, and will help improve the design of your components. You’ll walk away with the tools, techniques, and principles you need to implement low-cost, high-value component tests.
Table of contents- The different kinds of React application tests, and where component tests fit in- A mental model for thinking about the inputs and outputs of the components you test- Options for selecting DOM elements to verify and interact with them- The value of mocks and why they shouldn’t be avoided- The challenges with asynchrony in RTL tests and how to handle them
Prerequisites- Familiarity with building applications with React- Basic experience writing automated tests with Jest or another unit testing framework- You do not need any experience with React Testing Library- Machine setup: Node LTS, Yarn
How to Start With Cypress
TestJS Summit 2022TestJS Summit 2022
146 min
How to Start With Cypress
Featured WorkshopFree
Filip Hric
Filip Hric
The web has evolved. Finally, testing has also. Cypress is a modern testing tool that answers the testing needs of modern web applications. It has been gaining a lot of traction in the last couple of years, gaining worldwide popularity. If you have been waiting to learn Cypress, wait no more! Filip Hric will guide you through the first steps on how to start using Cypress and set up a project on your own. The good news is, learning Cypress is incredibly easy. You'll write your first test in no time, and then you'll discover how to write a full end-to-end test for a modern web application. You'll learn the core concepts like retry-ability. Discover how to work and interact with your application and learn how to combine API and UI tests. Throughout this whole workshop, we will write code and do practical exercises. You will leave with a hands-on experience that you can translate to your own project.
Detox 101: How to write stable end-to-end tests for your React Native application
React Summit 2022React Summit 2022
117 min
Detox 101: How to write stable end-to-end tests for your React Native application
Top Content
WorkshopFree
Yevheniia Hlovatska
Yevheniia Hlovatska
Compared to unit testing, end-to-end testing aims to interact with your application just like a real user. And as we all know it can be pretty challenging. Especially when we talk about Mobile applications.
Tests rely on many conditions and are considered to be slow and flaky. On the other hand - end-to-end tests can give the greatest confidence that your app is working. And if done right - can become an amazing tool for boosting developer velocity.
Detox is a gray-box end-to-end testing framework for mobile apps. Developed by Wix to solve the problem of slowness and flakiness and used by React Native itself as its E2E testing tool.
Join me on this workshop to learn how to make your mobile end-to-end tests with Detox rock.
Prerequisites- iOS/Android: MacOS Catalina or newer- Android only: Linux- Install before the workshop
API Testing with Postman Workshop
TestJS Summit 2023TestJS Summit 2023
48 min
API Testing with Postman Workshop
Top Content
WorkshopFree
Pooja Mistry
Pooja Mistry
In the ever-evolving landscape of software development, ensuring the reliability and functionality of APIs has become paramount. "API Testing with Postman" is a comprehensive workshop designed to equip participants with the knowledge and skills needed to excel in API testing using Postman, a powerful tool widely adopted by professionals in the field. This workshop delves into the fundamentals of API testing, progresses to advanced testing techniques, and explores automation, performance testing, and multi-protocol support, providing attendees with a holistic understanding of API testing with Postman.
1. Welcome to Postman- Explaining the Postman User Interface (UI)2. Workspace and Collections Collaboration- Understanding Workspaces and their role in collaboration- Exploring the concept of Collections for organizing and executing API requests3. Introduction to API Testing- Covering the basics of API testing and its significance4. Variable Management- Managing environment, global, and collection variables- Utilizing scripting snippets for dynamic data5. Building Testing Workflows- Creating effective testing workflows for comprehensive testing- Utilizing the Collection Runner for test execution- Introduction to Postbot for automated testing6. Advanced Testing- Contract Testing for ensuring API contracts- Using Mock Servers for effective testing- Maximizing productivity with Collection/Workspace templates- Integration Testing and Regression Testing strategies7. Automation with Postman- Leveraging the Postman CLI for automation- Scheduled Runs for regular testing- Integrating Postman into CI/CD pipelines8. Performance Testing- Demonstrating performance testing capabilities (showing the desktop client)- Synchronizing tests with VS Code for streamlined development9. Exploring Advanced Features - Working with Multiple Protocols: GraphQL, gRPC, and more
Join us for this workshop to unlock the full potential of Postman for API testing, streamline your testing processes, and enhance the quality and reliability of your software. Whether you're a beginner or an experienced tester, this workshop will equip you with the skills needed to excel in API testing with Postman.
Monitoring 101 for React Developers
React Summit US 2023React Summit US 2023
107 min
Monitoring 101 for React Developers
Top Content
WorkshopFree
Lazar Nikolov
Sarah Guthals
2 authors
If finding errors in your frontend project is like searching for a needle in a code haystack, then Sentry error monitoring can be your metal detector. Learn the basics of error monitoring with Sentry. Whether you are running a React, Angular, Vue, or just “vanilla” JavaScript, see how Sentry can help you find the who, what, when and where behind errors in your frontend project. 
Workshop level: Intermediate
Testing Web Applications Using Cypress
TestJS Summit - January, 2021TestJS Summit - January, 2021
173 min
Testing Web Applications Using Cypress
WorkshopFree
Gleb Bahmutov
Gleb Bahmutov
This workshop will teach you the basics of writing useful end-to-end tests using Cypress Test Runner.
We will cover writing tests, covering every application feature, structuring tests, intercepting network requests, and setting up the backend data.
Anyone who knows JavaScript programming language and has NPM installed would be able to follow along.

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

Network Requests with Cypress
TestJS Summit 2021TestJS Summit 2021
33 min
Network Requests with Cypress
Top Content
Cecilia Martinez, a technical account manager at Cypress, discusses network requests in Cypress and demonstrates commands like cydot request and SCI.INTERCEPT. She also explains dynamic matching and aliasing, network stubbing, and the pros and cons of using real server responses versus stubbing. The talk covers logging request responses, testing front-end and backend API, handling list length and DOM traversal, lazy loading, and provides resources for beginners to learn Cypress.
Levelling up Monorepos with npm Workspaces
DevOps.js Conf 2022DevOps.js Conf 2022
33 min
Levelling up Monorepos with npm Workspaces
Top Content
NPM workspaces help manage multiple nested packages within a single top-level package, improving since the release of NPM CLI 7.0. You can easily add dependencies to workspaces and handle duplications. Running scripts and orchestration in a monorepo is made easier with NPM workspaces. The npm pkg command is useful for setting and retrieving keys and values from package.json files. NPM workspaces offer benefits compared to Lerna and future plans include better workspace linking and adding missing features.
Testing Pyramid Makes Little Sense, What We Can Use Instead
TestJS Summit 2021TestJS Summit 2021
38 min
Testing Pyramid Makes Little Sense, What We Can Use Instead
Top Content
Featured Video
Gleb Bahmutov
Roman Sandler
2 authors
The testing pyramid - the canonical shape of tests that defined what types of tests we need to write to make sure the app works - is ... obsolete. In this presentation, Roman Sandler and Gleb Bahmutov argue what the testing shape works better for today's web applications.
Full-Circle Testing With Cypress
TestJS Summit 2022TestJS Summit 2022
27 min
Full-Circle Testing With Cypress
Top Content
Cypress is a powerful tool for end-to-end testing and API testing. It provides instant feedback on test errors and allows tests to be run inside the browser. Cypress enables testing at both the application and network layers, making it easier to reach different edge cases. With features like AppActions and component testing, Cypress allows for comprehensive testing of individual components and the entire application. Join the workshops to learn more about full circle testing with Cypress.
Automating All the Code & Testing Things with GitHub Actions
React Advanced Conference 2021React Advanced Conference 2021
19 min
Automating All the Code & Testing Things with GitHub Actions
Top Content
We will learn how to automate code and testing with GitHub Actions, including linting, formatting, testing, and deployments. Automating deployments with scripts and Git hooks can help avoid mistakes. Popular CI-CD frameworks like Jenkins offer powerful orchestration but can be challenging to work with. GitHub Actions are flexible and approachable, allowing for environment setup, testing, deployment, and custom actions. A custom AppleTools Eyes GitHub action simplifies visual testing. Other examples include automating content reminders for sharing old content and tutorials.
Test Effective Development
TestJS Summit 2021TestJS Summit 2021
31 min
Test Effective Development
Top Content
This Talk introduces Test Effective Development, a new approach to testing that aims to make companies more cost-effective. The speaker shares their personal journey of improving code quality and reducing bugs through smarter testing strategies. They discuss the importance of finding a balance between testing confidence and efficiency and introduce the concepts of isolated and integrated testing. The speaker also suggests different testing strategies based on the size of the application and emphasizes the need to choose cost-effective testing approaches based on the specific project requirements.