Documentation
Features
Debug Frontend Builds

Debug Frontend Build

This feature works by scanning your JavaScript frontend during build-time to identify and solve errors in real-time, helping you streamline your development process and ensure the reliability of your deployment.

This feature is in early Alpha and we plan to continue improving it with your feedback.


Alt Text

This feature is built using WebPack (opens in a new tab) and is compatible with JavaScript front-end websites such as:

Intergration

Install Plugin

To install Code Fundi into your frontend code, simply run the following command.

npm
npm install @codefundi/webpack-plugin --save-dev
pnpm
pnpm install @codefundi/webpack-plugin --save-dev
yarn
yarn install @codefundi/webpack-plugin --save-dev

Setup Config

Next add the plugin into your project by adding the following code to your config.js file as shown below.

  • Next.JS
next.config.js
/** @type {import('next').NextConfig} */
const CodeFundi = require('@codefundi/webpack-plugin');
 
 
const nextConfig = {
  webpack: (config) => {
 
    config.plugins.push(new CodeFundi({
        apiKey: 'YOUR_CODE_FUNDI_API_KEY'
    }));
    
    return config;
  },
};
 
module.exports = nextConfig;
  • Vue JS
vue.config.js
const CodeFundi = require('@codefundi/webpack-plugin');
 
module.exports = {
  chainWebpack: config => {
    config.plugin('codeFundi').use(CodeFundi, [{
      apiKey: 'YOUR_CODE_FUNDI_API_KEY'
    }]);
  }
};
  • Angular
webpack.config.js
const CodeFundi = require('@codefundi/webpack-plugin');
 
module.exports = {
  plugins: [
    new CodeFundi({
      apiKey: 'YOUR_CODE_FUNDI_API_KEY'
    })
  ]
};

Setup API Key

To get your API Key, first create an account and head over to the dashboard (opens in a new tab).

Next, click on the Profile tab and scroll to the section with the API Key.


Alt Text

From here, you can create your API key and copy it in the config file.


Alt Text

Run Code Fundi

You can now run your frontend build using:

npm
npm run build

Whenever a build error is encountered, Code Fundi scans the source to find the error and generates a detailed description of the error along with the corrected code.

Memory