Skip to main content

Examples and Templates

Examples are small projects designed to demonstrate RADFish ecosystem. Templates are meant to be a clean starting point for a new RADFish project.

Examples​

Each exammple is scoped to teach developers how to implement core pieces of functionality. Examples include a detailed README.md file that explains its purpose, design pattern, and best practices.

These examples are meant to be a reference for any RADFish project. These examples can serve as a starting point to build out a new RADFish application. However, we recommend starting with a fresh react-javascript template.

The source code for each example is in the open source repo for RADFish boilerplate. Each example can be cloned and run separately as you are working with each from the RADFish CLI. To learn how to run these scripts, refer to the running examples section.

List of Examples​

Here's a list of pre-built examples that you can use as a starting point for your application. These examples are scoped to one core feature.

  1. Computed Form Fields
  2. Conditional Form Fields
  3. Field Validators
  4. Form Structure
  5. Mock API
  6. Multistep Form
  7. Network Status
  8. On Device Storage
  9. Persisted Form
  10. Server Sync
  11. Simple Table

Templates​

These templates are framework-specific. At the time of this writing, only the react-javascript template is supported. New templates for other frameworks and other languages are planned for the future!

Templates come pre-configured with everything to start coding your new project right away. This includes RADFish core modules, service-worker configuration, application routing, and offline storage.

Creating a new project based on a template is similar to running an example. If you want to create a new project from the react-javascript library, execute this RADFish CLI command:

npx @nmfs-radfish/create-radfish-app my-app --template react-javascript

This will create a new RADFish project named my-app in your current working directory. Happy hacking!

Note: The react-javascript template is the default. Running npx @nmfs-radfish/create-radfish-app my-app will create the same project without needing to specify the template.

Template Directory Structure​

Once you scaffold a new template radfish app, you'll be given the following file structure:

my-app
├── babel.config.js
├── index.html
├── mocks
│   ├── browser.js
│   └── handlers.js
├── node_modules/
├── package-lock.json
├── package.json
├── public
│   ├── icons
│   ├── manifest.json
│   ├── mockServiceWorker.js
│   ├── noaafavicon.png
│   └── robots.txt
├── src
│   ├── App.jsx
│   ├── index.css
│   ├── index.jsx
│   ├── pages
│       └── Home.jsx
│   ├── service-worker.js
│   └── styles
│       └── theme.css
└── vite.config.js

Root Level​

  • babel.config.js Configuration file for Babel, a JavaScript compiler. It specifies how Babel should transpile your code. This enables modern JavaScript features while maintaining compatibility with older browsers.

  • index.html The main HTML file that serves as the entry point of your application. It includes references to your compiled JavaScript and CSS files generated by the build process.

  • node_modules/ This directory contains all the project's dependencies installed via npm. It's automatically generated when you run npm install. You should not manually modify this folder, as it's managed by npm.

  • package-lock.json Automatically generated file that records the exact version of each installed package. It locks dependencies to specific versions. This ensures consistent installs across different environments.

  • package.json A manifest file for your Node.js project. It includes metadata about the project, such as the name, version, scripts, dependencies, and more. This file is essential for managing project configurations and dependencies.

  • vite.config.js Configuration file for Vite, a fast build tool and development server. It customizes the behavior of the Vite server and build process, including plugins, aliases, and other settings.

mocks/​

This folder contains files related to mocking API requests for development and testing purposes.

  • mocks/browser.js Sets up and configures the mock service worker for the browser environment. It intercepts network requests during development to simulate API responses without needing a real backend.

  • mocks/handlers.js Defines request handlers for the mock service worker. Each handler specifies how to respond to certain API requests, allowing you to test different scenarios and data flows.

public/​

This folder ontains static assets that will be served directly to the browser. These files are not processed by Webpack.

  • public/icons: Directory containing icon images of various sizes. Typically used for favicons and Progressive Web App (PWA) requirements.
  • manifest.json: Provides metadata about the web application. Useful for PWAs.
  • mockServiceWorker.js: The automatically generated script for the mock service worker. It's used by the msw library to intercept network requests in the browser.
  • noaafavicon.png: The favicon image for your application. This appears in the browser tab and bookmarks.
  • robots.txt: A file that provides directives to web crawlers and bots about which pages or sections of your site should not be processed or scanned.

src/​

This folder contains source code for your React application. This is where you will spend most of your development time.

  • App.js: The root React component of your application. It serves as the main container for your app's components and routes.
  • index.jsx: The entry point for your React application. It renders the App component into the DOM and may include global providers like routers or state management tools.
  • index.css: Provides general styling rules that apply to the entire app. It includes resets, normalizations, and default HTML element styling.
  • pages/: Directory containing React components that represent different pages or routes in your application. Each file typically corresponds to a route managed by your router.
  • pages/Home.jsx: The main landing page of your application. It defines the content and layout for the homepage. It often contains key UI components such as headers, footers, navigation, and other elements relevant to the first impression of your app.
  • service-worker.js: Custom service worker script for handling offline support, caching, and other background tasks. It enables your app to function as a PWA with offline capabilities.
  • styles/: Directory for organizing additional CSS or styling files, such as variables, mixins, or component-specific stylesheets.
  • styles/theme.css: Contains global theme variables and styles for consistency in design like colors, fonts, and spacing.