Udemy
    •  
    •  
    •  
    •  
    •  
    •  
    •  
    •  
Subscribe
Turn what you know into an opportunity and reach millions around the world.
Learn More
Your cart is empty.
Keep shopping
Deploy React App to Microsoft Azure
Rating: 4.4 out of 5(102 ratings)
8,144 students

Deploy React App to Microsoft Azure

Create a React web app and deploy to Microsoft Azure
Created byNikolay Advolodkin
Last updated 9/2021
English
English [Auto],

What you'll learn

  • Create a very simple React web app in under 5 min
  • Code component tests using React Testing Library
  • Shift-right by creating automated visual tests using WebdriverIO and Screener
  • Add the code to a CI pipeline using Github Actions for staged execution and true continuous integration
  • Use Azure Static Web Apps to easily deploy our app to the Microsoft Azure cloud

Course content

1 section • 11 lectures • 40m total length

  • Introduction0:46

    Learn to build a simple React web app, code components, create automated visual tests, and deploy it to Microsoft Azure using Azure Static Web Apps with GitHub Actions for CI.

  • Creating a React App1:51
  • Running First test1:53

    Explore how a Create React app includes a ready-to-run unit test, execute it with npm test, render the app component with React Testing Library, and verify the Learn React link.

  • Creating a CI pipeline7:58

    Set up a github actions ci pipeline for a react app by selecting a suggested workflow, configuring secrets, and creating a yaml file to build and test.

  • Add a Link test5:06

    Validate React app navigation by testing link targets with React Testing Library, update tests to use data-test-id, and align link text with testing goals.

  • Add Visual Testing7:53

    Learn to add visual testing to a React app deployment workflow, capturing browser snapshots across desktop and mobile, validating baselines in a CI pipeline.

  • Making an Image Change2:57

    Replace the logo with a JPEG image, run visual tests with Screener, and validate the new UI as the baseline while ensuring component tests pass.

  • Releasing to Azure Static Web Apps4:42

    Deploy a React app to Microsoft Azure using the Azure Static Web Apps workflow, configure the source and build outputs, and test it in production.

  • Creating CI for production testing4:45

    Upgrade your React app by swapping in a better image, then extend your Azure pipeline to run visual tests for production and localhost, with updated base URLs.

  • Finalizing production build for CI2:13

    Rerun tests after updating the image, confirm the new baseline across browsers, then deploy the production build with Azure static web apps and run visual tests again.

  • BONUS LECTURE!!!0:48

Requirements

  • JavaScript programming skills
  • Good understanding of JSON
  • A (free) GitHub account
  • A Microsoft Azure account

Description

In this tutorial we will learn:

How to create a very simple React web app in under 5 min

How to code component tests using React Testing Library

How to shift-right by creating automated visual tests using WebDriverIO and Screener

How to add the code to a CI pipeline using Github Actions for staged execution and true continuous integration

How to use Azure Static Web Apps to easily deploy our app to the Microsoft Azure cloud

So what are you waiting for? Let's jump into the tutorial


What current students are saying:

"I appreciate the time the instructor put on this course as well as the opportunity to get familiar with TestProject free of charge. Well explained however, if your are using window and you are new in Automation Testing, you might find it a bit challenging with adding the SDK Token in your system environment since the instruction used MAC which is completely a different way with windows. Other than that... I appreciate a lot this free course .... thank you so much"

“I like fundamental approach used by author. Will see:) To prepare such a course - it's a really hard and big job. Respect and thank you.” - Serhii Kovalenko

“Wonderful content and things explained in a nutshell. Overwhelmed by Author's dedication to put things in such a way that any novice or manual tester can follow and understand and definitely be on-boarded as a Selenium Automation Engineer next day at work. Thanks a million times for creating these courses! One Stop for Automation."- Rupashree Geethaaviji Ananthakrishna

“I am familiar with Nikolay from a course I saw on TestAutomation and have the highest regard for him. Glad to see him on Udemy.” - Annamalai Viswanathan

“One Of the Best courses on Selenium With C#. Cheers Nikolay!!” - Saransh Vaid



Who this course is for:

  • Developers who want to learn how to create and test web apps
  • Testers and developers who want a better understanding of CI/CD integration

Report abuse