Deploying Xpulse

This guide will show you basic steps to build and deploy your Xpulse app. As Xpulse use Next.js, we recommend to read the Next.js Deployment Guilde to learn more.

Default build

Once you are done with the development, you can build your app for production with the following command:

pnpm build

This command builds the app for production to the .next folder. It correctly bundles React in production mode and optimizes the build for the best performance. The output is a Node.js server that serve your pages and API routes. You can preview it with the following command:

pnpm start

This way is recommended if you want to deploy your app to a serverless platform like Vercel where you can link your repository and deploy your app in a few clicks.

Self-hosting

Standalone build

If you want to self-host your app, Next.js can generate a standalone build that contains only needed dependencies, so you can deploy it to any hosting platform that supports Node.js or create a Docker image.

To generate a standalone build, you can directly run a build with:

NEXT_OUTPUT=standalone pnpm build

This automatically set the following configuration to your next.config.mjs file:

const nextConfig = async (phase, { defaultConfig }) => {
  return {
    output: 'standalone',
  }
}

export default nextConfig

This will create a .next/standalone folder that contains a standalone build of your app that you can run using node .next/standalone/server.js.

You can deploy this server to any hosting platform that supports Node.js

WARNING

The standalone build does not include the ./public folder neither the generated static assets, you need to use a CDN or copy them in .next/standalone/. See the Dockerfile example below.

Expand to see Dockerfile using the standalone build

# Build stage
FROM bitnami/node:18 AS build
WORKDIR /app

RUN corepack enable && corepack prepare pnpm@latest --activate

COPY package.json ./
COPY pnpm-lock.yaml ./
RUN pnpm install

COPY . .
RUN NEXT_OUTPUT=standalone pnpm build

# Runtime stage
FROM bitnami/node:18 AS prod
WORKDIR /app

RUN corepack enable && corepack prepare pnpm@latest --activate

RUN groupadd --gid 10001 xpulse
RUN useradd --create-home --uid 10001 --gid xpulse xpulse
RUN chown --recursive xpulse:xpulse /app

# Copy public files
COPY --from=build --chown=xpulse:xpulse /app/public ./public
# Copy standalone build
COPY --from=build --chown=xpulse:xpulse /app/.next/standalone ./
# Copy static files
COPY --from=build --chown=xpulse:xpulse /app/.next/static ./.next/static

USER xpulse

EXPOSE 3000

ENV PORT 3000
ENV HOSTNAME localhost

CMD ["node", "server.js"]

You can then build and run your Docker image:

docker build --tag my-xpulse-app:1.0.0  .
docker run --rm --publish 3000:3000 my-xpulse-app:1.0.0

Static export

If you want to deploy your app to a static hosting platform, a CDN or a serverless platform that does not support Node.js, you can generate a static export of your app.

To generate a static build, you can directly run a build with:

NEXT_OUTPUT=export pnpm build

This automatically set the following configuration to your next.config.mjs file:

const nextConfig = async (phase, { defaultConfig }) => {
  return {
    output: 'export',
    images: {
      unoptimized: true,
    }
  }
}

export default nextConfig

This will create a out folder that contains a static export of your app that you can deploy to any static hosting platform, you can preview it with the following command:

npx serve ./out

Expand to see Dockerfile using the export build and Nginx

# Build stage
FROM bitnami/node:18 AS build
WORKDIR /app

RUN corepack enable && corepack prepare pnpm@latest --activate

COPY package.json ./
COPY pnpm-lock.yaml ./
RUN pnpm install

COPY . .
RUN NEXT_OUTPUT=export pnpm build

# Runtime stage
FROM bitnami/nginx:1.24 AS prod
WORKDIR /app

# Copy export build
COPY --from=build /app/out ./

You can then build and run your Docker image:

docker build --tag my-xpulse-app:1.0.0  .
docker run --rm --publish 8080:8080 my-xpulse-app:1.0.0

Useful links

• Deploying Guide on nextjs.org
• Rendering Strategies on nextjs.org
• Edge and Node.js on nextjs.org
• Configuration Reference on nextjs.org