Hosting Nextjs on Opalstack

prashant

Has anyone built and hosted a Nextjs website/app on Opalstack?
Please share how you did this...

sean

prashant If you're using a static build of a NextJS app then you can host it here with a Nginx static-only app, eg:

Create a static app and add it to a site.
Build your NextJS static site, eg next build && next export.
Upload the static files to the directory for the app you created in step 1.
The app should now be served from the site you set up in step 1.

If you're running a NextJS app with server-side rendering then:

Create a proxy-port app and add it to a site. Make a note of the app's port assignment.
SSH to your app's shell user and run npx create-next-app inside of your app directory to install NextJS.

Edit package.json to set your app's port, for example (replace NNNNN with your port assignment):

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev -p NNNNN",
    "build": "next build",
    "start": "next start -p NNNNN"
  },
  "dependencies": {
    "next": "10.1.3",
    "react": "17.0.2",
    "react-dom": "17.0.2"
  }
}

You can then run the app in dev mode with npm run dev or production with npm start and it will be served from the site you set up in step 1.

prashant

sean Thank you Sean, that worked perfectly. 🙏

For anyone else trying this out - I also used a newer version of node (LTS 14.16.1) - some info here: https://community.opalstack.com/d/162-nvm-or-node-version-10x

If you want to use Yarn instead of npm, some helpful info here:
https://community.opalstack.com/d/151-howto-install-rails-running-on-nginxpassenger-on-opalstack/14

anjanesh

I am trying out #2 - (running a NextJS app with server-side rendering)

$ npm run start

> myapp@ start /home/username/apps/myapp
> next start -p 1234

node_modules/react-dom/cjs/react-dom-server.browser.development.js:145
var textEncoder = new TextEncoder();
                  ^

ReferenceError: TextEncoder is not defined

anjanesh

Update - this is because of an older node version (10) - I already have version 14 in ~/opt/bin for which I did :
export PATH=$HOME/opt/bin:$PATH
and it worked.

anjanesh

When we create a proxy-port app with custom port and run a command like npm run start, how do I make it stay on (running) even after closing my terminal ?

export PATH=$HOME/opt/bin:$PATH
nohup npm run start &

After I close my terminal in macOS which asks if I want to terminate for which the only other option is Cancel.
But when I goto mydomain.com, it now returns 502.

sean

anjanesh try it like this:

( nohup ~/opt/bin/npm run start > ~/logs/apps/name_of_app/stdout.log 2>&1 & )

If that doesn't work then try running it via daemonize:

/usr/sbin/daemonize -c $HOME/apps/name_of_app -e $HOME/logs/apps/name_of_app/stderr.log -o $HOME/logs/apps/name_of_app/stdout.log -p $HOME/apps/name_of_app/pid npm run start

anjanesh

sean ( nohup ~/opt/bin/npm run start > ~/logs/apps/name_of_app/stdout.log 2>&1 & )

This worked - thanks. I I have now closed my terminal and the webpage still loads.
Is there a way to get to know if the command has terminates / stopped running in between for some reason so that I can login to shell re-run it ?

sean

anjanesh I recommend you use a process manager like pm2 to keep the app running automatically. You can install it into your custom node install via npm:

~/opt/bin/npm install -g pm2

Then start the app like so:

cd ~/apps/name_of_app
pm2 start

Note that if you use pm2 then you won't need to use nohup at all, pm2 will take care of backgrounding the process for you and will keep it running.

anjanesh

Thank You very much.