Streamlining DevOps with OneDev: A React Web Developer’s Perspective

As a React web developer, you’re likely no stranger to the importance of efficient DevOps processes. OneDev is an all-in-one, open-source DevOps system that can help you streamline your workflow, from code management to deployment. In this article, we’ll explore how to set up OneDev, push your React web app source code to it, and create build and deploy jobs to get your app up and running on Azure App Service.

Prerequisites

Before we dive in, make sure you have the following:

• A system with a recent version of Docker, Node.js, and Azure CLI installed
• A free Azure account to run the deploy job

Setting Up OneDev

OneDev can be set up as a standalone Docker container, a node in a Kubernetes cluster, or installed directly onto a server without using container technology. For simplicity, we’ll use a standalone Docker container. Create a new file named docker-compose.yml with the following contents:
yaml
version: '3'
services:
onedev:
image: onedev/onedev
ports:
- "6610:6610"
volumes:
- onedev_data:/data
volumes:
onedev_data:

Save the file and run the following command to start the container in detached mode:

docker-compose up -d

Access OneDev in your browser at http://localhost:6610. Follow the Server Setup screens to complete the initial setup.

Creating a Project

Create a new project by clicking on “Projects” in the left navigation menu and then clicking the “+” button. Specify a name and description for your project, leaving all other options as default.

Pushing Your Code

Create a new sample React web app using create-react-app. Replace the contents of src/App.js with the following code:
“`jsx
import React from ‘react’;

function App() {
return (

);
}

export default App;
“
Delete thesrc/App.test.js` file to avoid test failures. Commit the changes and push the code to OneDev.

Creating a Build Job

Create a new job by clicking on “Jobs” in the left navigation menu and then clicking the “+” button. Name the job “Build”. Add the following steps:

1. Checkout Code: Leave all options as default.
2. Build & Test: Set the image property to node:current-alpine and the commands to npm install and npm run build.
3. Publish Artifacts: Set the Artifacts property to build/.

Creating a Deploy Job

Create a new job by clicking on “Jobs” in the left navigation menu and then clicking the “+” button. Name the job “Deploy”. Add the following steps:

1. Execute Command: Set the image property to mcr.microsoft.com/azure-cli and the commands to the following script:
   “`bash
   az login