Frontends

Tech Stack

• React + Typescript
• TailwindCSS (main idea & motivation)
• clsx
• Redux + Redux Saga
• Axios

Testing

• Jest
• redux-saga-test-plan

New projects

For a fast and easy React + Typescript + TailwindCSS initialization (without Craco), this package can be used. For linting and code prettifier, please use ts-standard and prettier-standard accordingly.

Assets

All assets (photos, icons, fonts, videos) must not be stored in the repository! You can upload them to the S3 bucket and then use it like this: https://static.igem.io/common/icons/igem-logo-light-bg.svg. Most fonts, icons, logos are already uploaded, so please check or ask before uploading assets that could potentially be already uploaded.

Note: once asset is uploaded to the bucket, it might take up to 24 hours for the cache to refresh. If you need to update your asset in a timely manner, upload it with a new name.

See Static Assets for further information.

Structure

Projects should follow directory structure similar to this:

src
 |
 | - assets
 |     |
 |    data
 |     | - data1.ts
 |     | - data2.ts
 |     -
 |
 | - components
 |       |
 |       | - Button
 |       |     | - __tests__
 |       |     |       | - Button.spec.ts
 |       |     |       -
 |       |     | - Button.tsx
 |       |     | - index.ts
 |       -     -
 | - containers
 |       |
 |       | - App
 |       |    | - __tests__
 |       |    |       | - App.spec.ts
 |       |    |       -
 |       |    | - components
 |       |    |       | - AppSpecificComponent
 |       |    |       |           | - __tests__
 |       |    |       |           |       | - AppSpecificComponent.spec.ts
 |       |    |       |           |       -
 |       |    |       |           | - AppSpecificComponent.tsx
 |       |    |       |           | - index.ts
 |       |    |       -           -
 |       |    | - App.tsx
 |       |    | - index.ts
 |       -    -
 | - state
 |     |
 |     | - client
 |     |     | - __tests__ 
 |     |     |       | - clientSaga.spec.ts
 |     |     |       | - clientUtils.spec.ts
 |     |     |       - 
 |     |     | - clientSaga.ts 
 |     |     | - clientActions.ts 
 |     |     | - clientModel.ts 
 |     |     | - clientReducer.ts 
 |     |     | - clientUtils.ts 
 |     |     -
 |     | - reducers.ts
 |     | - sagas.ts
 |     | - store.ts
 |     -
 | - styles
 |     |
 |     | - fonts.css 
 |     | - tailwind.css 
 |     - 
 | - index.ts
 -

Deployments

Frontends are deployed in production using GitLab Pages. For development deployment, we are currently testing AWS S3 + CloudFront. Development website is https://dev.igem.io/<FRONTEND_TAG>, where FRONTEND_TAG is, e.g., jamboree/. Please not the tag must finish with /.

.gitlab-ci.yml

You can see igem.io-frontend .gitlab-ci.yml as a reference. Explanation:

• .build job template consists of the build for deployment in both environments
• build-prod and build-dev are the actual job for building for the deployments
• lint job happens if build succeeds, and allows deployment jobs to start
• pages and pages-dev deploy to GitLab Pages and AWS S3 + CloudFront respectivelly

React requirements

For frontends developed in React, you also need to do the following steps:

package.json homepage

Add homepage property in package.json as "homepage": "/",.

BrowserRouter basename

Set the basename as the PUBLIC_URL, which is defined by the homepage:

import { BrowserRouter } from 'react-router-dom'

const App = (): JSX.Element => {
  return (
    <div className='App'>
      <BrowserRouter basename={process.env.PUBLIC_URL}>
        <Switch>

Environment Variables

Do not declare the API endpoint within the code. Instead, use an environment variable for that, so we make sure the code in production will always target the production API. Define the following variables in the CI/CD settings pannel of your project:

Locally, only REACT_APP_API_ENDPOINT is used, so create a .env file with its value, and React will automatically load its content, so you can use it via process.env.REACT_APP_API_ENDPOINT. If you want to target the production API, just edit the file. This file must never be pushed to the repository!

echo 'REACT_APP_API_ENDPOINT=https://api-dev.igem.io/api' >> .env

The following variables, used for uploading files to the S3 bucket, are defined globally for every project on iGEM HQ Tech group.

• AWS_ACCESS_KEY_ID
• AWS_DEFAULT_REGION
• AWS_SECRET_ACCESS_KEY
• AWS_FRONTENDS_BUCKET_DEV