Lovable and Docker integration: Step-by-Step Guide 2025

 

Creating a Dockerfile for the Lovable Project

 

• Create a new file in your project’s root folder and name it Dockerfile.
• Insert the following code snippet into the Dockerfile. This file defines the image, working directory, dependency installation, application build, and startup command.

  
  FROM node:14-alpine
  
  Set the working directory in the container
  WORKDIR /app
  Copy package.json and package-lock.json (if available) into the container
  COPY package*.json ./
  Install project dependencies using npm
  RUN npm install
  Copy the rest of your project's files into the container
  COPY . .
  Build the TypeScript code
  RUN npm run build
  Expose the port the app runs on
  EXPOSE 3000
  Define the command to run your app
  CMD ["node", "dist/index.js"]
      

  
  


• 
  Save the file. This Dockerfile tells Docker how to assemble your application image.
  

 

Creating a docker-compose.yml File

 

• In the root folder of your project, create a new file named docker-compose.yml.
• Add the following snippet. This file simplifies running your Docker container by setting up service definitions and port mapping:

  
  version: "3"
  
  services:
    lovable-app:
      build: .
      ports:
      - "3000:3000"
      

  
  


• 
  Save the file. This configuration maps port 3000 on your host to port 3000 in your container.
  

 

Updating package.json Scripts for TypeScript Build and Run

 

• Open your existing package.json file located in your project root.
• Locate the "scripts" section. Add or update the scripts as shown below. These scripts define how the project is built and started:

  
  "scripts": {
    "start": "node dist/index.js",
    "build": "tsc"
  }
      

• Make sure that your project includes a tsconfig.json file correctly configured to compile your TypeScript code into a dist folder.
• Save the changes in package.json.

 

Modifying TypeScript Code to Use Environment Variables

 

• In the main TypeScript file of your Lovable project (for example, index.ts or app.ts), update your server start code to use an environment variable for the port. This ensures your application works both locally and when deployed in Docker.
• Insert or update the code snippet as follows:

  
  const port = process.env.PORT || 3000;
  
  app.listen(port, () => {
    console.log(Server is running on port ${port});
  });
      

  
  


• 
  This code reads the port from the environment variables (which can be set by Docker) and falls back to port 3000 if none is provided.
  


• 
  Save your changes.
  

 

Installing Dependencies without a Terminal

 

• Since Lovable does not have a terminal, dependency management should be handled by ensuring that your package.json includes all required packages. Verify that you have TypeScript and any necessary types installed as dependencies.
• For example, your dependencies and devDependencies in package.json might include:

  
  "dependencies": {
    "express": "^4.17.1"
  },
  "devDependencies": {
    "typescript": "^4.0.0",
    "@types/node": "^14.0.0",
    "@types/express": "^4.17.0"
  }
      

• Save any changes made to package.json. The above entries ensure that when Docker executes npm install it installs these dependencies.