File size: 2,819 Bytes
5dfa78d
5786921
11f0d5c
5786921
 
5dfa78d
 
 
 
 
5786921
5dfa78d
d69324d
5dfa78d
11f0d5c
 
5786921
 
 
 
11f0d5c
 
 
 
 
5dfa78d
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
d69324d
5dfa78d
c49bfa2
 
d69324d
 
82bf191
a59496f
 
d69324d
 
 
 
 
5786921
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
---
title: Next.js on πŸ€— Spaces
emoji: "\U0001F433\U0001F918"
colorFrom: blue
colorTo: yellow
sdk: docker
pinned: false
license: agpl-3.0
app_port: 3000
---
<h1 align="center">nextjs-docker-starter</h1>

This starter can be used to run [Next.js](https://nextjs.org/) using [Docker](https://huggingface.co/docs/hub/spaces-sdks-docker) in πŸ€— [Spaces](https://huggingface.co/spaces).

<!-- toc -->

- [Development](#development)
- [Use the Docker container locally](#use-the-docker-container-locally)
- [Dockerize an existing project](#dockerize-an-existing-project)
- [Manage your Space via GitHub](#manage-your-space-via-github)

<!-- tocstop -->

---

## Development

1. Install the dependencies: `npm i`
2. Start the local dev-server: `npm run dev`
3. Open the app via [localhost:3000](http://localhost:3000)

## Use the Docker container locally

To make sure that everything is working out, you can run your container locally:

1. [Install Docker](https://docs.docker.com/get-docker/) on your machine
2. Go into the `nextjs-docker-starter` folder
3. Build your Docker image: `docker build -t nextjs-docker-starter .`.
4. Run your Docker container: `docker run -p 3000:3000 nextjs-docker-starter`.
5. Open the app via [localhost:3000](http://localhost:3000)

## Dockerize an existing project

To add support for Docker to an existing project, just copy the `Dockerfile` into the root of the project and add the following to the `next.config.js` file:

```js
// next.config.js
module.exports = {
  // ... rest of the configuration.
  output: "standalone",
};
```

This will build the project as a standalone app inside the Docker image.

## Manage your Space via GitHub

If you want to use all the features for collaborative development on GitHub, but keep your demo on Spaces, then you can set up a GitHub action that will automatically push changes from GitHub into Spaces.

> ℹ️ Git-LFS is required for files bigger than 10MB

1. Create your repo on GitHub
2. Create a [Github secret](https://docs.github.com/en/actions/security-guides/encrypted-secrets#creating-encrypted-secrets-for-a-repository) named `HF_TOKEN` and use an [access token from Hugging Face](https://huggingface.co/settings/tokens) as its value (you must be logged in to do this)
3. Update the workflow [sync_to_hf_spaces.yml](.github/workflows/sync_to_hf_spaces.yml)
   - Configure `HF_USERNAME`: Replace `failfast` with the name of your πŸ€— user account or your πŸ€— organization
   - Configure `HF_SPACE_NAME`: Replace `nextjs-docker-starter` with the name of your πŸ€— space
4. Push the code into your repo on GitHub

This should force push changes in the **main** branch from GitHub into your πŸ€— space.

For further information, you can check out the [guide on Hugging Face](https://huggingface.co/docs/hub/spaces-github-actions).