Why are free hosting services great?

#webdev #programming #docker #showdev

If you hear "Hugging Face," you probably think of Machine Learning, AI models, and Python. But what if I told you it’s also one of the best hidden gems for hosting your full-stack web applications for free?

When building personal projects or testing heavy architectures, finding a reliable free hosting tier can be a headache. Vercel and Netlify are great for the frontend, but if you have a custom backend or need a specific Dockerized environment, you usually have to pull out your credit card.

Today, I’ll show you how to use Hugging Face Spaces to host your Dockerized application (like a Next.js or Node.js app) completely for free.

Why Hugging Face Spaces?

Hugging Face offers a "Blank Space" option powered by Docker. The free hardware tier gives you:

2 vCPUs
16 GB RAM
50 GB Disk Space

For a pet project or an MVP, this is incredibly generous. Let’s get your app up and running in 4 simple steps.

Step 1: Create a New Space

Go to Hugging Face and create an account if you don't have one.

Click on your profile picture -> New Space.
Name your space (e.g., my-awesome-app).
Choose a License.
In Select the Space SDK, choose Docker and select Blank.
Keep the Space hardware on the Free tier.
Click Create Space.

Step 2: The Golden Rule (Port 7860)

Here is the most important part of this tutorial: Hugging Face Spaces route traffic exclusively to port 7860.

Whatever framework you are using (NestJS, Next.js, Express, etc.), you must expose and run your application on port 7860 inside your container.

Step 3: Write Your Dockerfile

Let’s say you are deploying a Next.js or Node.js application. You need to create a Dockerfile in the root of your repository.

Here is a ready-to-use boilerplate for a Node-based environment:

# Use a lightweight Node.js image
FROM node:18-alpine

# Set the working directory
WORKDIR /app

# Copy package.json and install dependencies
COPY package*.json ./
RUN npm install

# Copy the rest of your application code
COPY . .

# Build your app (if you are using Next.js or TypeScript)
RUN npm run build

# EXPOSE THE HUGGING FACE PORT
EXPOSE 7860

# Start the application on port 7860
# Make sure your server dynamically accepts the PORT env variable or is hardcoded to 7860
ENV PORT=7860
CMD ["npm", "start"]

Step 4: Push Your Code

Hugging Face Spaces act just like Git repositories. You have two options:

Upload your files directly via the browser interface in the "Files" tab.
Clone the repository locally and push your code via Git:

git clone https://huggingface.co/spaces/YOUR_USERNAME/YOUR_SPACE_NAME
cd YOUR_SPACE_NAME
# Add your app files here, including the Dockerfile
git add .
git commit -m "Initial commit: App setup and Dockerfile"
git push

The Result

Once you push the code, Hugging Face will automatically start building your Docker image. You can watch the logs in real-time in the "Logs" tab. Once the build is successful, your app will be live and accessible via a public URL!

Wrapping Up

Using Hugging Face Docker Spaces is a game-changer for deploying full-stack MVPs, testing complex architectures, or just showcasing your portfolio projects without worrying about hosting bills.

Have you ever tried using Hugging Face for non-ML projects? Let me know in the comments below! 👇