Projektnamn

APIer som används

Dessa APIer används i projektet, applikationsanvändaren i WSO2 måste prenumerera på dessa. Systemet utgår ifrån /backend/api-config.ts där dessa står specificerade.

API	Version
SimulatorServer	2.0

Utveckling

Krav

• Node >= 20 LTS
• Yarn

Steg för steg

1. Klona ner repot till en mapp "" och skapa nytt git repo

npx tiged --mode=git [email protected]:Sundsvallskommun/web-app-starter.git <web-app-projektnamn>
cd <web-app-projektnamn>
git init

2. Installera dependencies för både backend och frontend

cd frontend
yarn install

cd backend
yarn install

3. Skapa .env-fil för frontend

cd frontend
cp .env-example .env

Redigera .env för behov, för utveckling bör exempelvärdet fungera.

4. Skapa .env-fil för backend

cd backend
cp .env.example.local .env.development.local
cp .env.example.local .env.test.local

redigera .env.development.local för behov. URLer, nycklar och cert behöver fyllas i korrekt.

• CLIENT_KEY och CLIENT_SECRET måste fyllas i för att APIerna ska fungera, du måste ha en applikation från WSO2-portalen som abonnerar på de microtjänster du anropar
• SAML_ENTRY_SSO behöver pekas till en SAML IDP
• SAML_IDP_PUBLIC_CERT ska stämma överens med IDPens cert
• SAML_PRIVATE_KEY och SAML_PUBLIC_KEY behöver bara fyllas i korrekt om man kör mot en riktig IDP

5. Initiera eventuell databas för backend

cd backend
yarn prisma:generate
yarn prisma:migrate

6. Synca datamodeller för api:er

   Se till att README och /backend/src/config/api-config.ts matchar och justera utefter de api:er som önskas användas.

   • För backend, i /backend kör yarn generate:contracts för att få ned de senaste datamodellerna för samtliga api:er -- Justera om så behövs utifrån de uppdaterade modellerna

   • För frontend, se till att backend är igång (yarn dev), i /frontend kör yarn generate:contracts för att synca backend med frontend -- Justera om så behövs utifrån de uppdaterade modellerna

Språkstöd

För språkstöd används next-i18next.

Placera dina språkfiler i frontend/public/locales/<locale>/<namespace>.json.

För att det ska fungera med Next.js och SSR måste du skicka med språkdatat till ServerSideProps. Det gör du genom att lägga till följande till dina page-komponenter (behövs ej i subkomponenter).

export const getServerSideProps = async ({ locale }) => ({
  props: {
    ...(await serverSideTranslations(locale, [<namespaces>])),
  },
});

För att lägga till ett ytterligare spåk, skapa en mapp med språkets namn, och lägg sedan till språket i next-i18next.config.js.

Exempel för tyska: Skapa frontend/public/locales/de/common.json. Ändra next-i18next.config.js:

module.exports = {
  i18n: {
    defaultLocale: 'sv',
    locales: ['sv', 'de'],
  },
 ...
};

Som hjälp i VSCode rekommenderas i18n Ally.