20 Matching Annotations
  1. Nov 2023
  2. Aug 2023
    1. 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`

    1. ```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'); }; ```

  3. Apr 2023
  4. Mar 2023
  5. Feb 2023
  6. Nov 2022
  7. May 2022
  8. May 2021
    1. How do I setup a path alias? permalink First, you need to add it to the Vite configuration. In svelte.config.js add vite.resolve.alias: // svelte.config.js import path from 'path'; export default { kit: { vite: { resolve: { alias: { $utils: path.resolve('./src/utils') } } } } }; Then, to make TypeScript aware of the alias, add it to tsconfig.json (for TypeScript users) or jsconfig.json: { "compilerOptions": { "paths": { "$utils/*": ["src/utils/*"] } } }
    2. How do I hash asset file names for caching? permalink You can have Vite process your assets by importing them as shown below: <script> import imageSrc from '$lib/assets/image.png'; </script> <img src="{imageSrc}" />