Flesh out the FAQ content (#877)

documentation/faq/20-hmr.md

@@ -0,0 +1,5 @@
+---
+question: How do I use HMR with SvelteKit?
+---
+
+SvelteKit has HMR enabled by default powered by [svelte-hmr](https://github.com/rixo/svelte-hmr). If you saw, [Rich's presentation at the 2020 Svelte Summit](https://svelte.dev/blog/whats-the-deal-with-sveltekit) you may have seen a more powerful-looking version of HMR presented. This demo had `svelte-hmr`'s `preserveLocalState` flag on. This flag is now off by default because it may lead to unexpected behavior and edge cases. But don't worry, you are still getting HMR with SvelteKit! If you'd like to preserve local state you can use the `@hmr:keep` or `@hmr:keep-all` directives as documented on the [svelte-hmr](https://github.com/rixo/svelte-hmr) page.

documentation/faq/30-fallthrough.md

@@ -0,0 +1,5 @@
+---
+question: Why am I getting a 404?
+---
+
+Please make sure you're returning something from your page's `load` function. See the section about [fallthrough routes](../docs#routing-advanced-fallthrough-routes) for more details.

documentation/faq/40-adapters.md

@@ -0,0 +1,5 @@
+---
+question: I'm having trouble using an adapter.
+---
+
+Please make sure the version of the adapter specified in your `package.json` is `"next"`.

documentation/faq/50-aliases.md

@@ -0,0 +1,34 @@
+---
+question: How do I setup a path alias?
+---
+
+Please be aware that you will probably want the alias specified in two places.
+
+In `svelte.config.cjs` add [`vite.resolve.alias`](https://vitejs.dev/config/#resolve-alias):
+
+```
+// svelte.config.cjs
+const path = require('path');
+module.exports = {
+  kit: {
+    vite: {
+      resolve: {
+        alias: {
+          '$utils': path.resolve('./src/utils')
+        }
+      }
+    }
+  }
+};
+``
+
+In `tsconfig.json` (for TypeScript users) or `jsconfig.json` (for JavaScript users) to make VS Code aware of the alias:
+```
+{
+  "compilerOptions": {
+    "paths": {
+      "$utils/*": ["src/utils/*"]
+    }
+  }
+}
+```

documentation/faq/60-env-vars.md

@@ -0,0 +1,7 @@
+---
+question: How do I use environment variables?
+---
+
+Vite uses [dotenv](https://github.com/motdotla/dotenv) to load environment variables from a file named `.env` or similar. Only environment variables prefixed with `VITE_` are exposed. You would need to instantiate dotenv yourself if you want all environment variables exposed in `process.env['YOUR_ENV_VAR']`.
+
+Please see [the Vite documentation](https://vitejs.dev/guide/env-and-mode.html#env-files) for more info about environment variables.

documentation/faq/70-packages.md

@@ -0,0 +1,7 @@
+---
+question: How do I fix the error I'm getting trying to include a package?
+---
+
+Most of these issues come from Vite trying to deal with non-ESM libraries. You may find helpful examples in [the Vite issue tracker](https://github.com/vitejs/vite/issues). The most common solutions would be to try moving the package between `dependencies` and `devDependencies` or trying to `include` or `exclude` it in `optimizeDeps`. Packages which use `exports` instead of `module.exports` are currently failing due to a [known Vite issue](https://github.com/vitejs/vite/issues/2579). You should also consider asking the library author to distribute an ESM version of their package or even converting the source for the package entirely to ESM.
+
+You should also add any Svelte components to `ssr.noExternal`. [We hope to do this automatically in the future](https://github.com/sveltejs/kit/issues/904) by detecting the `svelte` field in a package's `package.json`.

documentation/faq/80-integrations.md

@@ -0,0 +1,15 @@
+---
+question: How do I use X with SvelteKit?
+---
+
+### How do I setup library X?
+
+Please see [sveltejs/integrations](https://github.com/sveltejs/integrations#sveltekit) for examples of using many popular libraries like Tailwind, PostCSS, Firebase, GraphQL, mdsvex, and more.
+
+### How do I setup a database?
+
+Put the code to query your database in [endpoints](../docs#routing-endpoints) - don't query the database in .svelte files. You can create a `db.js` or similar that sets up a connection immediately and makes the client accessible throughout the app as a singleton. You can execute any one-time setup code in `hooks.js` and import your database helpers into any endpoint that needs them.
+
+### How do I use Axios?
+
+You probably don't need it. We'd generally recommend you just use `fetch` instead. If you insist, you're probably better off using the ESM drop-in replacement `redaxios` [until axios utilizes ESM](https://github.com/axios/axios/issues/1879). Finally, if you still want to use Axios itself, try putting it in `optimizeDeps.include`.