At this moment (November 2022), SvelteKit is still in pre-release. But Svelte as a front-end technology is quite mature and the underlying Vite technology is also used in many production scenarios at big companies.
What I'm aiming to achieve is to develop a real-world full-stack web app with the following characteristics:
- built with SvelteKit
- versioned with Git on Azure DevOps
- deployed automatically to Azure Static Web Apps with Azure DevOps CI/CD pipelines (Continuous integration / Continuous deployment)
- has an API using Node.js Azure Functions
- the API includes separate modules
- uses TypeScript for all code development
In other words, this series of posts should show a real-life full stack web app that could support any functional requirement and, as a bonus, offers excellent developer experience. As secondary bonus, most cloud services used here offer a generous free tier, so you only need to start paying when you get users.So, let's get started! First step, start a new SvelteKit project in a local folder. What I normally do is start the Azure DevOps project first, create a new repository.
The steps shown below are:
- Create a new project in Azure DevOps named "SvelteKit Chat room"
- Initialise a new Git repository
- Clone the repository and copy the address
- Create a local folder: SvelteKitChatRoom
- Open the folder in Visual Studio Code and open a new terminal
- Git clone the Azure DevOps repository using dot to specify the current folder: git clone https://<your org>@dev.azure.com/sveltekit/SvelteKit%20Chat%20room/_git/SvelteKit%20Chat%20room .
- Initialise the SvelteKit project using:npm create svelte@latest .
- Choose Skeleton project, TypeScript, ES Lint and Playwright support.
- Run npm install
- Run npm run dev to see the app template running on localhost:5173
Steps
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgz_RS8AJcCh040yx4SkeUC2WiClqinYgL-K8-U01flS2cLNEuV-FqI7sEQjXibsSA-Aq29XHx9Ff4Z4V6ws0wn5mlAz6TkTDDdL9GyGEwhZ7RKA4m8zXo5hQ5jxgniwfx6hGGFsspQiNiuGcdOkSOLtFPGBEAdV5vyrSwJ6QKloBul5Nf2LZSfZBLj/w640-h331/Screenshot_20221103_085521.png) |
Step 1 - create new Azure DevOps project |
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNT6Kx5WLT3hNRnqsJ-YSjL0P_FSKD9j3KYrcXir019Khk8HYOVOlYyabQ5BALDex7Rgb7M1qQLXtGPqE-xcHgB-KmunBwZSR9ZzSqJelKYg8EhTWhj5nj3E1Jdh7RHxhGBKtjSfGzsP2JGwyBnRYSuOc6aPQxmjPjrMQbSZyA6u-ZxDRxYmfgccMx/w640-h300/Screenshot%202022-11-03%20085653.png) |
Step 2 - Initialise a new Git repository |
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhN9owNSe7cYiw-N-nguX3lOrmyd_cpTlFePxUQaFG6G_VJpmlJJicyRlUD2gnB78bO3sSp_fu0fvXM4YTDSpiNmGPOcfKGfnv1sUaJPE_59Tjl4fswTQ2pZvhu6_cx0JHjYzuDCypyqpj0VXaxU03OSgms70wFP5eyiZ9zrsoV31gjSLRxN4VjWDG-/s320/Screenshot%202022-11-03%20085857.png) |
Step 3 - Clone |
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEharUQ5UBLUtAsDsO7cIZhKIQiECeV787dzNvmO1TTJ8MBAPlT2U0qyksqKblHPxP6Q3PrSxuH2dOXnk_vzvkqzOwVc2pXjm_Wmraslq1g_8wtkyRL0tCNOMVgeU6AhioPD6c8Le1ASYmtsnkaVBPjs-Yiqo2sq-3cW_NCne3SzJxSIo2yvVrO5kE2C/s320/Screenshot%202022-11-03%20085914.png) |
Step 3 - Copy |
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlg6DOUHeELsTXRKGXz8rPAkB7QW54s3I9hcnRJEE5TmaYPoQoHFG6Go72Wk1cZe1FRnU5ucSV9_LML3vO5nWmLGb53ErUCGsruobyCiTZVHsi94QSXeFJb7kJlfjtC0RRFZuxar36i25DuqM2BXJhptB90vHYC65Q8wWtssFIxNypiQElsJuupUBK/w640-h346/Screenshot%202022-11-03%20090614.png) |
Steps 4,5,6 - Clone repo in VS Code terminal
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBcFtq-_Dyau4UOWWq6xPrXmKS0nii9qG5qX6XJWY_3e7aWeV1T1guygMK-usKlAL9UQtV22uznS751hmicQR38WIbcJWqLwuCKthO5Agnqo-6wraXxWqTqL_td2uEuJ4U9LRxunyQgSnSGJ4D4o7RtvhcMPNnnZU4F7uRh6jnYIfZ1h5LSp3qM0xP/w640-h342/Screenshot%202022-11-03%20090819.png) | Steps 7,8 - New SvelteKit project |
|
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjBcvwyp-dPyNzpLyHWssyM4j4wdKXmzLaLzpMxJpSt3HM1QgnHxtjYnzfiL2T06kOywpLfWz3abdW56LUDBP96ZbSLFIGxJ4Hb1wPBUWTmEfvfBg7bw4RsBlEQH42ZZf-DZRjCuRZsxD_Kkgu0aQhml68VfyfTvHjCZLhA1nFUrADVB4qUR24NESV/w640-h178/Screenshot%202022-11-03%20091127.png) |
Step 10 - Run locally |
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuXfL2QfhI4AwTeMkIp7xxSvlveBn91QtvCC4QmK139ZjcPRZQvaeGWu5t-2fqSGqfSRnnejqOX3bcL6MyIpg9Hl8mctpbGMYmwfOggBZEev1JIOzTEPqw_-saF_xTqur9aVVvaa_ZFQIn3Pn88ytGh8MBrvS64QI-PIwEHFwBlTRFKFyuofpKtiNJ/w640-h228/Screenshot%202022-11-03%20091214.png) |
Step 10 - End result |
Comments
Post a Comment