Build Applications Quickly on the EDJX Platform (EDJURL Tutorial)

Using EDJX Platform components, you can build and deploy applications quickly and scale them globally with low latency.

EDJURL is an example application that is built and deployed using EDJX Platform. It shortens long URLs into more manageable and usable URLs.

edjurl signin

EDJX Platform Components Used

To build this application, the following EDJX Platform components are used:

  • EDJX Serverless Functions executes code in the EDJURL application. The two serverless functions used are:

    • shorten - Shortens the URL and stores it in the KV Store, which is the EDJX Key-Value store.

    • fetch - Fetches the original URL and redirects to the fetched URL.

      You can create serverless functions using Rust or C++.

  • EDJX Storage stores the HTML content and images that form the user interface of the EDJURL application.

  • EDJX Domains routes the request to the edjurl.com domain. Request routing rules are used to divert traffic from edjurl.com to the appropriate EDJX Serverless Functions.

  • EdjNet distributes the assets to make the EDJURL application instantly available and scalable globally.

For example, to shorten the https://example.org URL, it is passed to the shorten function. The function assigns a key and stores it in the KV Store. To fetch the original URL, the key value is passed to the fetch function.

edjurl arch

Steps to Build the Application

Follow the steps given below to quickly build and deploy the EDJURL application:

Build and Deploy shorten Function (Rust)

Use the Rust code sample at GitHub to build and deploy the shorten function.

To build the shorten function:

  1. Meet the prerequisites.

  2. Open a terminal instance on your system.

  3. Navigate to the edjurl/rust_url_shorten folder, which contains the shorten function.

  4. Run the following command to compile:

    cargo build --release --target=wasm32-unknown-unknown

    This generates a WASM file, for example urlshorten.wasm, which you can deploy to EDJX.

To deploy the shorten function:

  1. Log in to EDJX Console.

  2. Select an organization.

  3. Create an application named EdjURL.

  4. Create a function named shorten.

  5. Select the compiled WASM file.

    1. Language: Rust

    2. Function Name: shorten

    3. File: urlshorten.wasm (WASM file generated during the Build step)

  6. Grant the KV full access permission.

To run the shorten function:

  1. Copy and paste the shorten function URL in a Web browser.

  2. Append ?url=edjx.io and get a short string.

Build and Deploy fetch Function (C++)

Use the C++ code sample at GitHub to build and deploy the fetch function.

To build the fetch function:

  1. Meet the prerequisites.

  2. Open a terminal instance on your system.

  3. Navigate to the edjurl/cpp_url_fetch folder, which contains the fetch function.

  4. Run the following command to compile:

    make all

    This generates a WASM file, for example urlfetch.wasm, which you can deploy to EDJX.

To deploy the fetch function:

  1. Log in to EDJX Console.

  2. Select the organization where the EDJURL application resides.

  3. Navigate to the EdjURL application.

  4. Create a function named fetch.

  5. Select the compiled WASM file.

    1. Language: C++

    2. Function Name: fetch

    3. File: urlfetch.wasm (WASM file generated during the Build step)

  6. Grant the KV read permission.

To run the fetch function:

  1. Copy the fetch function URL and paste it into a Web browser.

  2. Append the short string you generated in the shorten function as ?s=SHORTSTRING.

    The short string redirects to the original URL, https://edjx.io.

Build and Deploy the HTML Page

To build the HTML page, navigate to the scripts.js file and set APP_URL variable to the shorten function.

The FETCH_PREFIX is a URL to the serverless function that retrieves a shortened URL.

To deploy the HTML page:

  1. Log in to EDJX Console.

  2. Select an organization.

  3. Create a bucket named EdjURL and make it public.

  4. Upload the website files to the bucket, one at a time.

  5. Set the Content-Disposition header to inline for the index.html file to display the HTML file as a web page.

To run the HTML page:

Copy the URL of the index.html page and paste it into a Web browser. You can now shorten URLs.

Set up a Domain for the Application (Optional)

Optionally you can set up a domain to host the application. For example, if you want to use example.org, then ensure that you have a registered example.org domain and the Domain DNS records point to EDJX. This tutorial uses the edjurl.com domain.

To set up a domain:

  1. Log in to EDJX Console.

  2. Select an organization.

  3. Navigate to Domains.

  4. Create a domain named edjurl.com.

  5. Add a DNS A record. The IP Address can be an arbitrary value.

    • Type: A

    • Name: @

    • Target: 144.126.248.201

    • TTL: 1800

    • Proxy: ON

  6. Add Rewrite Rule: edjurl.com → display the HTML page

    • Name: Homepage

    • Match Type: Exact Match

    • Match Value: edjurl.com

    • Action: Redirect

    • Routing Destination: https://[BucketID].storage.edjx.net/blobs/index.html

      This is a URL to the index.html file in the bucket.

  7. Add Rewrite Rule: edjurl.com/?s= → call URL fetch

    • Name: Fetch

    • Match Type: Pattern Match

    • Match Value: edjurl.com/?s=*

    • Action: Redirect

    • Routing Destination: https://[AppID].fn.edjx.net/fetch?{query}

It is important to place the rules in the correct order. Place the Fetch rule before the Home rule.
To enable HTTPS for EDJURL, add a TLS certificate.