Home
Jamstack Explorers
Menu

Building with SvelteKit and GraphCMS with Scott Spence

SvelteKit GraphCMS project set up

Okie dokie let's get started building our project. To get started quickly, we're going to start by setting up a new project using the npm init command for SvelteKit I'm going to use npm init svelte@next. And the folder I want to create the project into is called SpaceX explorers. I'm going to push enter. After pressing Enter, I'm going to choose the following options with this SvelteKit CLI I'm going to choose a skeleton project no to TypeScript. No to add es lint for code linting. And yes to prettier for code formatting. Now that's created. I'm going to change directory with CD into space x explorers. Now I can npm instal the dependencies. This command can be shortened to i as well, which is what I'm going to use. Now we have the project created and the dependencies installed. Let's take a quick look around to see what we're working with here. I'm going to open up VS code. If we take a look at the package.json, we can see packages for SvelteKit and Svelte itself. And then the additional package for prettier and the prettier plugin for Svelte. We go back up to our scripts here, we've got one to run the development server, one to build the project, and one to preview to project once it's built. There's also an option to lint and format here. You notice there's a squiggly line here to say the string does not match the pattern. So I'm going to call this project space x explorers. Hit save, a couple of other things just for how I have the project set up here.

We're gonna replace these prettier options. A smaller print width. And for the arrow parens here I'm going to have this as always, this is just for the setup I'm using, you don't have to use this yourself. If we close this, and we go over to the source folder here, we have our routes folder, and app HTML. app. HTML is what the project is built into from Svelte. So we have our head component here with some standard meta tags. And then, in the percentage signs here we have the Svelte head. So anything from Svelte, which is created in any of the projects, components or pages will be added to this at the end of the build step. And the same for the body. Here we have a div with the idea of Svelte and Svelte body, which will include all of the pages and components of the project. If we go over to the routes folder, here, we can see that there's one file, which is just got a h1 with Welcome to Svelte kit, and a P, with a tag in there to visit the SvelteKit documentation. Because we're going to be deploying this project to netlify via git, I'm going to need to initialise Git on the project, I'm going to step over to my terminal do git init. Once that's done, I'm going to step back over to VS code here. And you'll see that the files have changed colour. This means that they are waiting to be committed to Git. So I'm going to use the integrated Git provider in VS code and open it. I'm going to use conventional commits here. I'm just gonna put this as a feature

and init project. Okay. Let's kick off the dev server and take a look at the project as it is currently. So I can use NPM run Dev. With SvelteKit, you get to pass additional parameters to use the double hyphen here. And I can do dash dash, open to open a new browser tab. And I can also set a port as well. So if there was something already running on port 3000, the Port 3333 and hit Enter. And here we have two projects. Okay. That's it for this one. And the next project we are going to be building what we have currently and deploying it to netlify

Explorers

your progress

312