diff --git a/src/content/docs/CLI/Storage/index.md b/src/content/docs/CLI/Storage/index.md index 23048049..58306c97 100644 --- a/src/content/docs/CLI/Storage/index.md +++ b/src/content/docs/CLI/Storage/index.md @@ -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://.ipfs.cf-ipfs.com > hello-world.txt +curl https://.ipfs.flk-ipfs.xyz > hello-world.txt ``` ::: diff --git a/src/content/docs/astro-template.png b/src/content/docs/Platform/Frameworks/astro-template.png similarity index 100% rename from src/content/docs/astro-template.png rename to src/content/docs/Platform/Frameworks/astro-template.png diff --git a/src/content/docs/create-and-deploy.png b/src/content/docs/Platform/Frameworks/create-and-deploy.png similarity index 100% rename from src/content/docs/create-and-deploy.png rename to src/content/docs/Platform/Frameworks/create-and-deploy.png diff --git a/src/content/docs/deployed-astro-site.png b/src/content/docs/Platform/Frameworks/deployed-astro-site.png similarity index 100% rename from src/content/docs/deployed-astro-site.png rename to src/content/docs/Platform/Frameworks/deployed-astro-site.png diff --git a/src/content/docs/deployed-site.png b/src/content/docs/Platform/Frameworks/deployed-site.png similarity index 100% rename from src/content/docs/deployed-site.png rename to src/content/docs/Platform/Frameworks/deployed-site.png diff --git a/src/content/docs/Platform/Frameworks/git-integration.png b/src/content/docs/Platform/Frameworks/git-integration.png new file mode 100755 index 00000000..e0988c20 Binary files /dev/null and b/src/content/docs/Platform/Frameworks/git-integration.png differ diff --git a/src/content/docs/Platform/Frameworks/index.mdx b/src/content/docs/Platform/Frameworks/index.mdx index e3927c23..b39d1bb0 100644 --- a/src/content/docs/Platform/Frameworks/index.mdx +++ b/src/content/docs/Platform/Frameworks/index.mdx @@ -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) diff --git a/src/content/docs/index.mdx b/src/content/docs/index.mdx index 09b12454..09fe80cb 100644 --- a/src/content/docs/index.mdx +++ b/src/content/docs/index.mdx @@ -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**
@@ -273,6 +227,33 @@ Deploying one is as easy as 4 steps:
+## 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). + +
+ ## Help and tutorials Find links to useful resources to help get started, understand a concept or to get yourself onboarded @@ -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: +