Ynex/
├── src/
| ├── assets/
| ├── css/
| ├── icon-fonts/
| └──scss/
| ├── lib/
| ├── @spk/
| ├── components/
| ├── data/
| ├── utility/
| ├── view/
| └── index.js
| ├── routes/
| ├── (auth)/
| ├── (common-layout)/
| ├── (landing-layout)/
| └── +page.svelte
| ├── app.d.ts
| ├── app.html
| ├── app.scss
| └── basepath.js
├── static/
| ├── images/
| └── video/
├── .gitignore
├── .npmrc
├── favicon.ico
├── jsconfig.json
├── package-lock.json
├── package.json
├── postbuild.js
├── README.md
├── svelte.config.js
└── vite.config.js
Ynex - Svelte Admin Dashboard Template / : Root template folder contain
all svelte component(Structure page), css, scss, images
and other files.
src/ : This is the heart of your project and contains various
subdirectories and files.
assets/ : Folder contain all the Ynex Template assets
which has css, scss, and icons.
libs/: The libs folder contains reusable code for your
project, organized into subfolders like components (like header,
sidebar, switcher, and footer,), data, and utilities (helper
functions
for tasks like validation or formatting). This structure helps keep
the
code organized, reduces repetition, and makes the project easier to
maintain.
routes/ :
"This folder is crucial for routing in Svelte for defining the
different
pages or views in your application. Each page is represented by a
.svelte file, such as +page.svelte. These .svelte files contain the
components, logic, and styles specific to that page."
app.d.ts/: app.d.ts is used to add type information for
some special SvelteKit objects.
app.html/ : This file serves as the entry point of your
application. It’s where the main structure of your web page is
defined.
app.scss :This file contains global styles written in
SCSS.
SCSS allows you to write more maintainable CSS using variables,
nesting,
and other advanced features. You would typically import this file
into
the root component (App.svelte) to apply the styles globally across
the
app.
basePath.js : This utility will be used to access the
base
path dynamically.
static/ : This directory is used for storing static assets,
such as
images, fonts, or any files that don’t need processing by your application.
These assets can be directly referenced in your Svelte components.
.
.npmrc : It gives you more control over npm's behavior when
working
with dependencies in a project.
package.json : npm configuration listing the third
party packages your project uses.
You can also add your own custom scripts
here.
postbuild.json : This file copies assets from the source
directory to the build directory and updates the .htaccess file to enable
proper routing for a Single Page Application (SPA) by redirecting requests
to index.html
svelte.config.js : In this SvelteKit configuration, the base
path is mandatory for correctly resolving asset paths, especially when
deploying the app to a subdirectory. It uses the
@sveltejs/adapter-static for static site generation, with
index.html as a fallback for dynamic routes and custom warning suppression.
vite.config.js : This Vite configuration integrates SvelteKit,
customizes the build process, and handles SSR dependencies. It sets the
__BASE_PATH__ for the base URL and adjusts the chunk size warning limit for
larger builds.