Getting started

What is Fleek?

Fleek is an onchain edge-optimized cloud platform that allows users to build, host, and deploy websites and applications efficiently, empowering developers to create fast and high-performing apps.

Fleek is powered by the onchain edge-optimized cloud network known called Fleek Network and it gives access to a variety of features and capabilities that makes it easy to manage cloud infrastructure.

How to get started

Below are a few resources to help you get started with Fleek. Whether you’re new to the platform or looking to dive deeper into our features, these sections below will help you navigate Fleek.

Host an app

Learn how to host a React app and a Fleek template app in Astro on Fleek using the Fleek platform app. You will need to have an account on the Fleek app to follow the steps below.

Host a React app

Create a react app with Vite or Create-React-App (CRA)

If you are using Vite, make sure your Vite config has the base set to “./” as seen below:

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react-swc';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  base: './',
});

When using Create React App (CRA), ensure that your package.json includes the following homepage attribute:
```
{
    // ...
    "homepage": ".",
    // ...
}
```
Push your app to Github
Go to the Fleek app and go to Settings and click on “Git Integrations”
Ensure that you install both of the Github applications and that they both have the “Active” badge as below. They are important for any deployment from Fleek:
Go to the “Sites” tab, click on “Add new” and select the Github repository where your app is hosted
Ensure everything is correct with the build settings and click on “Deploy site”. The correct build settings for a React app are:
- Build command: npm run dev && npm run build
- Publish directory: dist
Your site has been deployed and you can access it by clicking on the “Visit site” button:

Host a Fleek template app

Deploy a Fleek template app in Astro on Fleek using the Fleek platform app.

Go to the Fleek app and go to the “Sites” tab
Click on “Add new” and from the dropdown, select the “Use a template” option and it takes you to the templates page
Search for the “Astro Boilerplate” template and click on it
Select Github. Ensure you have your Github account connected, as in the Github integration step 6 in the React app section
You get a page you can customize the name that Fleek is to create and the account the Github account you connected earlier appears as well. You can choose if you want the repository private or public.
Fleek will start the deployment process and you can see the progress in the “Deploys” tab. Once the deployment is complete, you can access the site by clicking on the “Visit site” button.

Using the Fleek CLI

You can also deploy your app using the Fleek CLI. To do this, you need to have the Fleek CLI installed. You can install it by running the following command:

npm install -g @fleek-platform/cli

Once you have the Fleek CLI installed, you have to login to your Fleek account by running the following command:

fleek login

Cloning and deploying a site using the Fleek CLI is as simple as initializing the site, adding the files, and deploying the site. You can follow the steps here.

To deploy a simple site using the Fleek CLI, you can follow the steps below:

Create a project

To start, create a new Fleek project by running:
```
fleek projects create
```
Set Up a Simple Page

First, create a directory for your project (e.g., ~/fleek-quick-start) and navigate into it:
```
mkdir ~/fleek-quick-start && cd ~/fleek-quick-start
```
Create a simple HTML page:
```
echo "Hello world" > index.html
```
Set Up a Fleek Site

To deploy your page, initialize a Fleek site by running:
```
fleek sites init
```
Follow the prompts:
- Enter a site name.
- Specify the directory (use . for the current directory).
- Skip the build command by typing “n.”
- Choose your preferred configuration format (e.g., JSON).
Once completed, you’ll see a success message.
Deploy the Fleek Site

Finally, deploy your site::
```
 fleek sites deploy
```
After successful deployment, you’ll receive a confirmation with the IPFS CID and a link to access your site:
```
Site IPFS Content Identifier (CID): xxxxx
Access via: https://<SLUG>.on-fleek.app
```

Fleek Functions quick start

Fleek Functions are edge-optimized functions on the Fleek Network, you can use them to perform server-side operations.

Ensure you have the Fleek CLI by running the command:

npm install -g @fleek-platform/cli

For this quick start, we will deploy a simple function that returns an “hello world” string response. You can use the Fleek app or Fleek CLI for this.

Using the Fleek app

On the project’s dashboard, click on the “Functions” button on the secondary navigation
Click on the “Create function” button on the extreme right-hand of the secondary navigation and a modal pops up:
Go through the steps (from step 1 through to step 4) and follow the instructions per step
- Since you have the Fleek CLI installed, type the following command to log in to your Fleek account from the CLI:
```
fleek login
```
- We also need to switch to the Fleek project we created the Fleek Function within from the platform using the project ID. We use the command below to do that from the CLI:
```
fleek projects switch --id={{PROJECT_ID}}
```
- Create a file in a directory on your machine and name it function.js. In the file, write the below code:
```
export const main = (params) => {
  return 'hello world';
};
```
- Create the Fleek Function with the same name as the one you inputted on the Fleek platform using the below command:
```
    fleek functions create  --name demo-function
```
- Deploy the Fleek Function, using the below command:
```
fleek functions deploy --name demo-function --path <code_path>
```

You have successfully deployed a Fleek Function using the above steps from the Fleek platform UI and now the first section of our Fleek Function “Overview” page should look like this now with the “Pending” status updated:

Using the Fleek CLI

Deploying one is as easy as 4 steps:

Login to your Fleek account
```
fleek login
```
Create a draft function: You can write a Typescript or JavaScript function

To start, create a new Fleek project by running:
```
touch my-first-function.js
```
In your text editor, add the following code:
```
export const main = (params) => {
  return 'hello world';
};
```
Create your Fleek Function

To start, create a new Fleek project by running:
```
fleek functions create --name my-first-function
```

Deploy your Fleek Function

To start, create a new Fleek project by running:

fleek functions deploy \
--name my-first-function \
--path ~/some/path/my-first-function.js

Help and tutorials

Find links to useful resources to help get started, understand a concept or to get yourself onboarded to using Fleek for building edge-optimized applications.

Videos to help you with Fleek

Read our guides

In this section, you’ll find helpful guides designed to assist you with the most commonly-encountered tasks on Fleek. For a deeper understanding and more extensive information, our documentation is available to provide further insights and support.

Join our community and stay up-to-date with the latest news, features, and insights from our team. Follow us on social media to receive updates, engage with our community, and share your thoughts. Connect with us on Discord for real-time conversations, support, and collaboration. Together, we’re shaping the future of our service.

Overview

Edit this page