404 in "Production Mode"

I am experiencing 404 in production mode, meaning that I do a npm build start and then start nextjs with dev=false. A simple page refresh fixes the problem. I have verified that the pages are indeed built and watched the console to make sure it is not building the page and then serving it the next time.

Expected Behavior The expected behavior is to serve up the pages quickly.

Steps to Reproduce (for bugs) I have viewed the browser console and the ping to next: http://xx.xx.xx/src/_next/dad0f9e5-be81-4eaf-bf45-6c194e8158c7/page/src/districts A refresh actually sends a new http request: http://xx.xx.xx.xx/src/districts

Context I am serving up this application with a base URL. I have a Apache setup with a proxypass to port 3000 where node is running for now. I set an assetPrefix in next.config.js: const isProd = process.env.NODE_ENV === ‘production’ … assetPrefix: process.env.NODE_ENV === ‘production’ ? ‘/src/’ : ‘’

I am running a custom server, so I added: server.set(‘baseURL’, ‘/src’) server.use(${prefix},express.Router()) prefix = ‘/src’ server.use(${prefix}/static, express.static(‘static’)); server.use(${prefix}/_next, express.static(‘_next’)); I also added an include file js file that can be updated for “production” with the prefix that is references by the pages so that the links are correct. There does not seem to be a problem with the application code trying to link to the wrong route.

Your Environment Redhat Linux 7 Node 8.2.1 Nextjs 2.4.9

Note that I did have problems initially where it would load the page but next would still ping to the base address. I did not see a way to apply the assetPrefix to the url for /_next/on-demand-entries-ping

That may indeed be the problem. Any suggestions on stop gap measures or fixes to my approach are appreciated.

[rayhooker]

Part of the problem had to do with the difference between express and router and getting that formula correct. Also it has do with setting up an assetPrefix. First the assetPrefix. If you add something like the following code to next.config.js, it will add a prefix to any call for assets (e.g., static): const isProd = process.env.NODE_ENV === ‘production’ if (isProd) { console.log(“Setup assetPrefix for Production”) } else { console.log(“Setup assetPrefix for dev”) } module.exports = { webpack: function (config) { return config }, assetPrefix: process.env.NODE_ENV === ‘production’ ? ‘/src/’ : ‘’ // assetPrefix: ‘/src’
}

Next you need to setup express use and router definition. In the following example, you can see that I also have a connection MongoDB and an api route defined. Hopefully this helps. It works great:

const { MongoClient } = require(‘mongodb’) const express = require(‘express’) const next = require(‘next’)

const body = require(‘body-parser’) const dev = process.env.NODE_ENV !== ‘production’ const app = next({ dev }) const co = require(‘co’)

const { parse } = require(‘url’)

const pathMatch = require(‘path-match’) const route = pathMatch() const match = route(‘/src/school/:school/:year’) const handle = app.getRequestHandler() const MONGO_URL = ‘mongodb://localhost:27017/srcnc’ const PORT = 3000 var prefix = process.env.NODE_ENV === ‘production’ ? ‘/src’ : ‘’; console.log("Prefix is: ", prefix) if (process.env.NODE_ENV !== ‘production’) { console.log(“Not production”) } else { console.log(‘Running in Production’) }

co(function * () { yield app.prepare() console.log(Connecting to ${MONGO_URL}) const db = yield MongoClient.connect(MONGO_URL) const server = express() const router = express.Router(); server.use(body.json()) server.use((req, res, next) => { console.log(“Use body.json”,req.url) req.db = db next() }) // server.set(‘baseURL’, ‘/src’) const wrapAsync = handler => (req, res) => handler(req, res) .then(result => res.json(result)) .catch(error => res.status(500).json({ error: error.message })); // app.use(‘/api’, router); server.use(${prefix}/api/school, wrapAsync(async function(req, result) { var find_params = {}; var school = {}; if (req.query.unit_code !== undefined) { find_params.unit_code = req.query.unit_code; if (req.query.year !== undefined) { find_params.year = req.query.year; } …get stuff from the database return school } else { return result.status(404).json({err: “Need to specify unit_code”}); }; }))

server.use(`${prefix}`,router)
if (process.env.NODE_ENV === 'production') {
    prefix = '/src'
    server.use(`${prefix}/static`, express.static('static'));
}

server.use(handle);

router.get(‘*’, (req, res) => { return handle(req, res) }); server.listen(PORT) console.log(Listening on ${PORT}) }).catch(error => console.error(error.stack))

I set this up on a server with Apache (could use nginx) with ProxyPass for /src to the port I have defined for my nodeJS instance. I do npm run build when in production and setup PM2 to manage and autorestart on server reboot. It works nicely and is very fast in serving up the assets.

[fxh615]

ok i have a look at your words. thank you. @rayhooker