Rename src/routes to src/app

[Rich-Harris]

Describe the problem

Have come to the view that src/routes is suboptimal naming. It downplays the centrality of that folder, and makes you think about 'routing' even if your app has no routes (or e.g. you're brand new to web dev and are tinkering with Svelte for the first time, and don't yet even know what that word means in this context).

By contrast, src/app/index.svelte almost announces itself as the root of your app.

It has appealing aesthetic qualities as well:

• app and lib have a pleasing symmetry — both three letters, with app coming first, and lib coming later when you need it
• in the same way that $lib points to the contents of your lib folder, the $app/* imports are essentially a reification of your app. it makes sense that $app -> src/app and $lib -> src/lib
• 'app root' is nicer to say than 'root route'
• it's more compact, and we like things that are compact

Describe the proposed solution

We'd need to

• change the default option here
• update the templates
• (optionally) detect the presence of a src/routes directory and invite people to either a) change the default kit.files.app to src/routes or b) preferably move src/routes to src/app

Alternatives considered

Keeping things as they are

Importance

nice to have

Additional Information

No response

[rchrdnsh]

And an images folder, if added, could be img, and an assets folder, for audio, video, etc, could be…err…never mind 🤪

Would the app.html file still be outside the app folder? Might that be a touch confooz for some? Or would it be the case that there are both an app folder and a routes folder?

I also personally want to rename lib to library for myself because I don't personally enjoy abbreviations, but to each their own

[ZetiMente]

This is my "routes" folder and you can see that "routes" doesn't really capture the essence of the folder. So you have this random person on the internet vote.

I would also petition to change "static" to "assets" as that folder contains images, robot.txt & wasm files. Static doesn't really capture it's essence either as the .wasm files can and do change often.

[rchrdnsh]

This is my src folder structure currently:

...where content is markdown files and images are images that I want vite to process, themes are css files for theme switching that I then import into app.css, and the other stuff is as it usually is. lib being only three letters feels like the odd one out for me...but...doesn't matter :-)

Just fun to share 😁

[bluwy]

I personally still prefer routes, it's more clearer upfront that it contains the application routes. app sounds a bit vague until we explain what it contains.

[Conduitry]

I'm slightly against this. This directory doesn't contain your app - the whole src directory contains your app. If we are still looking for another name so we can avoid saying route root, that's fine, but I don't think that name should be app.

[lsabi]

To me app represents the entire app folder, while src the source code folder. I would expect something like:

• app the folder that contains the entire project
• app/src the folder that contains the source code (routes, hooks, lib, utilities)
• app/assets the folder that contains the "static" assets (some may be 3rd party libraries or be dynamically generated at build time)
• app/.env to contain ENV variables

Nevertheless, also the current folder structure is not a problem to me. It is well described in the docs, so I don't see the problem with

It downplays the centrality of that folder, and makes you think about 'routing' even if your app has no routes (or e.g. you're brand new to web dev and are tinkering with Svelte for the first time, and don't yet even know what that word means in this context).

There will always be someone who doesn't read the docs, doesn't understand the current naming folder and asks somewhere the meaning.....

[IsaacHub]

routes -> pages

static -> assets

[Conduitry]

pages would be confusing because we're already saying there are two types of routes: pages and endpoints.

[Valexr]

[Doomd]

I like app, and I also like that app.html would be the entry point to the app directory, which imo clarifies that the lib directory is for your behind-the-scenes logic, components, assets etc...and that the app directory is the front-facing structure of your...well...app.

When we think of an app's different "routes" we never think, "What routes does this app have?" No, we ask, "What does this app do?" A web app might have "pages", and a phone app might have "tabs" that "do" different things, but each of these pages and tabs ultimately comprises what we and users think not of as "routes" but as the "app."

As names have power, words have power. Words can light fires in the minds of men. Words can wring tears from the hardest hearts.” -- Patrick Rothfuss

I don't think that the names of things are childish or trivial either. SvelteKit exists, at least in part, to make turning ideas into real apps...easier and faster...for professional developers...and for novices alike. If naming directories more concisely makes SvelteKit even only a little bit more accessible...I honestly can't think of a cheaper way of making an improvement.

[Tropix126]

I feel like this could ultimately lead to more confusion. "app" terminology, at least with the Svelte SPA template describes an entire project, components included. routes on the other hand is a term specific to an app that uses a router. It's clear that the folder contains the project's routes at the moment.

Without diving too far into semantics, I think that app is too ambiguous of a term to assign to a folder that's only purpose is to store routes.

[Tropix126]

As for what $lib is, that's a whole other discussion. If you're packaging, then it's internal actions and components should be in there, but some also throw in their route-specific stores. Others straight up remove it and use a different folder, and some put in database helper.

[ghostdevv]

Throwing my hat in: routes is the perfect name. The point of file routing a website is that you have a 1:1 map between the file and the web page. Each page has a route, if you want to rename anything then maybe rename src to app but I personally am so used to src it would be a hard change but not the end of the world. I still hung up on app.html not being index.html xD

[kevmodrome]

I'm personally quite ok with routes. But if it must change, what about routes -> site? I know it's very hip to consider websites apps but for beginners I suspect apps is confusing as well.

[antony]

I quite like the idea of calling it mount since it's a directory within which all files are "mounted" upon an URL. If you don't put anything in there, nothing gets mounted on the url.

There's a bit of an overlap with regards to mounting components however.

[didier]

IMO, app is nice, but can be equally as confusing as routes, be it for different reasons. Some app logic can be in $lib, and some shared logic could be in app/routes. I think routes is fine, provided that documentation correctly describes its function and sets proper expectations.

[stephane-vanraes]

I am fine with routes as well, even for people beginning with Svelte or frontend development it's a fairly easy concept to grasp.
On top of that I think it would only cause confusion with the $app imports as mentioned in the original post

• in the same way that $lib points to the contents of your lib folder, the $app/* imports are essentially a reification of your app. it makes sense that $app -> src/app and $lib -> src/lib

This would mean I would expect to be able to do import randomfile from '$app/randomfile' as long as randomfile is a javascript inside the app directory and I am not sure that is meant to be ?

[Mlocik97]

routes sound good for me,... I would say even better, as it's meaning say exactly what it is... app doesn't give me information that files in that folder are mapped to specific path/url in browser.

I want routes to be kept as is.

[sjmueller]

Continuing with @Mlocik97, SvelteKit has routes and nextjs has pages -- both convey that there is a special convention (file-based routing) that occurs when you create files within this directory. @Rich-Harris do you feel that app conveys this convention as intuitively?

[rchrdnsh]

might be way off here, but it makes more sense in my head that the src folder would be called the app folder, as all of the stuff in the src folder is what makes up the app in total, no? I don't much care either way, however, src or app is fine by me :-)

[JezielMoura]

routes -> pages

static -> assets

I use it this way

[Jakobud]

I have an opinion on this. I have always viewed the src directory as "the source code for your application". (Yes I know there are build files, etc outside it that are important parts of the application but anyways...) So I end up with directory structures like this:

src/routes
src/styles
src/helpers
src/models
src/whatever

All of these directories are categorized items that are part of my "application". So changing routes to app seems kind of odd. So now you have a app directory inside of the directory that is the root of your "application". So if I have some sort of categorized directory of JS files or something that I want to add to my app, it would make sense to now put them in src/app/whatever. But if I kept it like I normally do it I would now have:

src/app
src/styles
src/helpers
src/models
src/whatever

Now it looks like the styles, helpers, models, etc directories are not really part of my application but are for something else. So it would be confusing especially for someone who is not familiar with the code.

I don't think routes is a bad name. And I don't think changing it simply because of a new-comers ignorance of the word "routes". If SvelteKit is moving to a point where the routes directory is containing much more than just route definitions then fine, it should be renamed appropriately. But I think simply renaming it to app is just too far-reaching and broad of a name.

[rchrdnsh]

Has anybody considered changing src to app?

then it's:

app/library
app/routes
app/styles
app/helpers
app/models
app/images
app/whatever...

Just throwing that out there XD

[Mlocik97]

for me, as it's now, it's good... renaming src to app sounds as weird as renaming routes to app... src is src, and it's defacto standard name for folder that contains main logic (source code), for project, and normally that makes app. But app is actually whole project, not just src... you execute build folder, not src, so, also src doesn't contain static assets that are part of app as well.... on other hand naming routes as app is also bad, because again, routes are not only thing that makes your app. Not only that, but folder routes contain layout, pages and endpoints (and private modules), ok, ok, it's weird to have layout inside routes folder, but it's still better as it is... or move layouts to new folder (not good idea))?

I think:

app/
 |
 +---- src/
 |       |
 |       +---- routes/
 |       +---- lib/
 |       +---- hooks.js
 +---- static/
 +---- svelte.config.js
 +---- package.json

makes biggest sense

src, static and config all makes app... src contains main logic (source code), and in it you have lib, routes, hooks... What's wrong with that?

Now look how it feel to make it renamed:

root/
 |
 +---- src/
 |       |
 |       +---- app/
 |       +---- lib/
 |       +---- hooks.js
 +---- static/
 +---- svelte.config.js
 +---- package.json

is telling me that static files, lib, hooks.js, service-worker, etc, is not part of app.
And even tho routes folder contain non routes things (layouts), it's still folder mainly for routes. So keep it as it's now.

root/
 |
 +---- app/
 |       |
 |       +---- routes/
 |       +---- lib/
 |       +---- hooks.js
 +---- static/
 +---- svelte.config.js
 +---- package.json

is telling me that static files, config, build doesn't make app.

[jchanes04]

Throwing my two cents into this discussion, I'm putting my vote on keeping it as routes. routes is a name that describes exactly what the purpose of the folder is: to define your app's routes. There are layouts and resets in there as well, but I'd argue that layouts are very closely tied to the routing structure of an app and placing them in the same place is not an issue. Named layouts do blur the lines a little, but there's still a big connection between them. I'd agree with others that renaming to app would imply that there's a degree of separation between app and lib that isn't really there.

This does bring up the wider topic of SvelteKit structure patterns, and it's interesting to see the patterns that others use. Personally, I don't put anything directly inside of src besides what's provided upon app creation; everything goes in either routes or lib. I treat importing from routes as a sort of anti-pattern, since if you have a piece of code that's used in multiple places, it should go in the place meant for shared code (lib).

[ruslanguns]

I don't like using app as a directive to point my routing, I think that routing makes completely sense to me. But for all those who think that router is controversial and that it should not be called that, either because of its symmetry or because it just sounds good, then I think it'd be a possible option to have a dynamic setting on svelte.config.js to allow people set whatever the name they want for that directory or others. This option will of course create confusion among programmers but anyone will have the flexibility to configure the project the way they want.

My final thought is, keep things as they are... I love Sveltekit as it is (I'm looking forward to version 1 being released to start my projects in production) and I think that doing things in a unique way will facilitate a community consensus and unification and reduce the learning curve for many.

[gotofritz]

If we are brainstorming new names for routes, how about engine? It clearly indicates that's where most of the magic happens, while being generic enough not to create any confusing expectations. Alternatively core seems to be used in the same way

[Mlocik97]

engine definitelly not... core describe more src than routes, and src is actually better name, so no... you have "core" functionality even in hooks.js and lib folder.

[gotofritz]

@Mlocik97 Speaking as an experienced dev, but new to SvelteKit, I found routes confusing. The fact that it contains both pages AND endpoints threw me off the wrong path. Route has a fairly well defined AND limited meaning in BE development (they just pass data to / receive it from controllers). Files in the routes folder do all sort of stuff. So I am definitively in the "we need a better name for it". You didn't say what's wrong with engine, but regardless, anything is better tnan "routes" IMHO (except for apps/, I agree with Conduitry's comment above on that front)

[stephane-vanraes]

@gotofritz routes makes the most sense, it contains after all routes to both pages and endpoints, not sure why you would call the path to an endpoint anything else.

engine would be for code that somehow drives the internals, so more what lib already does, or even more SvelteKit itself as that is the engine behind the application.

[lukaszpolowczyk]

I will add my three cents, such a flattening proposal:

root/
 |
 +---- routes/
 +---- lib/
 +---- hooks/
 +---- static/
 +---- svelte.config.js
 +---- package.json

In VSCode there is an option explorer.experimental.fileNesting.patterns to collapse those less used files, so there will be no junk in the root directory.
(The app.html file would also be in the root directory)

expanded:

[lukaszpolowczyk]

Instead of routes give the name url-pathnames/ or url-path-files/ or url-pathname-files/ or app-paths-files/.

Name taken from URL object.
No one has the right, not to know what is going on. :D

root/
 |
 +---- url-pathname-files/
 +---- lib/
 +---- hooks/
 +---- static/
 +---- svelte.config.js
 +---- package.json

Minus that the name is long.

[Mlocik97]

definitelly not... What ideas you have... this will make mess in project folder (yeah, VS Code has that option, but what other IDEs??? Some people use even gedit or nano and terminal for programming)...

writing 3 words long name for folder seems as anoying as writing createEventDispatcher() function.

[lukaszpolowczyk]

@Mlocik97 If this is spam then sorry. :D

You can consider it as an inspiration. After all, just paths/ would already be ok?
In the documentation, mention that it's from URL.pathname and everyone knows what it's about.

root/
 |
 +---- paths/
 +---- lib/
 +---- hooks/
 +---- static/
 +---- svelte.config.js
 +---- package.json

[Mlocik97]

I just think as it's now, it's ok... ofc, it's fine to give some ideas, but I think your idea of having everything in root folder is messy... we use folders exactly for purpose of organizing structure of project... now imagine you have folder for tests, build folder, .svelte-kit, some other stuff and folders and files, eslint, prettier other config files, some other scripts. And well, your root folder contain 30 or even more items... that's really not good. Hard to find what is src you write, and what are generated files or configs or kit unrelated things,... mainly as src are not in together, but it would be something like this:

root/
 |
 +---- .svelte-kit/
 +---- paths/
 +---- something_unrelated_to_kit/
 +---- lib/
 +---- tests/
 +---- build/
 +---- hooks/
 +---- something_unrelated_to_kit_2/
 +---- static/
 +---- svelte.config.js
 +---- package.json

and this is messy. you have one generated folder, under it you have something you should modify as developer (routes), under it you have unrelated stuff to kit, under it you have again src folder, under it you have tests folder... you can see how horrible it is... how it would show in IDE's file structure. Now add all ESlint config, Prettier config, TypeScript config, eh, will it fit on screen? Or would you need to scroll 2 kilometers to get to specific folder?

src/ should be definitelly as is... and it's normal that source codes that developer writes are in src folder, it's nearly standard.

paths/ sounds not better than routes/ even if it has nearly same meaning, I find routes/ more descriptive...

[lukaszpolowczyk]

I too would be bothered by that many directories at once, but I'll be honest, I also don't like the tree structure that there's a branch, and under it a branch, and under it a branch....

E.g. I have my Firefox extension that makes the Bookmarks Sidebar something as flat as possible(the contents of the Bookmarks Bar, Other Bookmarks and Bookmarks Menu are all on one level, right on top), and the indentations of the folders are shallow.

This is how my Bookmarks Sidebar looks like:

The regular Bookmarks Sidebar in Firefox looks like this:

My Bookmarks Sidebar seems more pleasant to use to me. :D

---

paths/ sounds not better than routes/ even if it has nearly same meaning, I find routes/ more descriptive...

Maybe it is. Oh, well. Do others have that opinion too?

[lukaszpolowczyk]

changing structure so your IDE shows the most nested folder 5px from left instead 15px from left is just dumb idea (sorry)...

You're very unpleasant. :/ And besides, you have no sense of harmony. :D

Here subfolders are literally displayed flat, folders have an even line with tabs (arrows are built into the folder icons).
(To put it another way: the clutter and empty white space on the left doesn't make me excited)

Well, I don't think for graphic representation in IDE, we should change structure... instead of changing structure, you should just change style/theme/or whatever you call it in your IDE...

That too, but it's its own way. In my VSCode the folders are displayed flush with the icons and there are no arrows distorting the line.

---

And I showed this to confirm that there are some people who don't like the tree structure. :D
Because maybe someone doesn't understand why I showed it.

[gotofritz]

Guys if your aim is to make the conversation go on and on in circles so that people are put off and decide to keep the status quo, it's probably working by now 😄

[lukaszpolowczyk]

@gotofritz Shhh, because it will come out. ;)

[Conduitry]

Shhh everyone.

[benmccann]

The maintainers discussed this over the weekend as part of the routing and load redesign and decided to stick with src/routes