This is an in-development version. Grow with us! 🎉

Tutorial

This is a step-by-step guide to create a basic project with Fustak. You have to install the tutorial template using the command:

fustak template https://github.com/fustak-dev/tutorial-template

Please, use the Quick Start guide to for more installation information.

Edit the index page content

  • 1 . Edit your project by opening the project folder in your text editor of choice.
  • 2 . Make changes to src/pages/index/index.content.jsx.

For example, you can change the title of the page by changing the following line:

<Title>Index Title!!!</Title>

At line 10, change the text "Index" to "My New Title". The result should look like this:

<Title>My New Title!!!</Title>

3 . Deploy your changes to the page by running the pages command:

fustak pages

In seconds, you should see your changes reflected on the page.

4 . Visit your project website by going to:

fustak url

This will return the URL of your project.

In this example, you should see the title of the page change from "Index" to "My New Title".

Great job! You've successfully edited the content of your project page.

5 . Send us feedback:

fustak feedback

Edit the Title style

  • 1 . Edit your project by opening the project folder in your text editor of choice.
  • 2 . Make changes to src/pages/index/index.content.jsx.

For example, you can change the color of the page title by changing the following line:

<Title>My New Title!!!</Title>

At line 10, add the prop color="#ff1493". The result should look like this:

<Title color="#ff1493">My New Title!!!</Title>

3 . Deploy your changes to the page by running the pages command:

fustak pages

In seconds, you should see your changes reflected on the page.

4 . Visit your project website by going to:

fustak url

This will return the URL of your project.

In this example, you should see the title of the page change the color from black to pink.

5 . Send us feedback:

fustak feedback

Edit the default HTML page

  • 1 . Edit your project by opening the project folder in your text editor of choice.
  • 2 . Make changes to src/pages/_default.page.html.

For example, you can add your own variable to the page by changing the following code:

<body>
{{ fustak_content }}
{{ fustak_body_scripts }}
</body>

At line 19 replace the previous code with the following code:

<body>
{{ my_variable }}
{{ fustak_content }}
{{ fustak_body_scripts }}
</body>

3 . Add the variable to the src/pages/_default.page.toml file the following code:

[page.definition]
lang = 'en'
title = 'Page Title'
canonical = 'https://fustak.dev'

At line 16, replace the previous code with the following code:

[page.definition]
lang = 'en'
title = 'Page Title'
canonical = 'https://fustak.dev'
my_variable = 'My Variable'

4 . Deploy your changes to the page by running the pages command:

fustak pages

In seconds, you should see your changes reflected on the page.

5 . Visit your project website by going to:

fustak url

This will return the URL of your project.

In this example, you should see the variable "My Variable" added to the page.

6 . Send us feedback:

fustak feedback

Create the Reset API

  • 1 . Edit your project by opening the project folder in your text editor of choice.

  • 2 . You have to create two new files in src/apis/counter:

  • − counter.reset.api.toml

  • − counter.reset.api.js

Copy and paste this code to the counter.reset.api.toml file:

[page.default]
file = "../_default.api.toml"

[api.builder]
active = true
service = "counter-service"
api = "counter.reset.api.js"
method = "DELETE"
path = "/counter"

[api.builder.headers]
Access-Control-Allow-Origin = "\*"
Access-Control-Allow-Credentials = "true"

Copy and paste this code to the counter.reset.api.js file:

export const handleRequest = async function () {
    try {
        sqlite.exec("DELETE FROM counter WHERE id > 0");

        return new Response(JSON.stringify({ success: true }), {
            status: 200
        });
    } catch (e) {
        return new Response(JSON.stringify({ error: e }), {
            status: 500
        });
    }
};

3 . Deploy your changes to the API by running the apis command:

fustak apis src/apis/counter/counter.reset.api.toml

It will take a second to deploy it.

4 . Send us feedback:

fustak feedback

Let's test the Reset API

1 . Get the API public token by running the following command:

fustak token counter-service

It will return the API public token. For example:

Public Token (counter-service): "e..."

2 . Rename the file src/pages/index/islands/counter._.jsx to:

src/pages/index/islands/counter.island.jsx

3 . Update the token from the src/pages/index/islands/counter.island.jsx file:

const token = "__YOUR_PUBLIC_TOKEN_GOES_HERE__";

Replace "__YOUR_PUBLIC_TOKEN_GOES_HERE__" with your actual API public token.

4 . Install the client dependencies:

First, install pnpm. If you don't have it installed, follow the instructions here:

https://pnpm.io/installation

Then, install the client dependencies:

pnpm install

5 . Uncomment the following code from the src/pages/index/index.page.toml file:

[[page.definition.scripts]]
src = 'dist(/pages/counter.island.js)'
async = true

6 . Visit your project website by going to:

fustak url

This will return the URL of your project.

Ups, it is missing the counter Reset Button. Let's add it.

7 . Send us feedback:

fustak feedback

Create the Reset Button

  • 1 . Edit your project by opening the project folder in your text editor of choice.
  • 2 . Add the Reset Button to the src/pages/index/components/counter.jsx.

This is the new code of the counter.jsx file:

export function Counter({ count = 0, double = 0, reset = () => {}}) {
...
<Button onClick={reset} marginLeft="16px" marginTop="16px">Reset</Button>

Please note that we must pass the reset function as a prop to the Counter component. So, let's do it.

4 . Add the reset function to the src/pages/index/islands/counter.island.jsx file:

const reset = () => {
    count.value = 0;

    fetch("/api/counter", {
        method: "DELETE",
        credentials: "include",
        headers: {
            Accept: "text/plain",
            Authorization: "Bearer ${token}",
            "Content-Type": "text/plain",
        },
    });

};
...
return <Counter count={count} double={double} reset={reset} />;

5 . To reflect the changes on the page, you have to deploy the page and assets again:

fustak pages && fustak assets

6 . Visit your project website by going to:

fustak url

This will return the URL of your project.

Now you should see the Reset Button. Click on it and the counter will be reset to 0.

6 . Send us feedback:

fustak feedback

Finally let's add an image to the page

  • 1 . Edit your project by opening the project folder in your text editor of choice.
  • 2 . Add the image to the src/pages/index/index.content.jsx file:
<Box tag="figure" marginTop="32px">
    <img
        src={fustak.asset("/img/dog.jpg")}
        title="A dog with its tongue sticking out"
        alt="Dog"
        height="312"
        width="250"
        loading="lazy"
    />
    <figcaption>A dog with its tongue sticking out.</figcaption>
</Box>

3 . Visit your project website by going to:

fustak url

This will return the URL of your project.

Now you should see the image!!!

4 . Send us feedback:

fustak feedback