Opens an external site in a new window
Pray for peace.
RODNEY LAB
  • Home
  • Plus +
  • Projects
  • Giving
  • Contact
RODNEY LAB
  • Home
  • Plus +
  • Newsletter
  • Contact

SvelteKit Secure Dev Server: go HTTPS # SvelteKit Secure Dev Server: go HTTPS #

SvelteKit Secure Dev Server
  1. Rodney Lab Home
  2. Rodney Lab Blog Posts
  3. SvelteKit Blog Posts
<PREVIOUS POST
NEXT POST >
LATEST POST >>

SvelteKit Secure Dev Server: go HTTPS #

Updated 7 months ago
3 minute read Gunning Fog Index: 6.1
Content by Rodney
Author Image: Rodney from Rodney Lab
SHARE:

🔐 SvelteKit Secure Dev Server #

It not at all difficult to spin up a SvelteKit secure dev server for your app. The SvelteKit command line interface (CLI) will generate a self-signed SSL certificate for you instantly. This lets you access your site via an HTTPS connection as you develop and test it. Although not necessary for many applications, you might be working with something like FIDO U2F multifactor authentication (MFA). In this case it is necessary, even during development, to be running an HTTPS site. Fear not though! This short video takes you through the steps needed to get your HTTPS SvelteKit dev running. You'll be off to the races in no time!

📹 SvelteKit Secure Dev Server: Video #

Please enable JavaScript to watch the video 📼

SvelteKit Secure Dev Server

🗳 Poll #

What's the most secure second factor (2FA) mechanism you add to new apps with login?
Voting reveals latest results.

🖥 Code #

Spinning up a Skeleton SvelteKit App #

    
pnpm create [email protected] my-sveltekit-app && cd $_
pnpm install

SvelteKit Secure Dev Server Startup (One‑Off) #

    
pnpm run dev -- --https

SvelteKit Secure Dev Server Startup #

package.json
json
    
1 {
2 "name": "sveltekit-secure-dev-server",
3 "version": "0.0.1",
4 "scripts": {
5 "dev": "vite dev --port 3030 --https",
6 "build": "vite build",
7 "preview": "vite preview --port 3030",
8 "lint": "prettier --ignore-path .gitignore --check --plugin-search-dir=. . && eslint --ignore-path .gitignore .",
9 "format": "prettier --ignore-path .gitignore --write --plugin-search-dir=. ."
10 },
11 "devDependencies": {
12 "@sveltejs/kit": "next",
13 "eslint": "^7.32.0",
14 "eslint-config-prettier": "^8.3.0",
15 "eslint-plugin-svelte3": "^3.2.1",
16 "prettier": "^2.4.1",
17 "prettier-plugin-svelte": "^2.4.0",
18 "svelte": "^3.42.6"
19 },
20 "type": "module"
21 }

Vite recommend you create your own certificates. You might use openssl or makecert to do this. As a temporary fix, you might consider installing the @vitejs/plugin-basic-ssl Vite plugin:

vite.config.js
javascript
    
import { sveltekit } from '@sveltejs/kit/vite';
import basicSsl from '@vitejs/plugin-basic-ssl';
/** @type {import('vite').UserConfig} */
const config = {
plugins: [basicSsl(), sveltekit()]
};
export default config;

🔗 Links #

  • Getting Started with SvelteKit,
  • Cloudflare article on SSL certificates which also explains what a self-signed certificate is  ,
  • SvelteKit command line interface (CLI) docs 

🙏🏽 Feedback #

If you have found this video useful, see links below for further related content on this site. I do hope you learned one new thing from the video. Let me know if there are any ways I can improve on it. I hope you will use the code or starter in your own projects. Be sure to share your work on Twitter, giving me a mention so I can see what you did. Finally be sure to let me know ideas for other short videos you would like to see. Read on to find ways to get in touch, further below. If you have found this post useful, even though you can only afford even a tiny contribution, please consider supporting me through Buy me a Coffee.

Finally, feel free to share the post on your social media accounts for all your followers who will find it useful. As well as leaving a comment below, you can get in touch via @askRodney on Twitter and also askRodney on Telegram  . Also, see further ways to get in touch with Rodney Lab. I post regularly on SvelteKit as well as Search Engine Optimisation among other topics. Also subscribe to the newsletter to keep up-to-date with our latest projects.

Thanks for reading this post. I hope you found it valuable. Please get in touch with your feedback and suggestions for posts you would like to see. Read more about me …

Rodney from Rodney Lab
TAGS:
SVELTEKIT

Reposts:

Reposts

  • TSR Codes profile avatar

Likes:

Likes

  • TSR Codes profile avatar
  • coadtan profile avatar
  • Vinny profile avatar
  • Ryan Arpe profile avatar
Reposts & likes provided by Twitter via Webmentions.

Related Posts

SvelteKit FIDO U2F Login: Multifactor Authentication

SvelteKit FIDO U2F Login: Multifactor Authentication

sveltekit
security
<PREVIOUS POST
NEXT POST >
LATEST POST >>

Leave a comment …

Your information will be handled in line with our Privacy Policy .

Ask for more

1 Nov 2022 — Astro Server-Side Rendering: Edge Search Site
3 Oct 2022 — Svelte eCommerce Site: SvelteKit Snipcart Storefront
1 Sept 2022 — Get Started with SvelteKit Headless WordPress

Copyright © 2020 – 2023 Rodney Johnson. All Rights Reserved. Please read important copyright and intellectual property information.

  • Home
  • Plus +
  • Newsletter
  • Contact
  • Terms of Use
  • Privacy Policy
We use cookies  to enhance visitors’ experience. Please click the “Options” button to make your choice.  Learn more here.