|
| 1 | +import Guide from '~/components/layout/guide' |
| 2 | +import Snippet from '~/components/snippet' |
| 3 | +import Caption from '~/components/text/caption' |
| 4 | +import { GenericLink } from '~/components/text/link' |
| 5 | +import { Image } from '~/components/media' |
| 6 | + |
| 7 | +export const meta = { |
| 8 | + title: 'Deploy Svelte with ZEIT Now', |
| 9 | + description: 'Create a Svelte app and deploy it live with ZEIT Now.', |
| 10 | + published: '2019-10-30T12:00:00.860Z', |
| 11 | + authors: ['msweeneydev'], |
| 12 | + url: '/guides/deploying-svelte-with-zeit-now', |
| 13 | + image: |
| 14 | + 'https://og-image.now.sh/**Deploy%20Svelte%20Apps**%20%3Cbr%2F%3E%20with%20ZEIT%20Now.png?theme=light&md=1&fontSize=100px&images=https%3A%2F%2Fassets.zeit.co%2Fimage%2Fupload%2Ffront%2Fassets%2Fdesign%2Fzeit-black-triangle.svg&images=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDciIGhlaWdo%250D%250AdD0iMTI4IiB2aWV3Qm94PSIwIDAgMTA3IDEyOCI%2BPHRpdGxlPnN2ZWx0ZS1sb2dvPC90aXRsZT48%250D%250AcGF0aCBkPSJNOTQuMTU2NiwyMi44MTg5Yy0xMC40LTE0Ljg4NTEtMzAuOTQtMTkuMjk3MS00NS43%250D%250AOTE0LTkuODM0OEwyMi4yODI1LDI5LjYwNzhBMjkuOTIzNCwyOS45MjM0LDAsMCwwLDguNzYzOSw0%250D%250AOS42NTA2YTMxLjUxMzYsMzEuNTEzNiwwLDAsMCwzLjEwNzYsMjAuMjMxOEEzMC4wMDYxLDMwLjAw%250D%250ANjEsMCwwLDAsNy4zOTUzLDgxLjA2NTNhMzEuODg4NiwzMS44ODg2LDAsMCwwLDUuNDQ3MywyNC4x%250D%250AMTU3YzEwLjQwMjIsMTQuODg2NSwzMC45NDIzLDE5LjI5NjYsNDUuNzkxNCw5LjgzNDhMODQuNzE2%250D%250ANyw5OC4zOTIxQTI5LjkxNzcsMjkuOTE3NywwLDAsMCw5OC4yMzUzLDc4LjM0OTMsMzEuNTI2Mywz%250D%250AMS41MjYzLDAsMCwwLDk1LjEzLDU4LjExN2EzMCwzMCwwLDAsMCw0LjQ3NDMtMTEuMTgyNCwzMS44%250D%250AOCwzMS44OCwwLDAsMC01LjQ0NzMtMjQuMTE1NyIgc3R5bGU9ImZpbGw6I2ZmM2UwMCIvPjxwYXRo%250D%250AIGQ9Ik00NS44MTcxLDEwNi41ODE1QTIwLjcxODIsMjAuNzE4MiwwLDAsMSwyMy41OCw5OC4zMzg5%250D%250AYTE5LjE3MzksMTkuMTczOSwwLDAsMS0zLjI3NjYtMTQuNTAyNSwxOC4xODg2LDE4LjE4ODYsMCww%250D%250ALDEsLjYyMzMtMi40MzU3bC40OTEyLTEuNDk3OCwxLjMzNjMuOTgxNWEzMy42NDQzLDMzLjY0NDMs%250D%250AMCwwLDAsMTAuMjAzLDUuMDk3OGwuOTY5NC4yOTQxLS4wODkzLjk2NzVhNS44NDc0LDUuODQ3NCww%250D%250ALDAsMCwxLjA1MiwzLjg3ODEsNi4yMzg5LDYuMjM4OSwwLDAsMCw2LjY5NTIsMi40ODUsNS43NDQ5%250D%250ALDUuNzQ0OSwwLDAsMCwxLjYwMjEtLjcwNDFMNjkuMjcsNzYuMjgxYTUuNDMwNiw1LjQzMDYsMCww%250D%250ALDAsMi40NTA2LTMuNjMxLDUuNzk0OCw1Ljc5NDgsMCwwLDAtLjk4NzUtNC4zNzEyLDYuMjQzNiw2%250D%250ALjI0MzYsMCwwLDAtNi42OTc4LTIuNDg2NCw1Ljc0MjcsNS43NDI3LDAsMCwwLTEuNi43MDM2bC05%250D%250ALjk1MzIsNi4zNDQ5YTE5LjAzMjksMTkuMDMyOSwwLDAsMS01LjI5NjUsMi4zMjU5LDIwLjcxODEs%250D%250AMjAuNzE4MSwwLDAsMS0yMi4yMzY4LTguMjQyNywxOS4xNzI1LDE5LjE3MjUsMCwwLDEtMy4yNzY2%250D%250ALTE0LjUwMjQsMTcuOTg4NSwxNy45ODg1LDAsMCwxLDguMTMtMTIuMDUxM0w1NS44ODMzLDIzLjc0%250D%250ANzJhMTkuMDAzOCwxOS4wMDM4LDAsMCwxLDUuMy0yLjMyODdBMjAuNzE4MiwyMC43MTgyLDAsMCwx%250D%250ALDgzLjQyLDI5LjY2MTFhMTkuMTczOSwxOS4xNzM5LDAsMCwxLDMuMjc2NiwxNC41MDI1LDE4LjQs%250D%250AMTguNCwwLDAsMS0uNjIzMywyLjQzNTdsLS40OTEyLDEuNDk3OC0xLjMzNTYtLjk4YTMzLjYxNzUs%250D%250AMzMuNjE3NSwwLDAsMC0xMC4yMDM3LTUuMWwtLjk2OTQtLjI5NDIuMDg5My0uOTY3NWE1Ljg1ODgs%250D%250ANS44NTg4LDAsMCwwLTEuMDUyLTMuODc4LDYuMjM4OSw2LjIzODksMCwwLDAtNi42OTUyLTIuNDg1%250D%250ALDUuNzQ0OSw1Ljc0NDksMCwwLDAtMS42MDIxLjcwNDFMMzcuNzMsNTEuNzE5YTUuNDIxOCw1LjQy%250D%250AMTgsMCwwLDAtMi40NDg3LDMuNjMsNS43ODYyLDUuNzg2MiwwLDAsMCwuOTg1Niw0LjM3MTcsNi4y%250D%250ANDM3LDYuMjQzNywwLDAsMCw2LjY5NzgsMi40ODY0LDUuNzY1Miw1Ljc2NTIsMCwwLDAsMS42MDIt%250D%250ALjcwNDFsOS45NTE5LTYuMzQyNWExOC45NzgsMTguOTc4LDAsMCwxLDUuMjk1OS0yLjMyNzgsMjAu%250D%250ANzE4MSwyMC43MTgxLDAsMCwxLDIyLjIzNjgsOC4yNDI3LDE5LjE3MjUsMTkuMTcyNSwwLDAsMSwz%250D%250ALjI3NjYsMTQuNTAyNCwxNy45OTc3LDE3Ljk5NzcsMCwwLDEtOC4xMywxMi4wNTMyTDUxLjExNjcs%250D%250AMTA0LjI1MjhhMTkuMDAzOCwxOS4wMDM4LDAsMCwxLTUuMywyLjMyODciIHN0eWxlPSJmaWxsOiNm%250D%250AZmYiLz48L3N2Zz4%3D&widths=250&widths=300&heights=250&heights=300', |
| 15 | + editUrl: 'pages/guides/deploying-svelte-with-zeit-now.mdx', |
| 16 | + lastEdited: '2019-10-30T17:18:03.000Z' |
| 17 | +} |
| 18 | + |
| 19 | +[Svelte](https://svelte.dev/) is a radically new approach to building user interfaces. |
| 20 | + |
| 21 | +Create and deploy a new Svelte app with ZEIT Now without the setup using the button below. |
| 22 | + |
| 23 | +<a href="https://zeit.co/new/project?template=https://github.com/zeit/now-examples/tree/master/svelte"> |
| 24 | + <Image src="https://zeit.co/button" width={104} height={36} align="left" /> |
| 25 | +</a> |
| 26 | + |
| 27 | +Alternatively, set up a Svelte app locally and deploy using Now CLI with the following steps. |
| 28 | + |
| 29 | +## Step 1: Set Up Your Svelte Project |
| 30 | + |
| 31 | +Set up a Svelte app with [`npx`](https://www.npmjs.com/package/npx) and move into the project directory: |
| 32 | + |
| 33 | +<Snippet dark text="npx degit sveltejs/template my-svelte-project && cd my-svelte-project" /> |
| 34 | +<Caption>Initializing a Svelte app with <GenericLink href="https://www.npmjs.com/package/npx">npx</GenericLink> and moving into the project directory.</Caption> |
| 35 | + |
| 36 | +## Step 2: Deploying Your Svelte App with ZEIT Now |
| 37 | + |
| 38 | +With a Svelte app set up, it is ready to deploy live with [Now](/docs/v2). |
| 39 | + |
| 40 | +Using [Now CLI](/download), deploy your app with **a single command**: |
| 41 | + |
| 42 | +<Snippet dark text="now" /> |
| 43 | +<Caption>Deploying your Svelte app with Now CLI.</Caption> |
| 44 | + |
| 45 | +If you want to deploy your Svelte app when you push to a Git repository, you can use either [Now for GitHub](/docs/v2/integrations/now-for-github/) or [Now for GitLab](/docs/v2/integrations/now-for-gitlab/) to have your project automatically deployed on every push, and the [production domain](https://zeit.co/docs/v2/custom-domains/#adding-a-domain) updated on push to master. |
| 46 | + |
| 47 | +export default ({ children }) => <Guide meta={meta}>{children}</Guide> |
| 48 | + |
| 49 | +export const config = { |
| 50 | + amp: 'hybrid' |
| 51 | +} |
0 commit comments