We will learn concepts of BlueBase by creating a production-ready To-Do app.

We will use Expo CLI to create a new project and add BlueBase to it. If Expo CLI is not installed, go to the Expo CLI Installation guide before proceeding.

Step 1: Initialize the project

Initialize an expo app by executing the following commands:

# Create a project named my-app.
# Select the "blank (Typescript)" template when prompted
expo init bluebase-todo-app

# Navigate to the project directory
cd bluebase-todo-app

More info here.

Step 2: Install BlueBase package

yarn add @bluebase/core

Step 3: Update App File

import React from 'react';
import { BlueBaseApp } from '@bluebase/core';

export default function App() {
  return (
    <BlueBaseApp />
  );
}

Step 4: Run App

expo start

This will open the expo console.

You can launch the web or native version of the app from here.

All functionality in BlueBase is added via plugins. Let us add some ready-made plugins to our project to take a head start on building our app.

Step 1: Install plugins

Start by adding following devDependencies:

yarn add @bluebase/plugin-launcher @bluebase/plugin-material-ui @bluebase/plugin-react-native-paper @bluebase/plugin-responsive-grid @bluebase/plugin-vector-icons @bluebase/plugin-settings-app @bluebase/plugin-react-router @bluebase/plugin-react-navigation @bluebase/plugin-responsive-grid @bluebase/plugin-json-schema-components

Some of the plugins (react-navigation) require some more dependencies to be installed:

expo install react-native-safe-area-context react-native-gesture-handler react-native-reanimated

Step 2: Create plugin files

Now in the root folder create the following file plugins.ts:

import BlueBasePluginJsonSchemaComponents from '@bluebase/plugin-json-schema-components';
import BlueBasePluginLauncher from '@bluebase/plugin-launcher';
import BlueBasePluginMaterialUI from '@bluebase/plugin-material-ui';
import BlueBasePluginReactRouter from '@bluebase/plugin-react-router';
import BlueBasePluginResponsiveGrid from '@bluebase/plugin-responsive-grid';
import BlueBasePluginSettingsApp from '@bluebase/plugin-settings-app';
import { MaterialCommunityIcons } from '@bluebase/plugin-vector-icons';

export const plugins = [
	BlueBasePluginJsonSchemaComponents,
	BlueBasePluginLauncher,
	BlueBasePluginMaterialUI,
	BlueBasePluginReactRouter,
	BlueBasePluginResponsiveGrid,
	MaterialCommunityIcons,
	BlueBasePluginSettingsApp,
];

The file above exports an array of plugins, imported from their respective modules.

Create another file similar to the one above and name it plugins.native.ts. This way react-native compiler will load this version rather than plugins.ts on native platforms.

So by doing this, we can add web-specific plugins in plugins.ts and native specific code in plugins.native.ts.

import BlueBasePluginJsonSchemaComponents from '@bluebase/plugin-json-schema-components';
import BlueBasePluginLauncher from '@bluebase/plugin-launcher';
import BlueBasePluginReactNativePaper from '@bluebase/plugin-react-native-paper';
import BlueBasePluginReactNavigation from '@bluebase/plugin-react-navigation';
import BlueBasePluginResponsiveGrid from '@bluebase/plugin-responsive-grid';
import BlueBasePluginSettingsApp from '@bluebase/plugin-settings-app';
import { MaterialCommunityIcons } from '@bluebase/plugin-vector-icons';

export const plugins = [
	BlueBasePluginJsonSchemaComponents,
	BlueBasePluginLauncher,
	BlueBasePluginReactNativePaper,
	BlueBasePluginReactNavigation,
	BlueBasePluginResponsiveGrid,
	MaterialCommunityIcons,
	BlueBasePluginSettingsApp,
];

In this case, the difference in the above 2 files is that plugins.ts uses:

• @bluebase/plugin-react-router

• @bluebase/plugin-material-ui

While plugins.native.ts uses the following instead:

• @bluebase/plugin-react-navigation

• @bluebase/plugin-react-native-paper

Step 3. Import plugins

Now edit the App.tsx file and add the following content.

import 'react-native-gesture-handler';

import React from 'react';
import { BlueBaseApp } from '@bluebase/core';
import { plugins } from './plugins';

export default function App() {
  return (
    <BlueBaseApp plugins={plugins} />
  );
}

Here, we import the plugins array and pass them to the BlueBaseApp component as a prop.

Step 4: Add Babel plugin

Lastly, modify the contents of babel.config.js file to:

module.exports = function(api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: ['react-native-reanimated/plugin'],
  };
};

Step 5: Run

Now run the app again:

expo start

You should see the following screen on launch:

Home Screen

Settings App

Explanation

So as you can see, by just installing a few plugins, we were able to add a lot of functionality in a very short span of time, by writing very few lines of code.

I'll try to briefly describe what purpose each plugin serves.

By now it should be clear that all functionality in BlueBase is added via plugins. So in order to add views to our To-Do app, we need to create our own plugin.

Step 1: Install components library

Start by adding the following dependency:

This library provides typescript typings of components imported from the BlueBase context.

Step 2: Create a plugin icon

The first thing that we will do is to create a plugin icon component. Create the following files:

Step 3: Create plugin

Time to create the plugin itself. Create the following file:

In the above code, we use the createPlugin function from the the @bluebase/core library. This function takes attributes as input, and returns a BlueBase Plugin.

• The key property servers as the plugin ID, as well as the slug in the plugin URL path. So in this case the path to access this plugin would be: http://localhost:19006/p/tasks.

• The name and description properties are pretty self explanatory. The name property is rendered below the icon on the home screen.

• The icon property defines the plugin icon that is rendered on the home page. In the icon.component sub-property tells which component to render. We use 'ToDoAppIcon' value, which is the same as the key on the component object in Line 10. So, by doing this we are telling BlueBase to render a component by the key ToDoAppIcon .

• Lastly, the indexRoute key tells BlueBase which screen to navigate to when the icon is pressed. We tell it to go to HomeScreen here. Since we would already be on the HomeScreen so pressing this button will not do anything.

Step 4: Use the plugin

Now we're all set to use our shiny new plugin Edit our plugin files to add our own plugin to the list.

Step 5: Run

Now run the app again:

You should see the following screen on launch: