Contact Us

If you still have questions or prefer to get help directly from an agent, please submit a request.
We’ll get back to you as soon as possible.

Please fill out the contact form below and we will reply as soon as possible.

  • Ota yhteyttä
Finnish
FI Finnish
US English (US)
  • Koti
  • Partnerit

AI Commercen Svelte-storefrontin rakenne

Ohje AI Commercen frontendin kansiorakenteesta ja dev dependencies -paketeista. Opi kehittämään ja hallinnoimaan käyttöliittymää tehokkaasti.

Written by Petro Mäntylä

Updated at August 18th, 2026

Contact Us

If you still have questions or prefer to get help directly from an agent, please submit a request.
We’ll get back to you as soon as possible.

Please fill out the contact form below and we will reply as soon as possible.

  • AI Commerce Cloud
    Hallinnan etusivu Asiakkuudet Tilaukset Tilausten hallinta Kategoriat Tarjoustyökalu Tuotteet Konfiguraatiot Moduulit Paikallisasetukset ja verot Arvostelut Etusivu FAQ -työkalu Kuvagalleria Työkalut Kassa Lisätoiminnot Svelte Raportit
  • Akeneo
  • WordPress
  • Builder.io
  • Algolia
  • Google
  • Meta
  • Tuki
  • Tehden
  • Partnerit
    Miksi valita AI Commerce?
  • Microsoft
  • Integraatiot
  • Enrerprise Solutions
  • Yleiset sopimusehdot
  • Agentic Commerce
+ Lisää

Sisällysluettelo

Frontendin tiedostorakenne ja keskeiset hakemistot Dev-dependencies ja niiden tarkoitus .env.local Linterit ja muut konfiguraatiot Kieliversioiden hallinta S3Fallback ja reitityksen varmuusratkaisut Yhteenveto

Verkkokaupan frontend on oma Svelte- ja Vite-sovelluksensa

AI Commercen julkinen storefront elää aicc-svelte-repositoriossa. Se omistaa Svelte/Vite-käyttöliittymän, SSR Lambdan, client-hydraation, storefront-komponentit, tenant-haarat ja julkaisuskriptit. Se ei omista MVC-kauppalogiikkaa, hallintasovelluksia, AgentCore-runtimea tai infrastruktuurin määrittelyä.

Jaettu käyttäytyminen ja uudelleenkäytettävä rakenne kuuluvat main-haaraan. Tenant-haara omistaa vain todennetun tenant-kohtaisen esityksen, konfiguraation tai komponentin. main-muutokset eivät siirry tenantteihin automaattisesti: ne viedään erillisellä deploy/merge.sh-kierroksella, minkä jälkeen haarat tarkistetaan, pusketaan ja julkaistaan sovitussa järjestyksessä.

Kehitysympäristö käyttää Node.js 22.x- ja npm 10.x -versioita. npm run dev käynnistää paikallisen kehityksen. Ennen muutosta luetaan AGENTS.md, contracts/README.md ja tehtävää koskeva sopimus. Kanoninen validointi on npm run lint && npm test && npm run build.

Juurihakemistot erottavat lähdekoodin, tuotokset ja sopimukset

aicc-svelte-repositorion assets/ sisältää juureen toimitettavat staattiset tiedostot, kuten robots.txt- ja favicon-aineiston. Indeksointiasetus tarkistetaan ennen tuotantoa, eikä kehitysympäristön noindex-rajausta saa jättää julkaistuun robots-tiedostoon. dist/ on generoitu build-tulos: dist/client/ sisältää client-aineiston ja dist/server/ SSR Lambdan nipun. Näitä ei käsitellä lähdekoodin auktoriteettina.

src/ sisältää sovelluskoodin, tests/ testit ja saavutettavuuskattavuuden, contracts/ storefrontin käyttäytymis- ja omistussopimukset, maps/ generoituja ja ylläpidettyjä reittikarttoja, utils/ build- ja reittigeneraattorit sekä deploy/ tenant-kierrosten skriptit. node_modules/ muodostuu package-lock.json-lukituksesta eikä sitä muokata käsin.

Juuritason package.json määrittää komennot ja riippuvuudet. vite.config.dev.js, vite.config.client.js ja vite.config.server.js erottavat paikallisen, client- ja server-buildin. serverless.yml määrittää Node.js 22 -SSR Lambdan, /rest/*-reitit ja S3-uudelleenohjausten lukuoikeuden. eslint.config.js, svelte.config.js, jsconfig.json ja vitest.config.js omistavat kehitys- ja tarkistusasetukset.

src-hakemisto jakaa runtime-vastuut

src/app/ sisältää ydintoimintoja, kuten reitittimen, navigaation, evästeet, otsakkeet, CSP:n, uudelleenohjaukset ja runtime-tilan. src/ext/ sisältää integroitujen ulkoisten palvelujen sovittimia, esimerkiksi chat- ja Builder.io-koodia. src/lib/ sisältää jaettuja storefront-apureita ja configuration.js-tiedoston; siinä ovat esimerkiksi kuvakoot, sivutusrajat ja logoRatio.

src/modals/ ja src/popups/ sisältävät käyttöliittymän uudelleenkäytettäviä modaali- ja popup-rakenteita. src/pages/ sisältää sivut. Staattinen sivu käyttää esimerkiksi +Page.svelte-tiedostoa ja dynaaminen sivu [slug]-hakemistoa, kuten src/pages/product/[slug]/. Sivukohtainen +onBeforeRender.js voi valmistella SSR-datan.

src/renderer/ sisältää yhteisen App.svelte-kuoren sekä +onBeforeRender.js, +onRenderHtml.js ja +onRenderClient.js -vaiheet. src/ssr/ sisältää Lambda-entryn, SSR-ytimen, HTTP keep-aliven ja staattisen virhevastauksen. src/styles/ sisältää global.css, dynamic.css, common.css ja relations.css; komponenttikohtainen tyyli pidetään silti komponentissa, kun tyyli ei ole aidosti globaali.

Partnerin REST-palvelut rajataan services-hakemistoon

Partnerin REST-palvelun rajattu laajennuspinta on src/rest/services/; muu src/rest/ sisältää /rest/*-rajapinnan ydinreitittimen, GraphQL-kuljetuksen ja sallitun julkisen GraphQL-pinnan. Nämä runkotiedostot ovat AI Commercen omistamia. JS-tiedoston polku palveluhakemistossa vastaa REST-URL:ia.

Reititin hyväksyy vain JSON-sarjallistettavan vastauksen ja palauttaa tuntemattomasta reitistä 404:n, puuttuvasta HTTP-metodista 405:n ja palveluvirheestä 500:n. POST-vastaukselta vaaditaan lisäksi success: true. Partneripalvelu käyttää turvallista serveripuolen GraphQL-asiakasta eikä lähetä tenant-tunnuksia selaimeen.

Serveripuolen kuljetus lukee TENANT, AICC_TENANT_SECRET ja AICC_GRAPHQL_SECRET -arvot process.env-ympäristöstä. Niitä ei saa nimetä VITE_-etuliitteellä. GraphQL-pyynnöllä on 8000 millisekunnin aikakatkaisu, ja upstreamin HTTP-, JSON-, GraphQL- ja timeout-virheet muutetaan rajatuiksi REST-virheiksi.

.env.local palvelee paikallista ympäristöä

Paikalliset ympäristöarvot pidetään repoon kuulumattomassa .env.local-tiedostossa. VITE_BACKEND_HOST määrittää paikallisen backend-hostin, VITE_DEV_IMAGE_URL kehityksen kuvapalvelimen, VITE_LANGUAGE_CODE reittikartan kielen ja VITE_LOCALE locale-arvon. VITE_CACHE_KEY voidaan lisätä kehityspyynnön otsakkeeseen välimuistin tarkistusta varten.

Kaikki VITE_-alkuiset arvot on käsiteltävä selaimelle näkyvinä. Älä tallenna niihin salasanoja, tenant-salaisuuksia, GraphQL-salaisuutta tai muuta arkaluontoista dataa. Storefrontin /rest/*-kuljetuksen salaisuudet ovat serveriympäristön muuttujia ilman VITE_-etuliitettä.

Kielitieto tulee ensisijaisesti pyynnön X-Forwarded-Language-otsakkeesta ja muuten määritetystä VITE_LANGUAGE_CODE-arvosta. Runtime ei saa piilottaa puuttuvaa kielikonfiguraatiota kovakoodatulla suomen oletuksella. Kuvien paikallinen proxy käyttää VITE_DEV_IMAGE_URL-arvoa ja API-proxy VITE_BACKEND_HOST-arvoa.

package.json ja package-lock.json omistavat riippuvuudet

Storefrontin riippuvuuksien tarkat versiot tarkistetaan aina package.json- ja package-lock.json-tiedostoista. Nykyisiä keskeisiä devDependencies-paketteja ovat @sveltejs/vite-plugin-svelte 3.1.2, cross-env 7.0.3, dotenv 16.5.0, eslint ^9.29.0, eslint-plugin-svelte ^2.46.1, serverless-prune-plugin ^2.1.0, svelte 4.2.20, svelte-preprocess ^6.0.3, vite ^5.4.21, vite-plugin-compression ^0.5.1 ja vite-plugin-dynamic-import ^1.6.0.

Testi- ja laatutyökaluina ovat lisäksi esimerkiksi vitest ^3.2.6, svelte-check ^4.4.6, prettier ^3.6.2, @testing-library/svelte ^5.3.1, jest-axe ^10.0.0 ja axe-core ^4.10.3. serverless on lukittu versioon 4.33.3. Ainoa varsinainen dependencies-osion paketti on tällä hetkellä @builder.io/sdk-svelte ^5.2.0.

package.json, serverless.yml, ydinhakemistot ja konfiguraatiot ovat CODEOWNERS-suojattuja. Partneri ei lisää tai päivitä riippuvuutta omin päin. Hyväksytyn tenant-kohtaisen riippuvuuden yhteydessä package-lock.json generoidaan kyseisellä haaralla npm install -komennolla; lukitusta ei kopioida toiselta haaralta sokkona.

Reittikartat muodostuvat sivurakenteesta ja kielidatasta

utils/routeMapGenerator.js lukee src/pages/-hakemistosta +Page.svelte-sivut ja kirjoittaa maps/routeMap.js-kartan. Dynaaminen hakemisto, kuten [slug], säilyy reittikuvauksessa. Build muodostaa lisäksi plus-tiedostojen ja reittichunkkien kartat omilla generaattoreillaan.

maps/routeTranslationsMap.js sisältää kielikohtaiset reittikäännökset, ja utils/routeTranslator.js valitsee kartan pyynnön kielen perusteella. Nykyisessä rakenteessa ei ole erillisiä languageMap.js, routeTranslations.js tai routeMap.js-lähdetiedostoja vanhan ohjeen tarkoittamassa muodossa: routeMap.js on generoitu maps/-tuotos ja käännösapu elää utils/-hakemistossa.

Kielireittiä muutettaessa päivitetään sen omistava auktoriteetti ja ajetaan generaattorit; generoituun karttaan ei rakenneta rinnakkaista käsin ylläpidettyä totuutta. npm run dev, npm test ja npm run build ajavat tarvittavia karttageneraattoreita osana omaa ketjuaan.

S3 fallback käsittelee uudelleenohjauksia

AI Commercen utils/s3Fallback.js ei palauta puuttuvaa HTML-sivua S3:sta. Se muodostaa pyydetystä URL:sta avaimen redirects/<polku>/redirect.json ja etsii S3:sta uudelleenohjauskohteen. Dynaamisella backend-reitillä tarkistus tehdään backendin 404-vastauksen jälkeen; puuttuvalle staattiselle reitille sama tarkistus voidaan tehdä suoraan.

Jos redirect-tiedosto sisältää eri kohde-URL:n, runtime rakentaa uudelleenohjauksen ja säilyttää kyselyparametrit. Saman URL:n osoittava kohde hylätään silmukan estämiseksi. Jos kohdetta ei löydy tai JSON on virheellinen, fallback palauttaa null-arvon ja varsinainen virheketju säilyttää 404-tilan.

Tällä rajauksella hakukone saa puuttuvalle sivulle oikean HTTP 404 -vastauksen, mutta aiemmin siirretty URL voidaan ohjata hallitusti uuteen osoitteeseen. S3-oikeus on rajattu redirects/*-objektien lukemiseen; fallbackia ei käytetä yleisenä tiedosto- tai sivupalveluna.

main-haara omistaa jaetun verkkokauppakoodin

AI Commercen yhteiset verkkokauppakorjaukset tehdään ensisijaisesti puhtaaseen main-haaraan. Tenant-muutoksessa valitaan kyseisen tenantin oikea Git-haara; tenanttia ei emuloida muokkaamalla ympäristötiedostoa. Yhdistämisessä säilytetään tenantin havaittava käyttäytyminen, importit, komponenttiomistus ja tenant-kohtaiset riippuvuudet.

Täysi julkaisujärjestys puhtaasta main-haarasta on ./deploy/merge.sh -r, ./deploy/check.sh, ./deploy/push.sh ja ./deploy/deploy.sh. Keskeytynyttä merge- tai check-kierrosta voidaan jatkaa dokumentoidulla -f <branch>-valinnalla. Partneri ei käynnistä monitenanttikierrosta ilman Petroltä saatua toimeksiantoa.

Komennon valmistuminen ei yksin todista tenantin toimivuutta. Yhdistämisen jälkeen tarkistetaan tenantin header, valikko, navigaatio ja komponentti-importit sekä ajetaan haaran omat tarkistukset. Näin yhteinen koodi pysyy yhdessä kanonisessa toteutuksessa mutta tenant-kohtainen käyttöliittymä ei katoa automaattisen konfliktiratkaisun alle.

tekoäly kauppa frontend kehitys svelte builderio vike vite integraatiopartneri .env.local eslint languagemap routeri route assets node_modules pages

Oliko artikkeli hyödyllinen?

Kyllä
Ei
Anna palautetta tästä artikkelista

Yhteenkuuluvat artikkelit

  • AI Commerce GraphQL -käyttöohje partnereille
  • Mikä on AI Commerce ja mikä on visiomme?
  • Sonet CGI Premium -integraation toimintamalli
  • AI Commerce -kehitysympäristö partnereille
  • Svelte-storefrontin tenant-haarojen hallinta
AI Commerce Logo

Future-proof eCommerce, built in the EU

AI Commerce Cloud is developed and hosted within the EU, fully compliant with GDPR and all relevant regulations.

Solutions

Service packages Features Integrations Customers

About us

About us Support Vision Contact us

Development

Changelog Blog Implementation Partners System status
AI Commerce Cloud FI0818073-0
Ranta-Tampellan Katu 17, 33180 Tampere, Finland
info@aicommerce.fi
Privacy Policy Licensing Rights Terms of Use
© 2025 AI Commerce Cloud. All rights reserved.
Expand