How to install and work with Svelte Kit Frontend for your Wordpress Project project.
Note: Make sure you have run WordPress project, before use this source code project, if you need to SEO Wordpress Themes template , so you can download our worpdress template. Download wordpress themes →
Before we start, we need to configure your WordPress Project.
Setup Wordpress Backend Headless CMS
- Login on wordpress admin ourweb/wp-admin
- Activate API plugins
Next we ready to develope svelte kit as frontend for your wordpress project.
- Need to download Node JS →
- Install Node on your local devices
- Download Source Code Svelte Kit Frontend Project
- Create new project on desktop , name it with sveltewp
- Extract and move all source code project to
- Need to setup URL API backend website, so you can open your project sveltewp on desktop . and open src/routes folder.
- Change API URL on blog.svelte , page.svelte , index.svelte - Change URL API with your Backend WordPress URL and save it.
- Now we need to access your svelte project by using terminal, open terminal and run this command
cd C:\Users\pcname\Desktop\sveltewp change pcname with your pc name
- Now you can run this project with terminal, run this command
npm install && npm run dev
- Open localhost:3000
- Congratulations , you have run your frontend sveltekit website project in your local device.
Make your frontend website online
After you have change and configure your svelte kit frontend project, now you can deploy your website .
You need to follow this step for deploy your project and make your frontend website live.
- Push On Git Repo on Github , Gitlab or Bitbucket
- Integration with modern static hosting
- Run Deploy Production Mode
Push on Git Repo
- Create account on github / gitlab or bitbucket.
- Create new repo on github and name it with your project , for example sveltewp.
- Back on local devices, Access your project with terminal , run this command
cd C:\Users\pcname\Desktop\sveltewp change pcname with your pc name.
- Next step we can push this local project in to github /gitlab /bibucket repo. Run this command
git init && git add . && git commit -m "my first commit" && git remote add origin https://github.com/username/myrepo git push -u origin main need to change username with your github username , and myrepo with your repo project name , and main with your github repo default branch for example main or master - check on your github repo.
- Check your gi repo
- Congratulations you successfully for Push from local devices project in to your git repo.
- Next step integration with modern static hosting.
Deploy on Modern Static Hosting
- You can use neltify , vercel , cloudflare pages for deploy your svelte kit frontend project .
- Create account with your github account on vercel ,netlify , cloudflare ,then create new project on vercel / netlify , for cloudflare you can create new cloudflare pages.
- After you have create new project now you can integration your github repo, select your repo project, and select svelte framework on build production - or you can insert
npm run build , then click deploy.
- Congratulations your svelte kit frontend website blog is live now !!
We hope with this source code you can build modern frontend website for your wordpress project.
Support us with buy a cup of coffee for our team dev