7.0.1685-testing
In this page
  1. Setup

Simple Web App

Using the @greycat/web that already comes with the javascript sdk and a bunch of web components, we can in a few lines of codes produce an interactive Web App.

With two files we have a Full Stack web app running with a database included.

Setup

Visit This Page to get the latest version of greycat copy the curl command and run it, this will install greycat on your system.

For the GreyCat Back End we also only require one file called project.gcl at the root of our project directory.

Replace the versions in the below code with the latest one from here

//project.gcl
@library("std", "7.0.1389-dev"); // Replace with latest versions
@library("web", "7.0/7.0.287-dev"); // Replace with latest versions

fn main(){}

@expose
fn hello(val:String): String{
 return "Hello ${val}";
}

Run the following command at the root of your project.gcl, for more information about see here

greycat install

For the Front End we only require one html file that we will put inside the generated webroot direcotry from the previous command, be default greycat uses /webroot to serve the web app

webroot/ /-- index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="web/greycat.css" />
    <title>Hello GreyCat</title>
  </head>

  <body>
    <script src="web/greycat.js"></script>
    <div id="app"></div>

    <script type="module">
      const app = document.getElementById('app');

      try {
        await gc.init(); // Initialize the greycat sdk
        const el = document.createElement('gui-value');
        el.value = await gc.hello('world!');
        app.appendChild(el);
      } catch (err) {
        // Replace with latest versions
        app.textContent = 'Something went wrong';
      }
    </script>
  </body>
</html>

The last step only requires you to run the following command, we will be impersonating user 1 to bypass the login

greycat serve --user=1

Congratulation! Your app is accessible at localhost:8080