Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: getting started doc #253

Merged
merged 21 commits into from
Oct 3, 2024
Merged
Show file tree
Hide file tree
Changes from 20 commits
Commits
Show all changes
21 commits
Select commit Hold shift + click to select a range
2fae34e
chore: add changelog index
tobySolutions Sep 13, 2024
2757cd1
Merge branch 'develop' of https://github.com/fleek-platform/website i…
tobySolutions Sep 16, 2024
48e4bdb
feat: add OFAC documentation to domains page
tobySolutions Sep 16, 2024
c6045ff
Merge branch 'develop' of https://github.com/fleek-platform/website i…
tobySolutions Sep 17, 2024
8d0e460
Merge branch 'develop' of https://github.com/fleek-platform/website i…
tobySolutions Sep 22, 2024
84fb7cd
Merge branch 'develop' of https://github.com/fleek-platform/website i…
tobySolutions Sep 23, 2024
0e5058b
chore: pullng
tobySolutions Sep 24, 2024
669dc46
Merge branch 'develop' of https://github.com/fleek-platform/website i…
tobySolutions Sep 24, 2024
d59b7ea
Merge branch 'develop' of https://github.com/fleek-platform/website i…
tobySolutions Sep 24, 2024
e6498e5
Merge branch 'develop' of https://github.com/fleek-platform/website i…
tobySolutions Sep 26, 2024
84c3002
Merge branch 'develop' of https://github.com/fleek-platform/website i…
tobySolutions Sep 27, 2024
5717d97
chore: checkout
tobySolutions Sep 27, 2024
0336b4f
chore: pulling
tobySolutions Sep 30, 2024
c8baac7
Merge branch 'develop' of https://github.com/fleek-platform/website i…
tobySolutions Oct 1, 2024
4dea0be
chore: checkout
tobySolutions Oct 1, 2024
7c4d9fd
chore: pulling
tobySolutions Oct 3, 2024
53c0c82
fix: getting started guide
tobySolutions Oct 3, 2024
c49b693
fix: getting started guide
tobySolutions Oct 3, 2024
0036ecc
fix: getting started guide
tobySolutions Oct 3, 2024
ea0a3ef
Update index.mdx
nlc616 Oct 3, 2024
ca937b2
fix: getting started guide
tobySolutions Oct 3, 2024
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/content/docs/CLI/Storage/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -81,7 +81,7 @@ You can retrieve files or directories from Fleek Storage by providing a Name or
Currently, the data isn't downloaded, a table is presented instead. For single files, you can lookup for the content URL and use cURL and pipe to a local file.

```sh
curl https://<CID>.ipfs.cf-ipfs.com > hello-world.txt
curl https://<CID>.ipfs.flk-ipfs.xyz > hello-world.txt
```

:::
Expand Down
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
58 changes: 58 additions & 0 deletions src/content/docs/Platform/Frameworks/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -52,3 +52,61 @@ At the moment Fleek is introducing more full stack capabilities. This will be do
## Using framework templates to get started

If you're ready to start building with Fleek and have a favored framework in mind, we offer several templates for popular frameworks that make it easy to deploy an application to Fleek of those respective types. You can browse our templates [here](/templates).

### Host a React app

1. Create a React app with [Vite](https://vitejs.dev/guide/) or [Create-React-App (CRA)](https://create-react-app.dev/docs/getting-started)

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

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

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

3. When using Create React App (CRA), ensure that your `package.json` includes the following `homepage` attribute:
```js
{
// ...
"homepage": ".",
// ...
}
```
4. Push your app to Github
5. Go to the [Fleek app](https://app.fleek.xyz/) and go to `Settings` and click on "Git Integrations"
6. 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:

![Github integration active](./git-integration.png)

7. Go to the "Sites" tab, click on "Add new" and select the Github repository where your app is hosted
8. 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`
9. Your site has been deployed and you can access it by clicking on the "Visit site" button:

![deployed website fleek page](./deployed-site.png)

### Host an Astro template

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

1. Go to the [Fleek app](https://app.fleek.xyz/) and go to the "Sites" tab
2. Click on "Add new" and from the dropdown and select the "Use a template" option. It will take you to the "Templates" page.
3. Search for the "Astro Boilerplate" template and click on it.

![Astro template page](./astro-template.png)

4. Select Github. Ensure you have your Github account connected, as in the Github integration step 6 in the React app section.
5. You will land on a page where you can customize the name. The Github account you connected earlier appears as well. You can choose if you want the repository private or public.

![Create and deploy](./create-and-deploy.png)

6. 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.

![deployed astro site](./deployed-astro-site.png)
96 changes: 42 additions & 54 deletions src/content/docs/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -33,63 +33,17 @@ Learn how to host a React app and a Fleek template app in Astro on Fleek using t
Fleek supports static sites currently. SSR support is a work in progress and is not yet available for deployed sites.
:::

### Host a React app

1. Create a react app with [Vite](https://vitejs.dev/guide/) or [Create-React-App (CRA)](https://create-react-app.dev/docs/getting-started)

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

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

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

3. When using Create React App (CRA), ensure that your `package.json` includes the following `homepage` attribute:
```js
{
// ...
"homepage": ".",
// ...
}
```
4. Push your app to Github
5. Go to the [Fleek app](https://app.fleek.xyz/) and go to `Settings` and click on "Git Integrations"
6. 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:
1. **Connect Git Account to Fleek**: In the settings tab under "Git Integrations", you will need to connect your Git account to Fleek

![Github integration active](./git-integration.png)

7. Go to the "Sites" tab, click on "Add new" and select the Github repository where your app is hosted
8. 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`
9. Your site has been deployed and you can access it by clicking on the "Visit site" button:

![deployed website fleek page](./deployed-site.png)

### Host a Fleek template app

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

1. Go to the [Fleek app](https://app.fleek.xyz/) and go to the "Sites" tab
2. Click on "Add new" and from the dropdown, select the "Use a template" option and it takes you to the templates page
3. Search for the "Astro Boilerplate" template and click on it

![Astro template page](./astro-template.png)

4. Select Github. Ensure you have your Github account connected, as in the Github integration step 6 in the React app section
5. 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.

![Create and deploy](./create-and-deploy.png)

6. 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.

![deployed astro site](./deployed-astro-site.png)
2. **Navigate to the "Hosting" tab**
3. **Click the "Add New" button**
4. **Select Repository**
5. **Verify Build Details**
6. **Deploy**
7. **View Deployments**
8. **View Live Site**

<div className="my-12 bg-gray-dark-6 p-[1px]" />

Expand Down Expand Up @@ -273,6 +227,33 @@ Deploying one is as easy as 4 steps:

<div className="my-12 bg-gray-dark-6 p-[1px]" />

## Fleek storage quickstart

:::info
There is an option to configure a private gateway for increased rate limits when retrieving resources
:::

Fleek's storage service enables the decentralized storage of your files by leveraging the edge-optimized Fleek Network. The service supports IPFS as our main storage protocol, complemented by Arweave and Filecoin as a backup layer

To use Fleek storage, you can follow the steps below:

1. **Navigate to the "Storage" tab**
2. **Click the "Add New" button to upload a file or folder**

### Using the Fleek CLI

With the CLI already installed, you can also access the Fleek storage service.

To add a file "hello_world.txt" to Fleek Storage simply run the command:

```sh
fleek storage add ~/MyFiles/hello_world.txt
```

You can also perform other operations listing all the files or directories in the Fleek Storage for the current project and deleting a file or directory from the Fleek Storage. You can find more information on the Fleek CLI storage commands [here](/docs/cli/storage).

<div className="my-12 bg-gray-dark-6 p-[1px]" />

## Help and tutorials

Find links to useful resources to help get started, understand a concept or to get yourself onboarded
Expand All @@ -289,6 +270,13 @@ to using Fleek for building edge-optimized applications.

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.

To get up to speed with deploying your website or application, check out the below guides:

- [Deploy a React app](/docs/platform/frameworks#host-a-react-app)
- [Deploy an Astro website](/docs/platform/frameworks#host-a-react-app)

For all of our guides and more, visit our guides section:

<div className="w-fit">
<Button
variant="secondary"
Expand Down
4 changes: 4 additions & 0 deletions src/utils/url.ts
Original file line number Diff line number Diff line change
Expand Up @@ -77,3 +77,7 @@ export const removeProtocolFromUrl = (userUrl: string) => {
return;
}
};

export function capitalizeFirstLetter(string: string): string {
return string.charAt(0).toUpperCase() + string.slice(1);
}
Loading