DEV Community

Cover image for I have created Sveltegram an Instagram clone in Sveltekit and Nodejs
Harsh Mangalam
Harsh Mangalam

Posted on • Updated on

I have created Sveltegram an Instagram clone in Sveltekit and Nodejs

Hello Community Svelte is really awesome javascript compiler which convert .svelte file to highly efficient javascript code.

But the problem is you cannot create production ready web app with svelte because you will face SEO problem code splitting problem etc..

Hence Sapper come in pictures and solve most of the issues.But you knew sapper will never touch v1.0 you can read this blog post by Rich Harris - creator of svelte.

Hence i have looked into the sveltekit . If you are a React developer you can think sveltekit as a Nextjs. If you are a Vue developer you can look it as Nuxtjs.

In this project i have used Svelte-materialify very cool and awesome material library inspired by vuetify.

Backend is deployed on Heroku

Frontend deployed on Vercel

GitHub logo harshmangalam / sveltegram-sveltekit-web

This is a simple instagram like image and post sharing web app where user can follow another user view their profile like post and create post

live demo

https://sveltegram-mu.vercel.app/

create-svelte

Everything you need to build a Svelte project, powered by create-svelte;

Creating a project

If you're seeing this, you've probably already done this step. Congrats!

# create a new project in the current directory
npm init svelte@next

# create a new project in my-app
npm init svelte@next my-app
Enter fullscreen mode Exit fullscreen mode

Note: the @next is temporary

Developing

Once you've created a project and installed dependencies with npm install (or pnpm install or yarn), start a development server:

npm run dev

# or start the server and open the app in a new browser tab
npm run dev -- --open
Enter fullscreen mode Exit fullscreen mode

Building

Svelte apps are built with adapters, which optimise your project for deployment to different environments.

By default, npm run build will generate a Node app that you can run with node build. To use a different adapter, add it to the devDependencies in package.json making…

Live demo sveltegram

  • deployed on vercel. refresh page if getting application error from vercel

Top comments (4)

Collapse
 
psenne profile image
psenne

I don't understand how you're using sveltekit. It just looks like a tradition node/express backend and svelte frontend with routing. SvelteKit has SSR and server routing. Am I missing something?

Collapse
 
harshmangalam profile image
Harsh Mangalam

I understand you are looking for server routes insides same sveltekit app so that it easily deployed by platform like vercel as cloud function. But i always seperate server so that i can get more flexibility and simply use ssr features in frontend api call .

Collapse
 
jdgamble555 profile image
Jonathan Gamble

Demo does not work.

Collapse
 
harshmangalam profile image
Harsh Mangalam

i have removed from vercel