a3178a91b4
* after authentification, query the categories if active and store them * get categories from store * use category store to get categories * get categories from store * mock store to have access to categories * to get rid of the active categories config variable in the frontend, the Category query returns an empty array when categories are not active * remove CATEGORIES_ACTIVE from .env * should return string to avoid warnings in console * replace all env calls for categories active by getter from store * use categoriesActive getter * ignore order of returned categories * mixin to get the category infos from the store, to ensure, that the quey has been called * fix misspelling --------- Co-authored-by: Wolfgang Huß <wolle.huss@pjannto.com>
Webapp
Installation
For preparation we need Node and recommend to use node version manager nvm to switch
between different local Node versions:
# install Node
$ cd webapp
$ nvm install v20.12.1
$ nvm use v20.12.1
Install node dependencies with yarn:
# install all dependencies
$ cd webapp
$ yarn install
# or just
$ yarn
# or just later on to use version of ".nvmrc" file
$ nvm use && yarn
Copy:
# in webapp
cp .env.template .env
Configure the files according to your needs and your local setup.
Build for Development
# serve with hot reload at localhost:3000
$ yarn dev
Build for Production
# build for production and launch server
$ yarn build
$ yarn start
Run tests
We ensure the quality of our frontend code by using
- ESLint for checking our JavaScript code
- Jest and Vue Test Utils to unit test our components
- Storybook to document and manually test our components in an isolated playground
For more information see our frontend testing guide. Use these commands to run the tests:
::: tabs @tab:active With Docker
After starting the application following the above guidelines, open new terminal windows for each of these commands:
# run eslint
$ docker-compose exec webapp yarn lint
# run unit tests
$ docker-compose exec webapp yarn test
# start storybook
$ docker-compose exec webapp yarn storybook
You can then visit the Storybook playground on http://localhost:3002
@tab title Without Docker
After starting the application following the above guidelines, open new terminal windows and navigate to the /webapp directory for each of these commands:
# run eslint in /webapp (use option --fix to normalize the files)
$ yarn lint
# run unit tests in /webapp
$ yarn test
# run locales in /webapp (use option --fix to sort the locales)
$ yarn locales
# start storybook in /webapp
$ yarn storybook
You can then visit the Storybook playground on http://localhost:3002
:::
Maintenance Mode
For installing and running the maintenance mode see Maintenance Mode.
Styleguide Migration
We are currently in the process of migrating our styleguide components and design tokens from the Nitro Styleguide into the main ocelot.social repository and refactoring our components in the process. During this migration, our new components will live in a _new/ folder to separate them from the old, yet untouched components.
Folder Structure
The folder structure we are following is prescribed by Nuxt.js:
- assets contains icons, images and logos in
svgformat and all shared SCSS files such astokens - components separated into two sub-folders:
- generic are the generic building blocks of the app – small, reusable and usually not coupled to state
- features are composed of components but tied to a particular function of the app (e.g.
commentorpost)
- layouts can use components to create layout templates for pages
- pages are the entry points for all
routesin the app and are composed of layouts, features and components