Next.js Discord

Discord Forum

How could I build Next.js monorepo application and deploy it to remote self-hosted server?

Unanswered
American Curl posted this in #help-forum
Open in Discord
American CurlOP
I just started using Next.js and we have an monorepo application using pnpm to manage it. I tried to build and deploy our application to a remote self-hosted server. I learned from the docker file of the docker deployment that I should use standalone to build then copy related folders and files to the remote server.
Here comes my problem: when I build at the root of the application using pnpm run build:pc (this command is to build the pc application under packages which configured the next build to build it), there's no node_modules inside the standalone folder of the output. I searched online that it's said that this configuration should be added to next.config.mjs: 
experimental: {
  outputFileTracingRoot: path.join(__dirname, '../../')
},

But when I have this configuration, the server.js would be missing in the standalone folder. What should I do for this case? What am I missing for building monorepo application? Any help would be greatful, thanks.

45 Replies

Basset Bleu de Gascogne
What is your Dockerfile? I'm using this at the moment from the documentation and works fine: https://github.com/vercel/next.js/blob/canary/examples/with-docker/Dockerfile
I'm personally building the app on the server I host on. Nothing too fancy, just running that Dockerfile from a docker compose. What's your setup like?
American CurlOP
I didn't use the docker file yet. Because I want to manually do the build process first to make sure it works well, but it didn't.
I'm not sure if I'm doing something wrong.
@Basset Bleu de Gascogne What is your Dockerfile? I'm using this at the moment from the documentation and works fine: https://github.com/vercel/next.js/blob/canary/examples/with-docker/Dockerfile
American CurlOP
Yes, that's the one I found then I realized that there's standalone can be used to build and deploy. So I tried to build as it suggested, but got no luck. Could you help me with this?
Basset Bleu de Gascogne
I'm just building and serving the code with the linked Dockerfile, at the end it says this CMD HOSTNAME="0.0.0.0" node server.js which starts and hosts the server. Here's my next.config.mjs, I think this is just the default one:

/** @type {import('next').NextConfig} */
const nextConfig = {
    output: "standalone"
};

export default nextConfig;
American CurlOP
If I'm using this, the node_modules would not be produced to the standalone folder, I don't know why.
Basset Bleu de Gascogne
Here's my .next when running npm run build:
American CurlOP
I have a monorepo application, say the project is myapp, inside packages there are pc, mobile which are different Next.js application. I build it from myapp.
Basset Bleu de Gascogne
I have a similiar setup, I'm running the npm scripts inside my nextjs folder. On GitHub actions etc I just cd nextjs before running scripts like npm run lint
I think you could just create a package.json in the root and have scripts there like npm run build: cd nextjs && npm run build but it may cause weird some errors
American CurlOP
Seems it's caused by this, I have to run it from the root folder as it's monorepo application, so every dependencies are installed there.
So the issue should be how can I link the node_modules to the specific sub application.
experimental: {
  outputFileTracingRoot: path.join(__dirname, '../../')
},

This is for doing that, but somehow it caused the server.js of standalone missing.
Basset Bleu de Gascogne
Good you got it fixed! If you're running Linux you can use move command mv for moving the node_modules
American CurlOP
Nope😆
Basset Bleu de Gascogne
You can make docker containers for all the apps in subfolders, they don't interact with each other unless you make them
@American Curl js experimental: { outputFileTracingRoot: path.join(__dirname, '../../') }, This is for doing that, but somehow it caused the `server.js` of standalone missing.
American CurlOP
I mean when I added this, the server.js inside the standalone folder will be missing.
It should be server.js that be used to start the application as I learned, is that right?
Basset Bleu de Gascogne
Yep 👍
American CurlOP
So based on my testing that this configuration is "conflicting" with the default standalone build.
If I remove that the dependencies would be missing, if I add that the server.js would be missing.
American CurlOP
Yeah, I read the documentation again that maybe the second part is to fix this?
Why am I feeling this is so complicated to build and deploy to remote server using Next.js? Is that because I'm using monorepo application?
I assumed all the cases should be considered that the deployment section should've covered all the deployment scenarios 😄
I just started using React and Next.js so just trying to figure if I'm thinking it in a wrong way.
Thank you a lot for the help.
Basset Bleu de Gascogne
No worries, good luck with your journey! Monorepos aren't as popular anymore I think, microservices seem to be the trend now (=splitting the code into multiple codebases/repositories). Personally I'm fan on monorepos
American CurlOP
Yeah, monorepo helps in some cases.
Here will be the ouput of the standalone folder that the server.js is missing ToT
Basset Bleu de Gascogne
And if you have own codebases for mobile/desktop for the same app and both are NextJS, you should probably combine them. If you are using Tailwind, responsive design is pretty easy: https://tailwindcss.com/docs/responsive-design
American CurlOP
Yeah, you are right.
I started using Tailwind CSS in this project, and felt it's cool.
Responsive is easy using it.
It's a bit complicated that the decision is made before the technologies used, haha
Basset Bleu de Gascogne
Yeah, writing normal css with responsive design in mind feels pretty miserable now after using Tailwind :D
American CurlOP
At least it's cool for me, for now.
Basset Bleu de Gascogne
Yeah NextJS team seems to really recommend it and I see why
American CurlOP
Yes, that's the default option when you create a Next.js application I think.
I tried it because its suggestion.
And find it's really cool when you understand how it works.
Basset Bleu de Gascogne
Yep
American CurlOP
Finally I figured it out by using standalone mode. As I tested that I have to copy following resources from the .next folder:
cp -r node_modules /app/
cp -r packages/pc_portal/public /app/
cp -r packages/pc_portal/.next/BUILD_ID /app/.next/
cp -r packages/pc_portal/.next/*.json /app/.next/
cp -r packages/pc_portal/.next/server /app/.next/
cp -r packages/pc_portal/.next/standalone/* /app/
cp -r packages/pc_portal/.next/static /app/.next/

app is my deployment folder. After copying all these files to the app folder as suggested structure, then I can start the server using node server.js.