Skip to main content

Getting Started

Welcome to Corva’s Dev Center! In this tutorial, we will show you how to get started building a Dev Center Front End app. Before we dive into the code, here are a couple things you need to take care of…

1. Prerequisites​

General Preparations​

You’ll want to have completed the following steps before we move on:

  1. Get access to the Corva Dev Center GitHub repository. Here you’ll find Sample Apps to help you get started

  2. Optional: Create your own personal project repository using your preferred platform e.g. GitHub, Bitbucket, etc. This will help you keep track of what you’re building and manage changes to your apps

  3. Understand tech stack: React Hooks, JavaScript and TypeScript. You need to have at least some background using React.js before you start, particularly around building and using components.

  4. Understand basic Command Line Interface (CLI) commands for Linux or Windows. This is how you’ll configure the SDK and get app templates built out.

  5. Install your preferred Integrated Development Environment (IDE): e.g. Visual Studio Code. This is where you’re going to be doing all the magic, so please make sure you’re comfortable with its features and usage.

  6. Download Git to run commands to push/pull code to your IDE and manage branching.

  7. Install Node.js Node v18.20.3 to help manage packages and dependencies.

  8. Install Yarn 11 by running the command npm install --global yarn. Yarn builds the webpack, starts the localhost, and zips up the required files when you’re ready to deploy

Once the prerequisites are completed, you need to set up your localhost. This lets you get a live local version of your app in your preferred browser for testing while you’re building your app.

Updating the Hosts File Across Different Operating Systems​

This guide provides step-by-step instructions on how to add the following entry to your hosts file:

127.0.0.1      app.local.corva.ai

Table of Contents​

  1. OS X
  2. Linux
  3. Windows

OS X​

  1. Open Terminal

    • You can find Terminal in the Utilities folder of your Applications folder.

  2. Open the Hosts File

    • Type sudo nano /etc/hosts and press Enter.

  3. Edit the Hosts File

    • Use your arrow keys to navigate to the bottom of the file.
    • Add 127.0.0.1 app.local.corva.ai to the file.

  4. Save and Close

    • Press Ctrl + O to save the file.
    • Press Enter to confirm.
    • Press Ctrl + X to exit.

  5. Flush the DNS Cache (Optional)

    • Type sudo killall -HUP mDNSResponder and press Enter.

Linux​

  1. Open Terminal

    • Use your preferred method to open Terminal.

  2. Open the Hosts File

    • Type sudo nano /etc/hosts and press Enter.

  3. Edit the Hosts File

    • Add 127.0.0.1 app.local.corva.ai to the file.

  4. Save and Close

    • Press Ctrl + O to save the file.
    • Press Enter to confirm.
    • Press Ctrl + X to exit.

Windows​

  1. Open Notepad as an Administrator

    • Search for Notepad, right-click on it, and select "Run as administrator".

  2. Open the Hosts File

    • Go to File > Open, and navigate to C:\Windows\System32\drivers\etc.
    • Change the file type to "All Files", and open hosts.

  3. Edit the Hosts File

    • Add 127.0.0.1 app.local.corva.ai to the file.

  4. Save and Close

    • Go to File > Save.

2. Create an App​

Now the fun part. We’re going to create a Front End app in Corva’s Dev Center using the app wizard. You can watch the video below for a quick overview, then follow the included instructions.

NOTE: In order to view videos in high resolution, please click on the Settings icon, then select the highest resolution available.

Here are the steps to create a new Front End app:

  1. First, Log in to Corva using your username and password

  2. Click the icon for Dev Center in the top right part of your browser window

  3. Click Add New App. You’ll do this for both Front End and Back End apps

  4. Click on Front End to select a new Front End app and click Next

  5. Give your app a Name. This is the name that will appear in the Dev Center Store and will be used in the app key to refer to your app

  6. Select segment and category and click next Tagging your app as a drilling or completions app will help your end users find your app in the App Store more easily

3. Copy App to Terminal​

If you’ve made it this far, you’re doing great! The next step is to copy the app template to your development environment. The Dev Center App Wizard makes this easy by generating the string you need. You can watch the video and follow along with detailed instructions below:

NOTE: In order to view videos in high resolution, please click on the Settings icon, then select the highest resolution available.

Here’s how to copy the app template to your terminal window:

  1. From the App Wizard, copy the string to install the Command Line Tool

  2. Go to the command line interface and paste it and press enter to install

  3. Select a programming language for your Front End; we support both javascript and typescript

  4. Copy the create-corva-app Command Line Interface instructions and paste it in your CLI. Press enter to build out the templates

  5. Finalize your app in the App Wizard by clicking Add New App

Almost there! Now you’re ready to run your app on the localhost.

4. Run on localhost​

Let’s get this thing up and running in your browser. You can watch the video and follow the detailed instructions below:

NOTE: In order to view videos in high resolution, please click on the Settings icon, then select the highest resolution available.

Here’s how to run your app on localhost:

  1. In your command line interface (or in your IDE), change directories into the root folder of your Front End app

  2. Run yarn in the command line to confirm that all dependencies are up to date

  3. Run yarn start to render the app in the localhost. This will open a browser window in your default browser where you can see your app live! Any saved changes to your code will show up here, making it easy to test and visualize new components.

You’re all set. Now you know how to build out Front End app templates and manage them in the App Store using the App Wizard and your IDE. Next, try building a Front End app using our Dev Center Component Library.

For instructions on how to publish and deploy a Front End app, check out the Tutorials section.