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.

Sign up for GitHub

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

add svelte #247

Merged
merged 2 commits into from
Aug 27, 2024
Merged

add svelte #247

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e303d80
add svelte
cristim67 Aug 26, 2024
317bd67
Update svelte.md
cristim67 Aug 27, 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
161 changes: 161 additions & 0 deletions docs/frameworks/svelte.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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

<head>
<title>Svelte | Genezio Documentation</title>
</head>

[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:

<Tabs>
<TabItem className="tab-item" value="npm" label="npm">
<div id="step1-install-npm">
```
npm install genezio -g
```
</div>
</TabItem>
<TabItem className="tab-item" value="pnpm" label="pnpm">
<div id="step1-install-pnpm">
```
pnpm add -g genezio
```
</div>
</TabItem>
<TabItem className="tab-item" value="yarn" label="yarn">
<div id="step1-install-yarn">
```
yarn add global genezio
```
</div>
</TabItem>
</Tabs>

### 2. Start from an existing svelte template

Create a Svelte app using the following steps:

<details>
<summary>**Create a Svelte App**</summary>

<h3> 1. Fork our svelte template repository on GitHub </h3>

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


<h3> 2. Clone the newly created repository locally </h3>


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

<h3> 3. Run the Svelte App locally </h3>

Run the following command to start the Svelte app locally:

<div>
```bash
npm run dev
```
</div>

<h3> 4. Test the Svelte App locally </h3>

Open a web browser and navigate to http://localhost:5173/ to see the app running.

</details>

## 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:

<div>
```bash
genezio deploy
```
</div>

You should now see 2 URLs in the terminal window with the following format:

```bash
$ App Dashboard URL: https://app.genez.io/project/<project-id>/<stage-id>
$ Frontend URL: https://<subdomain>.app.genez.io
```

## Next Steps

After setting up the template, here are some recommended next steps:

<ul>
<li><a href="../../features/custom-domain-configuration/">Add Custom Domain</a></li>
<li><a href="../../features/backend-deployment/">Learn more about Backend Deployment</a></li>
</ul>

## Support <a href="#support" id="support"></a>

We invite you to join our community on [Discord](https://discord.gg/uc9H5YKjXv) for further information and help.

**Happy Learning!**
1 change: 1 addition & 0 deletions sidebars.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,7 @@ const sidebars = {
"frameworks/react",
"frameworks/react-admin",
"frameworks/refine",
"frameworks/svelte",
"frameworks/fastify",
"frameworks/typesafe-project",
"frameworks/vue"
Expand Down
Loading