Skip to main content

Deploying React Typescript on PipeOps

To deploy React typescript application, you must ensure that you are already Signed up on PipeOps and Signed into your PipeOps account. Use the following link to Sign Up and Sign In to PipeOps

Prerequisites:​

  1. Create a Workspace where the application will be deployed. You can follow the guide on how to create a Workspace here. If you already have an existing workspace you can use it

  2. Ensure the Git (Github, Gitlab, Bitbucket) integration is done, so that PipeOps can retrieve the repositories.

  3. The source code is available on the Git repository.

  4. Click on the “Proceed” button to access the repository you have configured access to

    2.png

  5. For this example, we shall test with the template project provided, which is on the right pane of the screen. Select Pipeops React-typescript.

    2.png This will lead to the next stage of configuring the deployment.

  6. PipeOps automatically generates a name for the project to be deployed (which can be edited later, see: How to Edit a Project Name). Configures a default server and environment for the project deployment.

    2.png Click Proceed to continue to the next stage

  7. In the next stage, we shall select the Framework we are building with, and the Build method, in this case we shall choose Other (Frontend Frameworks) and Nixpack respectively.

    2.png Click the Deploy Project button to start the build and deploy the project.

  8. PipeOps will start the build and deployment process, and show the logs of the build and deployment process, to enable tracking of the process.

    2.png

  9. When the deployment is done, you get a notification stating that the deployment is complete and successful

    2.png Click the Got it button to return to the project

  10. In returning to the project, we can see all the details of the project that has been configured, and some added information that tells us the status of the project.

    2.png

There are various; History, Observability, Logs, Events, Terminal and Settings are used to monitor, observe, debug and re-configure the project.

  1. To view the application that was deployed, click the View Project link.

    2.png

  2. This will automatically launch the application on a new tab

  3. This setup has some basic configurations applied by default

    1. Application Network Port
    2. Network Access Port ([Environment Variable])
    3. Single Replica with 0.1 CPU and 212MB RAM ([Scaling and Replication])
    4. Auto Deploy a branch when a code change is checked-in.

To delete a project, use the Delete Project guide here.