create-svelte

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

This project is based on the following tutorial:

SvelteKit Crash Course w/ Tailwind CSS and DaisyUI, GraphQL and dynamic routes

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

Note: the @next is temporary

Tailwind CSS

Use svelte-add utlity to install Tailwind CSS

npx svelte-add@latest tailwindcss

GraphCMS

Signup/ login to graphcms

Select the blog starter template and create a new project.

Keep include template content checked.

Select a suitable CDN node location and create project.

Select the free Community plan.

API Endpoint

Navigate to Settings then API Access and copy the Content API endpoint into .env

GRAPHQL_ENDPOINT=https://#########.graphcms.com/v2/############

Pages

Graphcms has a Pages model for us to create content for standalone static pages.

Navigate to Content and then Pages. There is an existing page for About, but pages can be creted for static content such as FAQ or Products/ Services.

API Playground

Navigate to the API Playground

Create a query to fetch all posts:

query Posts {
  posts {
    title
    slug
    date
    excerpt
    tags
    coverImage {
      url
    }
  }
}

Place query in a get request endpoint for posts and see the result in: http://localhost:3333/posts.json

Create a query to fetch a specific post:

query Post($slug: String!) {
  post(where: {slug: $slug}) {
    title
    date
    tags
    author {
      name
      authorTitle: title
      picture {
        url(transformation:{image:{resize:{fit:clip, height:50, width:50}}})
      }
    }
    content {
      html
      markdown
      raw
      text
    }
    coverImage {
      url
    }
  }
}

Add {"slug": "technical-seo-with-graphcms"} in the Query Variables field before running the query.

GraphQL has ability to transform images on the URl itself.

Place query in a get request endpoint for a post (based on slug) and see the result in URI with a slug: http://localhost:3000/posts/technical-seo-with-graphcms.json

Create a query to fetch all pages under the Pages model

The Pages model contains static pages such as About, FAQ, Services.

query Pages {
  pages {
    title
    slug
    content {
      html
    }
  }
}

Place query in a get request endpoint for pages and see the result in: http://localhost:3000/pages.json

Create a query to fetch a specifc page

query Pages {
  pages {
    title
    slug
    content {
      html
    }
  }
}

Add {"slug": "faq"} in the Query Variables field before running the query.

Place query in a get request endpoint for a page (based on slug) and see the result in URI with a slug: http://localhost:3000/pages/faq.json

Dependancies

Install the following dev dependancies:

npm i -D graphql-request graphql env-cmd daisyui @tailwindcss/typography theme-change

# or

npm install graphql-request --save-dev
npm install graphql --save-dev
npm install env-cmd --save-dev
npm install daisyui --save-dev
npm install @tailwindcss/typography --save-dev
npm install theme-change --save-dev

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

# Specify port
npm run dev -- --open --port 3333

Update the dev script in package.json to access the environment variables:

"dev": "env-cmd svelte-kit dev"

Building

Before creating a production version of your app, install an adapter for your target environment. Then:

Build

npm run build

You can preview the built app with npm run preview, regardless of whether you installed an adapter. This should not be used to serve your app in production.

Deployment

Static site deployment on Netlify without Git

Install Static site adapter:

npm i -D @sveltejs/adapter-static@next

Navigate to Sites, then drap and drop the build folder.

Preview: https://blissful-mcclintock-8a62ec.netlify.app/

Deployment on Vercel with Github

Install Vercel adapter:

# uninstall static adapter
npm un @sveltejs/adapter-static@next

# install vercel adapter
npm i -D @sveltejs/adapter-vercel@next

Install Vercel CLI

npm i -g vercel

Deploy the current directory to Vercel:

vercel

# Set defaults for the questions

Connect the Vercel project to the Github repository, such that any commits to the main branch will update on vercel.

Add the Environment variables.

Preview: https://sveltekit-graphcms.vercel.app/

Deployment on Netlify with Github

Install Static site adapter:

# uninstall vercel adapter
npm un @sveltejs/adapter-vercel@next

# install statis adapter
npm i -D @sveltejs/adapter-static@next

Update svelte.config.js:

import adapter from '@sveltejs/adapter-static'

Create a netlify.toml file

[build]
  command = "npm run build"
  publish = build/"

Push changes to github.

In Netlify, create new site from git, authenticate with Github, select the repo, check build commands, add environment variables, then deploy.