lcacollect / frontend

LCA Collect

LCAcollect is a web platform for collecting documentation for LCA (Life Cycle Assessment). LCAcollect has been developed by Arkitema and COWI and given to the Danish Building Industry to be used widely in the industry.

Introduction

This the frontend app for the LCAcollect Tool. It is written in Typescript and React.

Get started

Copy the .env.example to .env and populate the values.

To start the dev server npm run dev

To run unit tests npm run test

To run interactive Cypress tests npm run e2e:open

NOTE: before running the e2e tests the following env vars need to be set:

CYPRESS_AAD_TENANT_ID=
CYPRESS_AAD_CLIENT_ID=
CYPRESS_AAD_APP_CLIENT_SECRET=
CYPRESS_TEST_USER_EMAIL=
CYPRESS_TEST_USER_PASSWORD=

To generate GraphQL hooks npm run codegen

Development Setup with other @lcacollect packages

You can use npm link to set up live reloading of the other @lcacollect packages.

• Clone the package that you wish to enable live reload on.
• In the terminal, go the root folder of the cloned repo and write npm link in the terminal
• Go back to this repo's root folder and write npm link @lcacollect/{PACKAGE} to link the package.

Example of a oneliner for linking the project package (executed from lcacollect/frontend/):

npm link ../shared-project-frontend && npm link @lcacollect/project

• When you make changes to the package, that you wish to see in this app, simply run npm run build in the package and the changes will available here.
• To enable hot reloading for a linked project, go to vite.config.ts and remove the comment // for the linked project you want to enable hot reloading for (NB! Only 1 project at a time). Then open a new terminal in the directory of the linked project and run npm run build:watch, to see changes live locally.

Example where the project package is enabled for hot reloading:

optimizeDeps: {
    exclude: [
      // '@lcacollect/assembly',
      // '@lcacollect/documentation',
      '@lcacollect/project',
      // '@lcacollect/core',
      // '@lcacollect/components',
      // '@lcacollect/e2e-testing',
    ],
    ...
}

Folder Structure and Naming

cypress/ # Contains E2E tests
    e2e/ # The tests themselves
    fixtures/ # Mock data
    support/ # Helper functions
src/ # Contains the source code
    app/ # Contains the App component
    assets/ # Contains assets, such as images
    components/ # React components
        myComponent/ # Each component has its own folder
            index.ts # Export of what is public
            myComponent.tsx # The component
            myComponent.spec.tsx # Unit test file
    dataAccess/ # Apollo Client folder
        generated.ts # Autogenerated file from Apollo with React Hooks for data fetching
        schema.graphql # File for writing GraphQL queries
    pages/ # Page components
    routes/ # Routing for the app

Further Documentation

Further documentation for LCAcollect can be found here

License

Unless otherwise described, the code in this repository is licensed under the Apache-2.0 License. Please note that some modules, extensions or code herein might be otherwise licensed. This is indicated either in the root of the containing folder under a different license file, or in the respective file's header. If you have any questions, don't hesitate to get in touch with us via email.

frontend's Issues

Convert DevOps Pipeline to GitHub Actions