reportportal / reportportal.github.io

reportportal.io website

ReportPortal Landing page. Dev guide

Prerequisites

• Node.js v18 and above (* Must Have)

Installation

To install all project dependencies use the next command:

npm install

Setup App

Option 1:

If you already have Space_ID and Content Delivery API access token and do not have access to the Contentful profile that's enough for basic setup.

1. Create file .env.development (do not commit it to the VCS)
2. Fill in it with:

CONTENTFUL_SPACE_ID={SPACE_ID}
CONTENTFUL_ACCESS_TOKEN={ACCESS_TOKEN}

Option 2:

Run the next command to start setup:

npm run setup

Use next information for prompts during setup:

1. Open Contentful and grab Space_ID from URL - https://app.contentful.com/spaces/{SPACE_ID}/home (requires Contentful account)
2. Content Management API access token (see Get API Keys)
3. Content Delivery API access token (see Get API Keys)

Ask admin to give you credentials to Contentful

• https://www.contentful.com

Get API Keys

• Get logged in to contentful
• Go to Contentful -> Settings -> API Keys -> Content Delivery/Preview Tokens
• Open one of the items and copy Content Delivery API access token and Content Preview API access token
• Go to Contentful -> Settings -> API Keys -> Content management tokens
• Generate your personal token

Start App

1. To run the application in development mode use the following command:

npm run start

2. Open http://localhost:8080/

Deployment

Each changes pushing (direct pushing or via merging a Pull Request) to the:

• develop branch will trigger the deployment to the dev environment to AWS S3 bucket.
• master branch will trigger the deployment to the prod environment to GitHub Pages (https://reportportal.io).

To deploy your Git branch to dev environment (AWS S3), please follow these steps:

1. Navigate to the "Deploy to Dev (AWS S3)" action in your repository.
2. Choose "Run Workflow" from the dropdown menu.
3. Enter the name of your branch and click on the "Run workflow" button.
4. Wait for the deployment process to complete. You can check the progress in the "Actions" tab of your repository.
5. Once the deployment is finished, verify that your changes have been deployed by checking the website at the following URL: http://rpp-landing.s3-website.eu-central-1.amazonaws.com/.

That's it! Your changes should now be live on the website. If you encounter any issues during the deployment process, please consult the documentation or reach out to the project maintainers for assistance.

Libraries

• Gatsby. Project is built on top of Gatsby to leverage its Static Site Generation feature. Make sure that you check that app works and looks correctly both in dev mode (npm run dev) and in production mode npm run build && npm run serve. You should pay attention whether elements are not shifting/jumping on the initial load in the production mode.
• And Design. Project uses components from Ant Design. Use them when you can to avoid creating things from scratch, but make sure to style them according to our design. As an example check out how Steps component is used and styled in the HowItWorks component

SCSS/CSS

• To set the font use mixins from font folder

• To set the font size and line height use font-scale mixin

• To work with different screens use breakpoint mixin. Check styles for mobile on 360px width. To write styles for tablet use breakpoint mixin with $tablet-sm-exact: 768px variable. To write styles for desktop use breakpoint mixin with $desktop-sm: 1239px variable. Don't use other screen variables unless it is really needed.

• Don't use modular CSS

• Follow import ordering

    import { GatsbyImage, getImage } from 'gatsby-plugin-image';
    import { renderRichText } from 'gatsby-source-contentful/rich-text';
  
    import { ArticleAuthor } from '../ArticleAuthor';
  
    import from './ArticlePreview.scss';
  

• Use @use instead of @import to import mixins and variables

    @use 'src/styles/mixins' as m;
    @use 'src/styles/variables' as v;
  

• Include mixins first and add empty line after them

JS

• For links use Link component

SVG

• Store icons as svg with '.inline.svg' ending and then reference as it is component. Example - 'arrow.inline.svg'