Hybrid configuration environment

[dacodekid]

My hugo app has package.json file (for ex: tailwindcss, postcss, etc) along with hugo's config.json file. DO's app platform recognize this as a node.js app.

In a same situation for python-heroko environment (i use dokku), I add runtime.txt to identify it as python app. Can we do something similar here?

[kamaln7]

Hi @dacodekid

Unfortunately there isn't a way to override the detection logic at this time. We can look into adding a Hugo+Node.js build group, but for now the best option is probably to use a Dockerfile to build the static site so you can have more control over the build logic. Another option could be to separate out the Node.js bits into a subdirectory and commit the compiled assets to Git so App Platform would only have to run Hugo.

Example Dockerfile:

FROM node:16 AS node
WORKDIR /app
COPY package.json yarn.lock ./
RUN yarn install
COPY . /app
RUN yarn build

FROM klakegg/hugo
WORKDIR /app
COPY --from=node /app .
RUN hugo -d build

For Dockerfile-based static site builds you'll need to set the output_dir like so:

name: project_name
static_sites:
  - name: client
    dockerfile_path: Dockerfile
    github:
      repo: owner/repo
      branch: main
    output_dir: /app/build

It's also important that the command that generates the static assets is entered as a RUN command and not CMD or ENTRYPOINT - as the generated files need to be ready in the build phase.

I haven't tested it but that should be the rough idea. Sorry for the inconvenience here but I hope that helps! If you run into any issues please post on the community Q&A. We closely monitor incoming questions and make sure to answer them all: https://www.digitalocean.com/community/questions/new?tags=Digitalocean%20App%20Platform (make sure to add the DigitalOcean App Platform tag).

[dacodekid]

@kamaln7

It took me several (!!!) tries, but I was finally able to use Dockerfile.

My setup was that npm itself isn't running the asset build, hugo does. It runs postcsss using postcss-cli. So all I needed was a Docker image that comes with hugo, node, postcss, postcss-cli, autoprefixer & tailwindcss. I found two solutions for this.

Option 1
Create a Dockerfile and Install everything. This file pretty much worked out of the box. Advantage on this method is that we have total control of what version of node and/or hugo that requires (hugo can be at the latest). But for some reason this file didn't bind to my localhost port for some reason (User fault for sure as I'm not a Docker expert). That brought me to.......

Option 2
klakegg/hugo:ext-alpine[-onbuild / ci] all comes with all the above packages except tailwindcss. They all will fail when they run hugo build command and complain that there is no tailwindcss (even it runs npm install command). That brought me to this issue and this solution. With this option, we do not have control over either hugo or node's version (it doesn't have latest version of hugo as of I'm typing this). I believe I can live with that - more importantly it works out of the box both in my local & DigitalOcean (just set the target directory to /target/). All I needed was

# .DO/app.yaml

name: project_name
static_sites:
  - name: client
    dockerfile_path: Dockerfile
    github:
      repo: owner/repo
      branch: main
    output_dir: /app/build

# .dockerignore

.git/
node_modules/
static/css/
static/img/
public/

# .hugo-onbuild.sh

npm install -g tailwindcss

# Dockerfile

FROM klakegg/hugo:ext-alpine-onbuild

WORKDIR /app

COPY . /app

RUN hugo -d build

and they all lived happily ever after !! Hope it helps someone else as well. Please feel free to close this issue.

EDIT: Added Dockerfile code.

[dacodekid]

Here is my clone of this repo. Just tested it in digitalocean app platform and it works.