# SvelteKit

## install

<code>
npm init svelte@next project-name
</code>

package.json 수정

<code>
svelte": "3.40.1"
</code>

<code>
npx svelte-add@latest postcss
</code>
https://github.com/svelte-add/postcss

<code>
npx svelte-add@latest tailwindcss
</code>
https://github.com/svelte-add/tailwindcss



## Error

Work around is to explicitly use svelte version 3.40.1, "svelte": "3.40.1" in package.json

<code>
svelte": "3.40.1"
</code>

---



[[tailwind]]


- https://github.com/sveltejs/kit
- https://kit.svelte.dev/docs
- https://github.com/dansvel/sveltekit-typescript-postcss-tailwind2/blob/master/svelte.config.cjs


## 프로젝트 생성

<code bash>
# create the project
mkdir my-app
cd my-app
npm init svelte@next

# install dependencies
npm install

# start dev server and open a browser tab
npm run dev -- --open
</code>


## netlify


<code>
npm i @sveltejs/adapter-netlify -D
</code>

package.json
<code>
{
	"name": "brandit-admin-sveltekit",
	"version": "0.0.1",
	"scripts": {
		"dev": "svelte-kit dev",
		"build": "svelte-kit build",
		"start": "svelte-kit start"
	},
	"devDependencies": {
		"@sveltejs/adapter-netlify": "next",
		"@sveltejs/adapter-node": "next",
		"@sveltejs/kit": "next",
		"sass": "^1.0.0",
		"svelte": "^3.29.0",
		"svelte-preprocess": "^4.0.0",
		"vite": "^2.1.0"
	},
	"type": "module",
	"engines": {
		"node": ">= 12.17.0"
	},
	"dependencies": {
		"node-fetch": "^2.6.1"
	}
}
</code>


svelte.config.cjs
<code>
const sveltePreprocess = require("svelte-preprocess");
const node = require("@sveltejs/adapter-node");
const static = require("@sveltejs/adapter-static");
const netlify = require("@sveltejs/adapter-netlify");
const pkg = require("./package.json");

/** @type {import('@sveltejs/kit').Config} */
module.exports = {
  // Consult https://github.com/sveltejs/svelte-preprocess
  // for more information about preprocessors
  preprocess: sveltePreprocess(),
  kit: {
    // By default, `npm run build` will create a standard Node app.
    // You can create optimized builds for different platforms by
    // specifying a different adapter
    // adapter: node(),
    adapter: netlify(),

    // hydrate the <div id="svelte"> element in src/app.html
    target: "#svelte",

    vite: {
      ssr: {
        noExternal: Object.keys(pkg.dependencies || {}),
      },
    },
  },
};
</code>

netlify.toml
<code>
[build]
  command = "npm run build"
  publish = "build"
  functions = "functions"
</code>

## Links

- https://github.com/jasongitmail/svelte-vs-next