|
1 | | -# create-svelte |
| 1 | +# Full Stack Web Development in the Cloud |
2 | 2 |
|
3 | | -Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte); |
| 3 | +This repository contains the source code for the [Full Stack Web Development in the Cloud](https://youtu.be/OUzaUJ3gEug) course. |
4 | 4 |
|
5 | | -## Creating a project |
| 5 | +## Architecture |
6 | 6 |
|
7 | | -If you're seeing this, you've probably already done this step. Congrats! |
| 7 | +The diagram below outlines the high-level architecture and the hosting providers for the web application, API and database. |
8 | 8 |
|
9 | | -```bash |
10 | | -# create a new project in the current directory |
11 | | -npm init svelte@next |
| 9 | + |
12 | 10 |
|
13 | | -# create a new project in my-app |
14 | | -npm init svelte@next my-app |
15 | | -``` |
| 11 | +## Ephemeral developer environments |
16 | 12 |
|
17 | | -> Note: the `@next` is temporary |
| 13 | +The entire course is developed using [Gitpod](https://www.gitpod.io/). For each task, we use an ephemeral developer environment that we dispose of as soon as the task is completed. Environments are fully automated and we never run `npm install` or `npm run dev` manually. We also don't have any code, dependencies, etc installed locally. |
18 | 14 |
|
19 | | -## Developing |
| 15 | +## Technology stack |
20 | 16 |
|
21 | | -Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server: |
| 17 | +The course leverages the following technologies. |
22 | 18 |
|
23 | | -```bash |
24 | | -npm run dev |
| 19 | +**Web application** |
25 | 20 |
|
26 | | -# or start the server and open the app in a new browser tab |
27 | | -npm run dev -- --open |
28 | | -``` |
| 21 | +[Svelte](https://svelte.dev/) is a compiler to develop highly performant web applications with great developer experience. The application is styled with plain CSS. |
29 | 22 |
|
30 | | -## Building |
| 23 | +**API** |
31 | 24 |
|
32 | | -Before creating a production version of your app, install an [adapter](https://kit.svelte.dev/docs#adapters) for your target environment. Then: |
| 25 | +[SvelteKit](https://kit.svelte.dev/) is the library & application framework powered by Svelte. It provides routing, server-side rendering and also enables us to develop a web application that works if Javascript is disabled. |
33 | 26 |
|
34 | | -```bash |
35 | | -npm run build |
36 | | -``` |
| 27 | +[Prisma](https://www.prisma.io/) is the object-relational mapping (ORM) library that let's us interact with the database. Based on models we define, Prisma generates the database schema and keeps the databsae in sync with our model(s). In addition, it generates a Typescript client we import into our code so that we have type safety when we work with database objects. |
37 | 28 |
|
38 | | -> You can preview the built app with `npm run preview`, regardless of whether you installed an adapter. This should _not_ be used to serve your app in production. |
| 29 | +**Database** |
| 30 | + |
| 31 | +[Postgres](https://www.postgresql.org/) is our database of choice for the course. However, thanks to Prisma's support for various other databases, it is a matter of changing configuration values to leverage a different database. |
| 32 | + |
| 33 | +**Deployment** |
| 34 | + |
| 35 | +The web application and API are hosted on [Vercel](https://vercel.com/) whereas the database lives on [Railway](https://railway.app/). |
| 36 | + |
| 37 | +## Pull requests |
| 38 | + |
| 39 | +Each section of the course has [a corresponding pull request](https://github.com/gitpod-io/full-stack-web-development/pulls?q=is%3Apr+is%3Aclosed). If you get stuck, make sure you check out the source code to copy & paste what you need. |
0 commit comments