Introduction
In this tutorial, you will learn how to create a blog website using Strapi as a CMS and Sveltekit as the frontend framework.
This tutorial is split into a series of articles:
- Part 01: Setup and Installation
- Part 02:
- Part 03:
- Part 04:
This tutorial is Part 01 of the series. It focuses on the set up and installation of the project.
Prerequisites
To follow along with this tutorial, you must have some knowledge of HTML, CSS, and JavaScript. Knowledge of Strapi and Sveltekit/Svelte is helpful but not necessary.
In addition, you need the following tools installed on your machine:
- Node.js: the latest LTS version
- yarn
Strapi Setup
Strapi will act as the CMS for the blog app we are building. To get started, open up your terminal and create a folder to store all the code for the project.
mkdir sveltekit-strapi-blog
cd sveltekit-strapi-blog
Inside the sveltekit-strapi-blog folder, scaffold a Strapi app:
npx create-strapi-app@latest backend --quickstart --no-run
After installing the Strapi app, create a new admin user for your Strapi app. The email is chef@email.io and the password is Gourmet1234. You can change them if you want.
cd backend
yarn strapi admin:create-user --firstname=Kai --lastname=Doe --email=chef@email.io --password=Gourmet1234
Start your Strapi app.
yarn develop
Visit localhost:1337/admin in your browser to login and view your dashboard.
For now, that's it. Next, let's set up Sveltekit.
Sveltekit Setup
Open up a new terminal session and open up the main project folder, sveltekit-strapi-blog.
Install Sveltekit with the following command:
npm create svelte@latest frontend
Start the Sveltekit development server.
cd frontend
npm install
npm run dev
Visit localhost:5173 in your browser to view the Sveltekit default home page.
That's it for the Sveltekit set up as well.
Conclusion
In this tutorial, we have successfully set up the foundation for our blog website using Strapi as the CMS and Sveltekit as the frontend framework. We have learned how to create a Strapi app, configured an admin user, and started the Strapi development server. We have also installed Sveltekit, started the development server, and verified that both Strapi and Sveltekit are running smoothly.
Stay tuned for the upcoming parts of the tutorial series, where we will dive deeper into the development process and gradually build a fully functional blog website using Strapi and Sveltekit.
Resources
Author
GitHub: @Marktawa
Twitter: @McMunyaka
Hire Me
If you found this tutorial helpful and would like assistance in building your own Strapi-powered app using Sveltekit, I would be happy to help!
As an experienced Strapi and Sveltekit developer, I can provide the following services:
- Initial setup and configuration of your Strapi backend and Sveltekit frontend
- Customization and styling of your app's design and functionality
- Integration with third-party services like authentication providers, analytics, and more
- Deployment and hosting of your application
- Ongoing maintenance, updates, and feature enhancements
To discuss your project and get a quote, please feel free to contact me on markmunyakapro@gmail.com or connect with me on LinkedIn or Discord. I look forward to hearing from you and helping you bring your app to life!
Sponsor
Support my passion for sharing development knowledge by making a donation to my Buy Me a Coffee account. Your contribution helps me create valuable content and resources. Thank you for your support!
Top comments (2)
Maybe marking this as a part 1 would help? 🤷
Thanks for the tip