EasyHost

My journey with Docker began during my internship at Conversio, where I saw how they used Docker to deploy Conversio Hub with staging and production environments. While I was aware of self-hosting, I didn't fully understand its details at the time.

It wasn't until I started my Web Developer education and learned the client-server model that things began to click. A video by Lee Robinson about deploying Next.js applications gave me the push I needed to start learning Docker.

From Manual to Automated

After deploying a couple of school projects using Docker and Nginx, I noticed something among my classmates. While I started deployments early and worked through issues gradually, other groups often left deployment to the end, leading to challenges with separate frontend and backend hosting and CORS issues.

The repetitive nature of setting up Docker configurations and deployment scripts made me think: this process could be automated. That's when EasyHost was born.

Building the Extension

I had never built a VS Code extension before. Using Cursor IDE and a React-based VS Code extension template helped me get started. The extension needed to:

1. Generate Docker configurations
2. Create deployment scripts
3. Handle environment variables
4. Configure Nginx and SSL
5. Update framework-specific settings

Here's how the file generator orchestrates these tasks:

export async function fileGenerator(config: Config, projectRoot: string) {
  try {
    const hasChanges = await hasUncommittedChanges(projectRoot);
    if (hasChanges) {
      return {
        success: false,
        error: "UNCOMMITTED_CHANGES",
        message: "Please commit your changes before generating files.",
      };
    }

    config.containers.forEach((container) =>
      generateDockerfile(container, projectRoot)
    );

    generateDockerCompose(config, projectRoot);
    generateUpdateScript(config, projectRoot);
    generateDeployScript(config, projectRoot);

    if (config.include_sensitive_env_variables) {
      await generateGitignore(projectRoot);
    }

    return {
      success: true,
      message: "Files generated successfully.",
    };
  } catch (error) {
    return {
      success: false,
      error: "GENERATION_ERROR",
      message: "An error occurred while generating files.",
    };
  }
}

Framework Support

The extension handles framework-specific requirements. For Next.js applications, it configures standalone output for Docker environments:

export function generateDockerfile(
  container: Config["containers"][number],
  projectRoot: string
) {
  const dockerfileContent = getDockerfile({
    id: container.id,
  });

  if (!dockerfileContent) {
    return;
  }

  // Resolve the container context to an absolute path based on the project root
  const containerPath = path.resolve(projectRoot, container.context || "./");
  const dockerfilePath = path.join(containerPath, "Dockerfile");

  // Handle Next.js specific configuration
  if (container.id === "next") {
    updateNextConfig(containerPath);
  }

  if (container.id === "sveltekit") {
    updateSveltekitConfig(containerPath);
  }
  // Ensure directory exists before writing
  ensureDirectoryExists(containerPath);
  fs.writeFileSync(dockerfilePath, dockerfileContent);
}

Security Considerations

The extension handles sensitive information like environment variables and repository tokens. Users can choose whether to include sensitive values in generated files:

function generateEnvironmentVariables(config: Config): string {
  let envVars = "";

  // Global env variables
  config.env_variables.forEach(({ key, value }) => {
    if (config.include_sensitive_env_variables) {
      envVars += `${key}="${value}"\n`;
    } else {
      envVars += `${key}="very_secret_value"\n`;
    }
  });

  return envVars;
}

If sensitive information is included, the extension automatically adds the files to the project's .gitignore:

if (config.include_sensitive_env_variables) {
  await generateGitignore(projectRoot);
}

This helps prevent accidental commits of sensitive data to GitHub. For example, when deploying a Next.js application with a database connection string, you might want to include the actual values for deployment but ensure they're not tracked in version control.

The extension also provides clear feedback if there are uncommitted changes before generating files:

const hasChanges = await hasUncommittedChanges(projectRoot);
if (hasChanges) {
  return {
    success: false,
    error: "UNCOMMITTED_CHANGES",
    message: "Please commit your changes before generating files.",
  };
}

Generated Files

The extension creates several files needed for deployment:

- `Dockerfile` for each container
- `docker-compose.yml`
- `deploy.sh` (deployment script)
- `update.sh` (update script)
- Nginx configuration
- Updates to `.gitignore` (if sensitive variables are included)

Real-World Testing

I used the extension to set up the deployment for Next Integrate. Through testing, I learned that Docker deployments often need project-specific adjustments. This reinforced that EasyHost works best as a starting point rather than a complete solution.

Current State

The extension supports Next.js, SvelteKit, and Laravel. I built it with extensibility in mind, making it easier to add support for other frameworks based on user feedback.

Building EasyHost has taught me about:

• Creating developer tools that fit existing workflows
• Handling security in deployment automation
• Finding the right balance between automation and flexibility

The project reinforced that while automation helps speed up development, it shouldn't replace understanding the underlying technologies. EasyHost aims to make Docker deployments more accessible while encouraging developers to learn containerization concepts.