Frontify React Components

This repository is used to contain any React components that are required for use in the Frontify Website in Webflow.

Development

Begin by cloning the repository.

# SSH
$ git clone [email protected]:Frontify/react-components.git

# HTTPS
$ https://github.com/Frontify/react-components.git

Once the repository is cloned, install the npm packages needed. This will generate the node_modules directory

$ npm install

All React components are located within the src directory.

To run the application locally:

$ npm run dev

This will run a development server. The application can be opened in a web browser here: http://localhost:5173/

Setup

To deploy the application to GitHub Pages, we must first ensure that a few changes are made in the settings for the application.

Install the gh-pages npm package as a devDependency.

$ npm install gh-pages --save-dev

Once installed, add a deploy script to the package.json file so we can deploy changes to GitHub Pages:

"scripts": {
  "dev": "vite",
  "build": "vite build",
  "lint": "eslint .",
  "preview": "vite preview",
  "deploy": "gh-pages -d dist"
},

Within the repository settings in GitHub, go to the pages section and Build and deployment branch to be gh-pages and /(root). This will make sure the deployment to GitHub Pages occurs when the gh-pages branch is generated.

We currently use Vite as our build tool. The vite.config.js file must set the base to be the same as the URL provided by GitHub Pages.

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vite.dev/config/
export default defineConfig({
  plugins: [react()],
  base: 'https://literate-adventure-9pg8rnn.pages.github.io/',
})

Deployment

We use GitHub Pages to deploy the application to allow components to be hosted on a URL we can then use to import into the website in Webflow.

Once a change has been made within the components, or a new component has been added, we need to run the build command:

$ npm run build

This will updated or generate the dist directory containing the code we use to deploy onto GitHub Pages.

Once the build has completed, run the deploy command to deploy the application to GitHub Pages. This process may take a few minutes to complete.

$ npm run deploy

The application is now available at the following URL: https://literate-adventure-9pg8rnn.pages.github.io/index.html - the name of the domain is randomly generated by GitHub Pages.

When we run the deploy command, GitHub will automatically create a gh-pages branch off the main branch in the repository. This has been set as a the deployment brand in the settings of the repository.

Once the deployment is complete, merge the gh-pages branch into the main branch to complete the deployment process.