I ask because I use Google cloud and I know the svelte website is hosted there.

https://github.com/sveltejs/svelte/tree/master/site

Hi, I have just a question about the source: in the api, we need a token right?
https://github.com/sveltejs/realworld/blob/master/src/node_modules/api.js#L36

And here, there are no one token
https://github.com/sveltejs/realworld/blob/master/src/routes/auth/register.js#L6

So my question is: where is the token and how use it?

Is not authorizing for me, my express backend is set up with session cookie. Or this only works with token base authorization only?

Hello,

When I clone the last version and I go to the profile page it gives an error

500
Unexpected token T in JSON at position 0
SyntaxError: Unexpected token T in JSON at position 0

Index.json.js

import * as api from '$lib/api.js';

export async function get({ params, context }) {
	const { profile } = await api.get(`profiles/${params.user}`, context.user && context.user.token);

	return {
		body: profile
	};
}

context must be locals

I'll add a PR shortly for this.

The realworld in current state is facing problem described in sveltejs/kit#1076.
After updating adapter-netlify to 1.0.0-next.7 using pnpm update everything works fine.

Update:
I think matt3224 has a pull request that will fix some of the issues described below.

Hi,

When trying the Demo at https://svelte-realworld.now.sh I noticed that the Editor is not working.

The route is: https://svelte-realworld.now.sh/editor

Same happens when navigating to profile:
https://svelte-realworld.now.sh/@Razvan%20Predescu

Here is a screenshot:

Best!
Razvan

Downloaded the master of realworld sveltejs and ran npm install in VSCode.

Running npm run dev - If I am NOT signed in and hit the url \settings I get redirected to the login screen 👍

I export out npx sapper export --legacy
I run npx serve sapper/export

• If I am NOT signed in and hit the url \settings I get a 404 instead of being redirected to the login page 👎

I tried npx sapper export --legacy --entry '/ settings'
but still the same 404 error :(

I noticed realworld.svelte.dev does redirected to the login page when hitting \settings and not logged in....

What am I doing wrong with the sapper export / how can I fix this problem so it redirects to the login page?
Do special build instruction need to be included in this project?

Thank you

Attached is console output

console-output.txt

Checked the RealWorld app and found this person posting quite a lot of junk while also having an adult profile pic. Since I ❤️ Svelte and Sapper I am just sending you a heads-up about this. It is just a pity to see this kind of content, but hey, people will be people, I'd get rid of that content and the 2 tags SIDA and HIT.., thank you.

Quick question about 'locals' in your endpoints:
where are these set? Or are they more of a placeholder for any individual session? Could not seem to find any info about this… thanks!

Hello,

When I clone the last version.
I login,
I go to the settings page,
I try to save settings,
It gives an error : 401 Unauthorized

save.js

export async function post({ body: user, locals }) {
       console.log(locals) // returns {}
	
       if (!locals.user) {
		return {
			status: 401
		};
	}

	const { token } = locals.user;
	const body = await api.put(
		'user',
		{
			user // TODO individual properties
		},
		token
	);

	return respond(body);
}

This is currently broken

Hi there

I apologise if i'm missing something really obvious.

I see utils.js and api.js import in many of the *.svelt files. I understand the the purpose they would serve but for the life of me can't understand how I can't find them.

I have encountered ond possible issue with the svelte implementation of the Conduit app. After logging in with user brico, then logging out through setting pagei:

• The https://svelte-realworld.now.sh/@bricoi and https://svelte-realworld.now.sh/editor links return a 404.
  -Settings and Home page display the pages as if I would still be logged in.

Could also be a caching problem on my computer?

Hey all, I've started a video series to support this project, showing how to debug it in conjunction with the google cloud backend.

https://www.youtube.com/watch?v=foQLf5BBF2Q

let me know if you want me to cover any aspect of the svelte side.

Loading articles once you've already navigated to the page feels bad. It should be done in preload. That way we can also prefetch on hover, etc

Might now match the RealWorld spec exactly but I think page number should be in the URL, and navigating should scroll you back up to the top of the page

I think it would be nice to update this repo to the latest version of Sapper.

At the same time, showing examples of some of the following would be nice:

• SASS preprocessing in file
• Would be nice to also have examples of how SASS preprocessing with external files would be done. Basically integrating it with the hot module reloader
• I usually use linters for my JS, HTML and SCSS code. Considering all of these are within one file, how would one achieve this?

Currently, there is no UI to tell the user if the email they are submitting already exists, or allows them to save with the existing one inside a strict no change if the same (depending on the backend.)

As it stands if you click settings the email field is already populated and sent with a save. This will throw an error if I use the https://github.com/gothinkster/gcp-datastore-cloud-functions-realworld-example-app backend due to this code:

  async update(aCurrentUser, aUserMutation) {
    const userKey = ds.key({ namespace, path: ['User', aCurrentUser.username] });
    const user = (await ds.get(userKey))[0];
    if (!user) {
      throw new Error(`User not found: [${aCurrentUser.username}]`);
    }

    // Make requested mutations
    if (aUserMutation.email) {
      await verifyEmailIsNotTaken(aUserMutation.email);
      user.email = aUserMutation.email;
    }

IMOP the api spec should be PATCH, not PUT because that is what it is. See gothinkster/realworld#417

I'm using buildah and podman which are (in theory) compliant with the docker system.

I run the following two commands for building and running the container from the dockerfile

buildah bud -t test .
podman run -p 3000:3000 test

and I get
`internal/modules/cjs/loader.js:628
throw err;
^

Error: Cannot find module '/app/sapper/build'
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:625:15)
at Function.Module._load (internal/modules/cjs/loader.js:527:27)
at Function.Module.runMain (internal/modules/cjs/loader.js:839:10)
at internal/main/run_main_module.js:17:11 {
code: 'MODULE_NOT_FOUND',
requireStack: []
}`

Am I doing something wrong or is there some problem?

Thanks

I would like your opinion on this.

Basically this version (SvelteKit) fetches all data through own server.
Previous version (Svelte) was fetching directly from productionready.io
api server on client side.

Actual situation creates two round trips - one to sveltekit server
and the other from server to productionready.io api.

I think that correct way is to fetch directly from api
when on client.

Want me to add Prettier to this project?

Why do we pass the JWT token to the client given that it is saved in the express-session? Maybe we could pass the sessionid to the client instead, and then do a comparison on that, and if it matches then proceed to use the token thats stored in express?

Passing to the client: (user contains the token) https://github.com/sveltejs/realworld/blob/master/src/routes/auth/register.js#L8

When we actually consume the token from the /auth folder we retrieve it from the express session, not the client:

https://github.com/sveltejs/realworld/blob/master/src/routes/auth/save.js#L6

maybe I'm missing something

When I clone the repo and run it locally, I cannot create a new article. On the create article form, clicking on the "Publish Article" button disables the button and the form hangs. Developer tools says POST | http://localhost:3000/article.json was sent with the following response:

404

Not found: /article.json

Error: Not found: /article.json

Is something required in src/routes/article/index.json.js to send the form data to conduit.productionready.io?

I think we could use https://github.com/testing-library/svelte-testing-library

Testing lib can also be used to write cypress tests.

I'll put this on my todo.

Normally I expect all the src files to show in chrome, but in this project I only see the minified ones:

I was expecting something like this

Could it be a ROLLUP thing? I've only used webpack in my time.

Please update the repo to showcase sapper 0.26 and svelte 3.

Seems to be a problem with listr-verbose-rendere, but that npm has 1 version.
So.... no sure where to go with this.

[vagrant@localhost realworld-sveltejs]$ npm install
npm WARN [email protected] No repository field.
npm WARN [email protected] No license field.

npm ERR! code ENOENT
npm ERR! syscall open
npm ERR! path /opt/nodejs/realworld-sveltejs/node_modules/listr-verbose-renderer/node_modules/ansi-styles/package.json.3491745777
npm ERR! errno -2
npm ERR! enoent ENOENT: no such file or directory, open '/opt/nodejs/realworld-sveltejs/node_modules/listr-verbose-renderer/node_modules/ansi-styles/package.json.3491745777'
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent

Navigating to an article shows it. Let's take as example https://realworld.svelte.dev/article/dsf-hc9q8m.

Then, pressing F5 to refresh the page, refreshes it and the post remains. When I do the same on a web app I create for trial, the variable article is undefined.

The issue raises from the fact that the file https://github.com/sveltejs/realworld/blob/master/src/routes/article/%5Bslug%5D.svelte contains a preload with (almost) the same code as the one I have (I changed the names and the link), but in my web app it seems to not work.

Is it a problem of my project or the demo is running on a different codebase from the one in the repo?

Thanks.

Does Sapper realworld app is expecting a jwt-token or cookie from the actual server?

I opened this issue gothinkster/realworld#419 but would like to think about the best Svelte way to implement this on the front end. Since the backend would need an

• extra API for storing the change password email link details
• and changing the password with email link verification

this isn't something that would happen soon officially on Real-World, but I do want to implement it on my own Svelte apps.

So here are my thoughts.

• A route called /changepassword which contains an email input. Once it is submitted the same page tells the user to check their email and click on a link. The user can then exit this screen.
• Once the user has the email it takes them to another route, say /resetpassword where the user is given a from with a password input and submit. The form is only activated if the data (PAD password authorisation data) in the link given in the email matches certain data in the backend and the password is only changed if the new password along with the PAD in a separate new request.

Thoughts?

I might go ahead and implement this on my fork with a back backend for this if someone is interested.

Since the version specified in package.json for sveltekit is "next", It is fetching the latest version of sveltekit which is throwing a lot of errors like

svelte.config.cjs should be renamed to svelte.config.js and converted to an ES module.

Either package.json needs to be updated to use the exact version or the project needs to be updated to conform to the new standards.

I was hoping to see a "real world" example of both busy indicators (on e.g. form submit) and error handling. It seems this project has placeholders for errors -- never populated -- and no accommodation for any progress/busy indicator. It'd be great to see an actual, complex, example.

Hi,

i´m new in svelte and also in JS !!!
I know a feature is that svelte load data in background if user hover over a link.
Thats really fast if there is a user CLICK that link. But:
If i hover over link/article one = request article one,
Hover over link/article two = request article two.
Back to hover over link one = request again article on
and so on, so on, so on.

Can we store the data and compare it with the next hover before fire an request?
Hope you understand me and my bad english :P
Is this a bad solution? Is there a better way?

Thanks for help.

How would I pass the logged in user's token on an api get request?
For example if I wanted to call a list of projects from an api that requires the users token in the opt.headers.

file: /src/routes/projects/index.svelte

    onMount(async () => {
        inProgress = true;
        const response = await post(`projects/getProjects`);
        console.log("Response:", response);
	inProgress = false;
    });

file: src/routes/projects/getProjects.js

import * as api from 'api.js';

export function post(req, res) {
        console.log(req.session.user.token)
	api.get('projects', req.session.user.token).then(response => {
             console.log(response)
	});
}

In the above req.session.user.token is undefined. How can I access the token variable?
I tried to follow info from #33 @quantuminformation but I am not sure how the token gets stored and how to access it?

The demo throws a 404 error when clicking on a user's name. Other implementations go to a user history screen.

Pulled from the latest master, did a clean npm install, while running the app I get many errors like:

'api.js' is imported by src/routes/index.svelte, but could not be resolved – treating it as an external dependency

And then at the end:

module.js:538
    throw err;
    ^

Error: Cannot find module 'api.js'
    at Function.Module._resolveFilename (module.js:536:15)
    at Function.Module._load (module.js:466:25)
    at Module.require (module.js:579:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (/Users/mav/Documents/flyps/realworld/__sapper__/dev/server/server.js:13:11)
    at Module._compile (module.js:635:30)
    at Object.Module._extensions..js (module.js:646:10)
    at Module.load (module.js:554:32)
    at tryModuleLoad (module.js:497:12)
    at Function.Module._load (module.js:489:3)
> Server crashed

I am getting polling requests to the articles, I'm not sure if this is by design.

There is no network traffic over the browser, so I assume is something else, maybe a service worker.

The requests always are to /articles?limit=10&offset=NaN

I like to be able to track every request that goes over my network.

The article body isn't correctly sanitized, example: https://realworld.svelte.dev/article/i-dd-dk6idd

STR:
open https://svelte-realworld.now.sh/

Expected result:
realworld demo

Actual result:

Payment required
402: PAYMENT_REQUIRED
Code: DEPLOYMENT_BLOCKED
ID: hel1:btzdj-1572787891660-b7f654fe2dd2

If you are a visitor, contact the website owner or try again later.

How would I go about adding SASS Preprocessing support to this application?

I have a SO post about it: https://stackoverflow.com/questions/49266016/sapper-svelte-sass-preprocessing

I am running the master branch.
There appears to be an issue with the Svelte-loader node_module.

compiler.hooks.watchRun.tapAsync('VirtualModulesPlugin', (watcher, callback) => { // compiler.hooks is undefined
		this._watcher = watcher.compiler || watcher;
		callback();
	});

Getting the following error in the console:

(node:81352) UnhandledPromiseRejectionWarning: ./routes/index.html
Module build failed: TypeError: Cannot read property 'watchRun' of undefined
    at new VirtualModulesPlugin (/Users/.../node_modules/svelte-loader/lib/virtual.js:35:17)
    at Object.module.exports (/Users/.../node_modules/svelte-loader/index.js:83:46)
 @ ./.sapper/server-entry.js 1:0-111
(node:81352) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 4)

Need resolution on this. Has anybody else run in the same issue? how do I resolve this?

Hello everyone!

How can I convert from Sapper to Rollup?

Firing up this project with sapper dev and then opening the page creates a session. However, on each page refresh a new session file is created:

Also keeps the app logged out most of the time

Describe the bug
At first pnpm -r build in the root of kit repo fails,
then also examples/realworld.svelte.dev sign up fails with 404 http error in the browser: Not found: /register :

404
Not found: /register

Error: Not found: /register
    at Renderer._get_navigation_result (http://localhost:3000/.svelte/dev/runtime/internal/start.js:560:11)
    at async Renderer.update (http://localhost:3000/.svelte/dev/runtime/internal/start.js:457:29)
    at async Router._navigate (http://localhost:3000/.svelte/dev/runtime/internal/start.js:248:3)

Logs

...
│ import pkg from 'cookie';
│ const {parse: parse$1} = pkg;
│ file:///home/lsoave/SVELTE/kit/examples/realworld.svelte.dev/.svelte/output/server/app.js:8
│ import {parse as parse$1} from "cookie";
│         ^^^^^
│ SyntaxError: The requested module 'cookie' is expected to be of type CommonJS, which does not support named exports. CommonJS modules can 
│ For example:
│ import pkg from 'cookie';
│ const {parse: parse$1} = pkg;
│     at ModuleJob._instantiate (internal/modules/esm/module_job.js:97:21)
│     at async ModuleJob.run (internal/modules/esm/module_job.js:143:20)
│     at async Loader.import (internal/modules/esm/loader.js:182:24)
│     at async prerender (file:///home/lsoave/SVELTE/kit/packages/kit/dist/chunks/index6.js:513:14)
│     at async AdapterUtils.prerender (file:///home/lsoave/SVELTE/kit/packages/kit/dist/chunks/index6.js:745:4)
│     at async adapt (/home/lsoave/SVELTE/kit/packages/adapter-node/index.cjs:26:4)
│     at async adapt (file:///home/lsoave/SVELTE/kit/packages/kit/dist/chunks/index6.js:767:2)
│     at async file:///home/lsoave/SVELTE/kit/packages/kit/dist/cli.js:633:5
└─ Failed in 12.4s
...
/home/lsoave/SVELTE/kit/examples/realworld.svelte.dev:
 ERROR  [email protected] build: `svelte-kit build`
Exit status 1
...

To Reproduce

my shell command history here:

 1959  git clone https://github.com/sveltejs/kit.git
 1960  cd kit
 1961  pnpm i
 1962  pnpm -r build
 1963  cd examples/realworld.svelte.dev/
 1967  pnpm dev

Expected behavior
Having a working sign up

Stacktraces

Information about your SvelteKit Installation:

In the root of the repo:

lsoave@basenode:~/SVELTE/kit$ cat package.json

{
	"name": "kit",
	"version": "0.0.1",
	"description": "",
	"main": "index.js",
	"scripts": {
		"build": "pnpm build --filter=\"@sveltejs/*\" --filter=\"create-svelte\"",
		"test": "pnpm -r test --workspace-concurrency=1",
		"check": "pnpm -r check",
		"lint": "pnpm -r lint",
		"format": "pnpm -r format",
		"release": "pnpm publish --tag=next --filter=\"@sveltejs/*\" --filter=\"create-svelte\""
	},
	"repository": {
		"type": "git",
		"url": "git+https://github.com/sveltejs/kit.git"
	},
	"author": "",
	"license": "MIT",
	"bugs": {
		"url": "https://github.com/sveltejs/kit/issues"
	},
	"homepage": "https://github.com/sveltejs/kit#readme",
	"devDependencies": {
		"@changesets/cli": "^2.15.0",
		"@rollup/plugin-commonjs": "^17.1.0",
		"@rollup/plugin-json": "^4.1.0",
		"@rollup/plugin-node-resolve": "^11.2.1",
		"@sveltejs/eslint-config": "github:sveltejs/eslint-config#v5.6.0",
		"@typescript-eslint/eslint-plugin": "^4.21.0",
		"@typescript-eslint/parser": "^4.21.0",
		"eslint": "^7.23.0",
		"eslint-plugin-import": "^2.22.1",
		"eslint-plugin-svelte3": "^3.1.2",
		"playwright-chromium": "^1.10.0",
		"prettier": "2.2.1",
		"rollup": "^2.44.0",
		"typescript": "^4.2.3"
	},
	"type": "module"
}

Adapter

@sveltejs/adapter-node

In the exaple app:

lsoave@basenode:~/SVELTE/kit/examples/realworld.svelte.dev$ cat package.json 
{
	"name": "realworld.svelte.dev",
	"version": "1.0.1-next.0",
	"private": true,
	"type": "module",
	"scripts": {
		"dev": "svelte-kit dev",
		"build": "svelte-kit build",
		"start": "svelte-kit start"
	},
	"devDependencies": {
		"@sveltejs/adapter-node": "workspace:*",
		"@sveltejs/kit": "workspace:*",
		"marked": "^2.0.1",
		"svelte": "^3.37.0"
	},
	"dependencies": {
		"cookie": "^0.4.1",
		"node-fetch": "^2.6.1"
	}
}

Severity
Medium

Additional context

I tried pnpm update both in the repo's root and in the example and then to rebuild with pnpm -r build in the root, but same error.

I noticed that this code does not prevent sessions to be lost after a page refresh. Should it work that way?

This would make it easier for beginners who want to use Svelte(kit) alongside typescript and need a starting point for all the necessary type declarations. I've tried to add some, but gave up at some point.

It is a selling point for svelte if you see the realworld example and can already get an idea how to use it.

We all know Svelte <3 TypeScript.

I think this would especially please @orta

E.g. go to https://realworld.svelte.dev/thisurldoesnotexist and it displays the homepage with 200 status code

A better implementation would be something like https://vue-vuex-realworld.netlify.app/thisurldoesnotexist

I think what's happening is routes/[p].svelte is picking up this route. This is only meant to be used for paging though, so we should return 404 if it's an invalid page (e.g. not a number). Right now it just ends up serving the homepage backed by the API call https://conduit.productionready.io/api/articles?limit=10&offset=NaN (offset=NaN is a bug).

I haven't used Svelte and Sapper enough to know the preferred way to do this yet.

Do we add validation in https://github.com/sveltejs/realworld/blob/master/src/routes/_components/ArticleList/index.svelte and redirect to an error page? Or do we do it up-front in https://github.com/sveltejs/realworld/blob/master/src/routes/index.svelte?

The netlify-adapter produces build in ".netlify" directory in project's root directory. This path should be added in .gitignore.