We have reimagined your development experience with the use of Fooxly Spotlight. Have a multi-functional development tool which can take care of all your development tasks right from the browser. Fooxly Spotlight is a browser development tool which will help you to develop your web applications faster and easier.
📥 How to install
To install this tool, you need to run the following command in your project:
yarn add @fooxly/spotlight
🎬 Getting Started
To get started with Fooxly Spotlight, you need to import Fooxly spotlight in your project and initialize it.
import { Spotlight } from '@fooxly/spotlight';
const instance = Spotlight.create({
// Your options
});
This will give you access to your own Fooxly Spotlight instance.
📖 Adding your first command or page
To add your first command or page, you need to add a new command or page in your Fooxly Spotlight instance.
instance.registerCommand('My command name', (response) => {
// Your command
});
instance.registerPage('Settings page', '/settings');
Note: we support async functions as well. This will keep the UI loading until the command is completed.
🔭 Getting started with responses
The response we receive from a command has a couple of functionalities which you can use to make your command more interactive.
instance.registerCommand('Give random number', async (response) => {
// Give an input for the lowest number (which can only be a number)
const minimal = await response.question('Lowest number', {
regex: /^\d+$/,
});
// Give an input for the highest number (which can only be a number)
const maximal = await response.question('Highest number', {
regex: /^\d+$/,
});
// Get a random number between the lowest and highest number
const number = Math.floor(Math.random() * (Number(max) - Number(min) + 1)) + Number(min);
// Show a toast with the random number
res.toast(`Randomly selected number: ${number}`);
});
🪄 Customization
Every command and page has a couple of option which you can use to customize the command or page.
Option | Type | Description |
---|---|---|
group | string | The group where the command / page should be listed in |
icon | icon / URL / emoji / letters | The icon which should be used |
Shell access
You can also access the shell of your project. This will give you access to the terminal of your project. (You will need to have to make sure you have the spotlight server running in your project.)
Starting the spotlight server
There are 2 options to start the spotlight server:
- Have the Fooxly Spotlight package installed globally
- Add a custom script to your package.json which will start the spotlight server
Global installation
yarn global add @fooxly/spotlight
spotlight
Custom script
{
"scripts": {
... // Your other scripts
"spotlight": "node ./node_modules/@fooxly/spotlight/lib/esm/server.js",
// OR
"spotlight": "node ./node_modules/@fooxly/spotlight/lib/cjs/server.js",
}
}
Accessing the shell
To access the shell, you can use the shell
method in your response.
instance.registerCommand('Shell command', async (response) => {
// Open the shell and run the command
await response.shell('echo "Hello world"');
});
📟 Developer tools
Fooxly Spotlight provides a couple of developer tools which you can use to debug your application. To make use of these tools, you need to add the following code to your project.
import { addDeveloperTools } from '@fooxly/spotlight/developer-tools';
// ... Initialize your Fooxly Spotlight instance
// The instance is your Fooxly Spotlight instance
addDeveloperTools(instance);