Starter Kit

screenshot of Starter Kit
react
vite
scss

A template for IG pages

Overview:

The Starter Kit is a template for IG projects, providing everything needed to build a standalone front-end app. It includes basic FT page furniture and is configured to automatically deploy to the web.

Features:

  • Use this template: Create a new repository by selecting the "Use this template" button. Projects should be created in the ft-interactive GitHub organization.
  • npm start: Starts up a development server and opens the app in a web browser. The browser will automatically reload when files change.
  • npm run storybook: Loads up StorybookJS as a development environment for building components. Stories created in the app/components folder will automatically show up in Storybook.
  • npm run build: Builds the app in production and puts it in the dist folder.
  • npm run preview: Builds the app in production mode and starts a webserver from the dist folder to preview the production bundle.
  • npm run a11y:local: Checks the accessibility of the app running locally at localhost:8080.
  • npm run deploy: Deploys the contents of the dist folder to an appropriate location on S3. This is usually run automatically by CircleCI.
  • npm run data: Runs any data-fetching code in config/data.js and caches the results in config/data.json. This allows the config setup to read from the file instead of fetching data each time.

Summary:

The Starter Kit is a template for IG projects that includes all the necessary components to build a standalone front-end app. It provides features like automatic deployment, development server, and accessibility checking. By following the installation guide, developers can quickly set up the Starter Kit and start building their apps.

react
React

React is a widely used JavaScript library for building user interfaces and single-page applications. It follows a component-based architecture and uses a virtual DOM to efficiently update and render UI components

vite
Vite

Vite is a build tool that aims to provide a faster and leaner development experience for modern web projects

scss
SCSS

SCSS is a preprocessor scripting language that extends the capabilities of CSS by adding features such as variables, nesting, and mixins. It allows developers to write more efficient and maintainable CSS code, and helps to streamline the development process by reducing repetition and increasing reusability.

eslint
Eslint

ESLint is a linter for JavaScript that analyzes code to detect and report on potential problems and errors, as well as enforce consistent code style and best practices, helping developers to write cleaner, more maintainable code.