Add aliases to vite.config.ts

```js import { defineConfig } from 'vite' import react from '@vitejs/plugin-react' import path from 'path';

// https://vitejs.dev/config/ export default defineConfig({ resolve: { alias: { '@': path.resolve(__dirname, './src'), '@assets': path.resolve(__dirname, './src/assets'), '@components': path.resolve(__dirname, './src/components'), }, }, plugins: [react()] }) ```

Add aliases to tsconfig.json

```js { "compilerOptions": { // ... your other compiler options "baseUrl": ".", "paths": { "@/": ["src/"], "@components/": ["src/components/"], "@assets/": ["src/assets/"] }, }, "include": ["src"], "references": [{ "path": "./tsconfig.node.json" }] } ````

Use alias

js import image from `@assets/image.png`

```js / * .env.development VITE_API_URL=http://localhost:1337/api/blog-posts /

/ * .env.production VITE_API_URL=https://APP.herokuapp.com/api/blog-posts /

import { error, type Load } from '@sveltejs/kit';

import { VITE_API_URL } from '$env/static/private';

export const load: Load = async () => { const res = await fetch(VITE_API_URL); const { data } = await res.json();

if (res.ok) return { blogs: data }; throw error(404, 'Unable to fetch blogs'); }; ```