diff --git a/docs/frameworks/svelte.md b/docs/frameworks/svelte.md new file mode 100644 index 0000000..cb9448a --- /dev/null +++ b/docs/frameworks/svelte.md @@ -0,0 +1,161 @@ +--- +description: Learn how to deploy a Svelte application with Genezio. +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + +# Svelte + + + Svelte | Genezio Documentation + + +[Svelte](https://svelte.dev) is a modern web framework that allows you to write less code and build faster applications. + +:::tip +Get started in no time with the [Svelte template](https://app.genez.io/start/deploy?repository=https://github.com/Genez-io/svelte-getting-started). +::: + +# Deployment + +Learn how to deploy an existing Svelte app using Genezio, a serverless deployment platform that simplifies app management and reduces costs. + +## Prerequisites + +### 1. Install genezio + +Use your preferred package manager to install Genezio: + + + +
+ ``` + npm install genezio -g + ``` +
+ + +
+ ``` + pnpm add -g genezio + ``` +
+ + +
+ ``` + yarn add global genezio + ``` +
+ + + +### 2. Start from an existing svelte template + +Create a Svelte app using the following steps: + +
+ **Create a Svelte App** + +

1. Fork our svelte template repository on GitHub

+ +Go to https://github.com/Genez-io/svelte-getting-started/fork and fork the repo. + + +

2. Clone the newly created repository locally

+ + +```bash +git clone YOUR_REPO_URL +cd svelte-getting-started +``` + +

3. Run the Svelte App locally

+ +Run the following command to start the Svelte app locally: + +
+ ```bash + npm run dev + ``` +
+ +

4. Test the Svelte App locally

+ +Open a web browser and navigate to http://localhost:5173/ to see the app running. + +
+ +## Create the Genezio Configuration File + +Now, create a `genezio.yaml` file in the root directory of your project. + +This file will contain the configuration needed to deploy your backend using Genezio. Here is an example configuration. + +:::info +1. This example configuration works if **genezio.yaml** is in the same directory as your main application file. +2. You might need to replace the `publish` directory value if it is different in your project. +::: + +```yaml title="genezio.yaml" +# Learn more about Genezio YAML at https://genezio.com/docs/project-structure/genezio-configuration-file/ +# The name of the project. +name: svelte-getting-started +# The region where the project is deployed. +region: us-east-1 +# The version of the Genezio YAML configuration to parse. +yamlVersion: 2 +# Information about the frontend, including the path, language, and publish directory. +# It is optional. It can also be an array if there are multiple frontends you want to deploy. +frontend: + # The folder where the frontend scripts will run. + path: . + # The directory that will be published to the CDN. It is relative to the `path` directory. + publish: dist + # Scripts are running in the specified `path` directory. + scripts: + # List of scripts to run before deploying the frontend. + deploy: npm install + # List of scripts that build your frontend before deployment. It should populate the specified `publish` directory. + build: npm run build + # List of scripts to run when starting the local development server. + start: + - npm install --silent + - npm run dev --silent +``` + +This configuration file specifies the project name, deployment region, and details about the frontend. + + +## Deploy the app + +In your terminal run the following command to deploy your app to the Genezio cloud: + +
+ ```bash + genezio deploy + ``` +
+ +You should now see 2 URLs in the terminal window with the following format: + +```bash +$ App Dashboard URL: https://app.genez.io/project// +$ Frontend URL: https://.app.genez.io +``` + +## Next Steps + +After setting up the template, here are some recommended next steps: + + + +## Support + +We invite you to join our community on [Discord](https://discord.gg/uc9H5YKjXv) for further information and help. + +**Happy Learning!** diff --git a/sidebars.js b/sidebars.js index 885bb6b..f8dc27a 100644 --- a/sidebars.js +++ b/sidebars.js @@ -41,6 +41,7 @@ const sidebars = { "frameworks/react", "frameworks/react-admin", "frameworks/refine", + "frameworks/svelte", "frameworks/fastify", "frameworks/typesafe-project", "frameworks/vue"