gg logo

gg

Documentation

Changelog

Blog

Setup and application structure

Creating a new gg applicationCopy link to section

Setting up a new gg-app is easy as cake! First, open your command line, create a folder for your application and move into it.

$ mkdir my-gg-app$ cd my-gg-app

The gg-CLI features a command that adds some basic assets to get you started.

$ gg init

Now you have a tsconfig.json, a deps.ts file where you can re-export all external dependencies (like gg) and your first page in src/index.tsx.

Start the development serverCopy link to section

First things first, you need to add your token to the URL where you import gg from in the deps.ts file.

Done? Good! Then let's start the development server and try it out! You can do so using the gg-CLI.

$ gg devINFO Created empty .dev directoryINFO Server is running on port 7777

Note that gg will create a directory called .dev that will contain certain assets that gg needs to keep the development server running and to automatically reload the page in your browser if you change something in the source code. The exact contents of this directory should not concern you, in particular, you don't need to check this directory into version control.

Now that the server is running, let's visit our website in the browser. Open up http://localhost:7777 and you will see the contents of the page we created at the beginning.

Looking back into the terminal you will see the following.

INFO Compiling /SUCCESS Compiled /INFO Watching for changes in /

So gg is now watching for changes in the source code related to the page we just opened. Let's try this out by changing some content in the src/index.tsx file.

 3const PageComponent = gg.component(() => { 4  return ( 5    <html> 6      <body>-        <p>Hello from gg!</p>+7        <p>Hello world!</p> 8      </body> 9    </html> 10  ); 11});

After saving you can switch back to your browser window, wait a short amount of time, and the page will magically reload on its own and show the updated content! The CLI let's us know also about that.

INFO Re-compiling / due to code changesSUCCESS Updated compiled page for /

Application structureCopy link to section

Now let's talk some more about how a gg application is structured.

All files inside the src directory or in subdirectories will become assets in your application. The path to the asset matches the path in the file-system. Like when hosting static html files, files named index.tsx don't pay into the path.

Let's look at some examples for this:

  • The file src/index.tsx will become the root page, i.e the page with path /.
  • The file src/about.tsx will become the page with path /about.
  • The file src/contact/index.tsx will become the page with path /contact.
  • The file src/favicon.ico will become a static asset served for the path /facivon.ico.
  • The file src/some/nested/file.json will become a static asset served for the path /some/nested/file.json.

Note that all .tsx-files will become the pages for your website. Everything will not be altered and served as is.

Let's also try this by adding a static JSON file to our src-directory.

$ echo '{"Hello":"world"}' > src/hello.json

Open up http://localhost:7777/hello.json and you will see the contents of the JSON-file we just created! Again, the CLI will let us know that we requested the file.

GET 200 /hello.json

The next guide will go more in-depth about pages in a gg application.


Next → Pages