Lovable and IntelliJ IDEA integration: Step-by-Step Guide 2025

 

Installing Dependencies in package.json

 

• Create or open the file named package.json in the root of your Lovable project.
• Add the following dependencies and scripts. Since Lovable has no terminal, these settings ensure that the required packages are declared for TypeScript support and running your code with ts-node:

{
  "name": "lovable-project",
  "version": "1.0.0",
  "dependencies": {
    // Your project dependencies go here.
  },
  "devDependencies": {
    "typescript": "^4.9.5",
    "ts-node": "^10.9.1"
  },
  "scripts": {
    "build": "tsc",
    "start": "ts-node src/index.ts"
  }
}

• Make sure to save the file. The dependencies will be recognized by IntelliJ IDEA when it reads the project configuration.

 

Creating the TypeScript Configuration File

 

• Create a new file called tsconfig.json in the root directory of your project.
• This file tells the TypeScript compiler how to compile your code. Insert the following configuration:

{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "rootDir": "src",
    "outDir": "dist",
    "strict": true,
    "esModuleInterop": true
  },
  "include": [
    "src"
  ]
}

• This configuration sets src as your source folder and dist as your output folder. It also enables strict type checking.

 

Creating a TypeScript Source File

 

• Inside your project root, create a folder named src if it does not already exist.
• In the src folder, create a new file called index.ts.
• Insert the following TypeScript code into index.ts as a simple example to test your integration:

console.log("Lovable project running with IntelliJ IDEA integration");

• This code prints a message to the console when executed.

 

Configuring IntelliJ IDEA Run/Debug Configuration

 

• In IntelliJ IDEA, open your Lovable project.
• Go to the menu and select Run -> Edit Configurations....
• Click the + button to add a new configuration and choose Node.js (or Node.js configuration, depending on your version).
• Fill in the following details in the new configuration:
  • Name: Enter a name like Lovable TS.
  • JavaScript file: Set this to src/index.ts if you want to run directly with ts-node. If you prefer to compile first, point this to dist/index.js after running the build script.
  • Working directory: Ensure it is set to your project's root directory.
• Apply the changes and close the configuration dialog.

 

Running and Testing the Integration

 

• To run your project, select the Lovable TS configuration from the run/debug selector in IntelliJ IDEA.
• Click the Run button. IntelliJ IDEA will invoke the start script defined in package.json using ts-node, executing the src/index.ts file.
• You should see the message "Lovable project running with IntelliJ IDEA integration" in the IntelliJ IDEA console.
• This confirms that your project has been integrated successfully with IntelliJ IDEA using TypeScript.