Giter Club home page Giter Club logo

create-react-apps's Introduction

Create React App (ReactJs) example demo CI/CD pipeline

Deploy on Elest.io

Example application and CI/CD pipeline showing how to deploy a ReactJs website to elestio.

CI/CD on Elestio

Fork this repository to create your own copy that you can modify and use in a CI/CD pipeline

Steps to create CI/CD pipeline on elestio

Step 1: Select CI/CD from left sidebar in app.

Click here to directly go to the CI/CD

Step 2: Select Deployment method.

We have three different types of deployment method

  • Github
  • Gitlab
  • Docker compose

But for this ReactJs website example, you can choose GitHub as your deployment method.

Step 3: Authentication

If you forked the repo then you can click on the sign-in with GitHub button and authorize elestio to access the git repo then you can select the reactjs-example repo otherwise you can directly insert a git repo URL to deploy the ReactJs website.

Step 4: Configuration

After selecting a repo or inserting a URL it will auto-filled all the desired configurations using the elestio.yml/elestio.json file.

You can also manually customize the Configure your application.

Select your runtime and its version, run & build commands.

Reverse proxy configuration, Volume Configuration, Exposed Ports Configuration and Environment variables.

Step 5: Choose Deployment Targets

Elestio provides two different types of deployment targets.

  • New Infrastructure
  • Existing Infrastructures

On elestio single CI/CD target you can deploy multiple CI/CD pipelines so, If you already have CI/CD target on elestio then you can deploy a new pipeline on the same existing CI/CD target by choosing Existing Infrastructures and then select the CI/CD target otherwise if you don't have anything or want to deploy on new target then you can choose New Infrastructure

If you choose New Infrastructure then you have to select the deployment mode we have two different types of deployment modes.

  • Single-mode.
  • Cluster mode.

  NOTE:- Steps 6,7,8 and 9 are only for New Infrastructure targets for Existing Infrastructures targets directly following the final step.

Step 6: Select Service Cloud Provider

Elestio supports five different types of cloud service providers you can choose anyone to deploy your service.

  • Hetzner Cloud.
  • Digital Ocean.
  • Amazon Lightsail.
  • Linode.
  • Vultr.

We also provide a BYOVM service option so if you already have your VM on any third-party provider (Azure, GCP, Alibaba, ...) then you can choose BYOVM to deploy CI/CD pipeline on your VM.

Elestio provides one BYOVM service for free. To be eligible the VM you connect must have no more than 2 vCPU, max 4 GB of ram, and max 80 GB of storage

Step 7: Select Service Plan

This step is only for other than BYOVM service providers.

We're providing multiple different types of service plans as per proposing by your selected providers.

Step 8: Provide Service Name

By default, we create a unique target name for you but you can customize it.

Step Final: Create Ci/CD pipeline

Now after following all the above steps you can click on the button Create Ci/CD pipeline.

It will take a few seconds to deploy your pipeline on elestio.

For each pipeline deployed on elestio will create a cname for it. but if you want your custom domain then you can configure it inside the target details.

create-react-apps's People

Contributors

amitshuklabag avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.