Deploy a Web Component App and Set Up a Continuous Integration Workflow

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

    Join us for a workshop in which you’ll deploy a simple Node.js app built with Web Components and set up a Continuous Integration (CI) workflow. You’ll learn about the power of the Lightning Web Runtime (LWR) and GitHub Actions.

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

    FAQ

    The workshop requires Node version 14 or Node version 16.

    You can check your Node version by running the command 'node -v' in your terminal.

    You can create a Lightning Web Runtime application by running the command 'npm init lwr' in your terminal. This command will start an interactive script that guides you through the setup process.

    To set up a continuous integration workflow using GitHub Actions, you need a GitHub account and the Git command line installed on your system.

    To configure GitHub Actions for continuous integration, you need to create workflow files in the '.github/workflows' directory of your repository. These files should define the steps and triggers for your CI process.

    A Lightning Web Component (LWC) is a technology built by Salesforce for creating web applications using web components. It allows developers to assemble web components into a single-page application using a framework called Lightning Web Components.

    Code quality in the workshop project is managed using common JavaScript tools and NodeJS. You can set up tools like ESLint for linting and Jest for testing to ensure code quality.

    The 'npm run dev' command starts the Node server in watch mode, allowing live updates to the application during development. This command is essential for real-time feedback while developing the application.

    Philippe Ozil
    Philippe Ozil
    111 min
    12 Apr, 2022

    Comments

    Sign in or register to post your comment.

    Video Summary and Transcription

    We'll be using Node version 14 or 16 and GitHub Actions for continuous integration. We'll create a Lightning Web Runtime application and assemble web components into a single-page app. We'll add code quality tools and explore configuration files. We'll set up testing, create a Git repository, and configure CI workflows using GitHub Actions. Finally, we'll explore bonus tasks such as adding badges to the readme and creating pre-commit hooks with Husky.
    Video transcription and chapters available for users with access.

    Watch more workshops on topic

    Deploying React Native Apps in the Cloud
    React Summit 2023React Summit 2023
    88 min
    Deploying React Native Apps in the Cloud
    WorkshopFree
    Cecelia Martinez
    Cecelia Martinez
    Deploying React Native apps manually on a local machine can be complex. The differences between Android and iOS require developers to use specific tools and processes for each platform, including hardware requirements for iOS. Manual deployments also make it difficult to manage signing credentials, environment configurations, track releases, and to collaborate as a team.
    Appflow is the cloud mobile DevOps platform built by Ionic. Using a service like Appflow to build React Native apps not only provides access to powerful computing resources, it can simplify the deployment process by providing a centralized environment for managing and distributing your app to multiple platforms. This can save time and resources, enable collaboration, as well as improve the overall reliability and scalability of an app.
    In this workshop, you’ll deploy a React Native application for delivery to Android and iOS test devices using Appflow. You’ll also learn the steps for publishing to Google Play and Apple App Stores. No previous experience with deploying native applications is required, and you’ll come away with a deeper understanding of the mobile deployment process and best practices for how to use a cloud mobile DevOps platform to ship quickly at scale.
    MERN Stack Application Deployment in Kubernetes
    DevOps.js Conf 2022DevOps.js Conf 2022
    152 min
    MERN Stack Application Deployment in Kubernetes
    Workshop
    Joel Lord
    Joel Lord
    Deploying and managing JavaScript applications in Kubernetes can get tricky. Especially when a database also has to be part of the deployment. MongoDB Atlas has made developers' lives much easier, however, how do you take a SaaS product and integrate it with your existing Kubernetes cluster? This is where the MongoDB Atlas Operator comes into play. In this workshop, the attendees will learn about how to create a MERN (MongoDB, Express, React, Node.js) application locally, and how to deploy everything into a Kubernetes cluster with the Atlas Operator.
    Azure Static Web Apps (SWA) with Azure DevOps
    DevOps.js Conf 2022DevOps.js Conf 2022
    13 min
    Azure Static Web Apps (SWA) with Azure DevOps
    WorkshopFree
    Juarez Barbosa Junior
    Juarez Barbosa Junior
    Azure Static Web Apps were launched earlier in 2021, and out of the box, they could integrate your existing repository and deploy your Static Web App from Azure DevOps. This workshop demonstrates how to publish an Azure Static Web App with Azure DevOps.
    How to develop, build, and deploy Node.js microservices with Pulumi and Azure DevOps
    DevOps.js Conf 2022DevOps.js Conf 2022
    163 min
    How to develop, build, and deploy Node.js microservices with Pulumi and Azure DevOps
    Workshop
    Alex Korzhikov
    Andrew Reddikh
    2 authors
    The workshop gives a practical perspective of key principles needed to develop, build, and maintain a set of microservices in the Node.js stack. It covers specifics of creating isolated TypeScript services using the monorepo approach with lerna and yarn workspaces. The workshop includes an overview and a live exercise to create cloud environment with Pulumi framework and Azure services. The sessions fits the best developers who want to learn and practice build and deploy techniques using Azure stack and Pulumi for Node.js.

    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

    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.
    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.
    Fine-tuning DevOps for People over Perfection
    DevOps.js Conf 2022DevOps.js Conf 2022
    33 min
    Fine-tuning DevOps for People over Perfection
    Top Content
    DevOps is a journey that varies for each company, and remote work makes transformation challenging. Pull requests can be frustrating and slow, but success stories like Mateo Colia's company show the benefits of deploying every day. Challenges with tools and vulnerabilities require careful consideration and prioritization. Investing in documentation and people is important for efficient workflows and team growth. Trust is more important than excessive control when deploying to production.
    Why is CI so Damn Slow?
    DevOps.js Conf 2022DevOps.js Conf 2022
    27 min
    Why is CI so Damn Slow?
    Slow CI has a negative impact on productivity and finances. Debugging CI workflows and tool slowness is even worse. Dependencies impact CI and waiting for NPM or YARN is frustrating. The ideal CI job involves native programs for static jobs and lightweight environments for dynamic jobs. Improving formatter performance and linting is a priority. Performance optimization and fast tools are essential for CI and developers using slower hardware.
    End the Pain: Rethinking CI for Large Monorepos
    DevOps.js Conf 2024DevOps.js Conf 2024
    25 min
    End the Pain: Rethinking CI for Large Monorepos
    Today's Talk discusses rethinking CI in monorepos, with a focus on leveraging the implicit graph of project dependencies to optimize build times and manage complexity. The use of NX Replay and NX Agents is highlighted as a way to enhance CI efficiency by caching previous computations and distributing tasks across multiple machines. Fine-grained distribution and flakiness detection are discussed as methods to improve distribution efficiency and ensure a clean setup. Enabling distribution with NX Agents simplifies the setup process, and NX Cloud offers dynamic scaling and cost reduction. Overall, the Talk explores strategies to improve the scalability and efficiency of CI pipelines in monorepos.
    The Zen of Yarn
    DevOps.js Conf 2022DevOps.js Conf 2022
    31 min
    The Zen of Yarn
    Let's talk about React and TypeScript, Yarn's philosophy and long-term relevance, stability and error handling in Yarn, Yarn's behavior and open source sustainability, investing in maintenance and future contributors, contributing to the JavaScript ecosystem, open-source contribution experience, maintaining naming consistency in large projects, version consistency and strictness in Yarn, and Yarn 4 experiments for performance improvement.