How to dockerize and deploy a Hono App

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • MyrinNew
    Senior Member
    • Feb 2024
    • 5168

    #1

    How to dockerize and deploy a Hono App

    If you're just here to copy and paste, here's the final Dockerfile that will produce an image for your Hono app:






    FROM node:lts-alpine

    USER node
    WORKDIR /home/node

    COPY . .
    RUN npm ci

    ARG PORT
    EXPOSE ${PORT:-3000}

    CMD ["npm", "run", "start"]







    Want to actually understand what you're doing? Lets go through the steps together!





    Setup

    First, let's create the Hono app. You'll need Node.js and npm installed on your computer. If you're planning to test the container locally, you should also install Docker.


    Start by creating a new project (skip if you have one already!). Open your terminal and type:






    npm create hono@latest example-hono










    You'll be prompted to choose a template. Use the arrow keys to select 'nodejs' and hit enter. This will create a new directory called example-hono. Go into this directory:






    cd example-hono







    Inside, you'll find files like .gitignore, package.json, README.md, src/index.ts, and tsconfig.json.


    Next, install the project dependencies:






    npm install







    To make sure everything's working, start the development server:






    npm run dev







    If you go to http://localhost:3000 in your browser, you should see "Hello Hono!". When you're done checking, stop the server with CTRL-C.


    Now, let's make the port number configurable. Open src/index.ts and change the port configuration to use an environment variable:






    import { serve } from '@hono/node-server'
    import { Hono } from 'hono'

    const app = new Hono()

    app.get('/', (c) => {
    return c.text('Hello Hono!')
    })

    const port = process.env.PORT || 3000
    console.log(`Server is running on port ${port}`)

    serve({
    fetch: app.fetch,
    port,
    })







    Save the file and test it by running:






    PORT=8888 npm run dev







    Your server should now be running on port 8888.


    Next, we'll add a start script to package.json. Open it and add this to the scripts section:






    {
    "scripts": {
    "start": "tsx src/index.ts",
    "dev": "tsx watch src/index.ts"
    },
    "dependencies": {
    "@hono/node-server": "^1.13.7",
    "hono": "^4.6.19"
    },
    "devDependencies": {
    "@types/node": "^20.11.17",
    "tsx": "^4.7.1"
    }
    }







    You can test this new start script with:






    npm run start







    Now, let's create the Dockerfile and .dockerignore files to dockerize our app. Start with .dockerignore in the main project directory:






    .git
    .gitignore
    Dockerfile
    .dockerignore
    node_modules







    This file tells Docker which files to ignore when building the image.


    Next, create a Dockerfile in the same directory:






    FROM node:lts-alpine

    USER node
    WORKDIR /home/node

    COPY . .
    RUN npm ci

    ARG PORT
    EXPOSE ${PORT:-3000}

    CMD ["npm", "run", "start"]







    This Dockerfile uses the Alpine version of the Node.js LTS image. It copies the project files, installs dependencies, and sets up to run the start script when the container starts. It also exposes the port, using the PORT environment variable if provided, or defaults to 3000.


    That's it! You've now dockerized your Hono app. You can build the Docker image and run it to see your app in action inside a container.


    Deployment

    With your Dockerfile ready you can very easily deploy your Hono app to sliplane.io


    Simply signup (free!), create a new service and select your Github Repository. Sliplane will automatically find your Dockerfile and prefill all the settings.





    After clicking deploy, Sliplane will deploy your Hono app on a server, provide you with a free domain and handle all the orchestration, server management and boring stuff so you don't have to!


    Deploy your Hono App in 2 Minutes



    Cheers,


    Jonas




    More...
Working...