I am using Express.js on backend, and Next typescript on frontend, in order to properly connect next with a custom server, I followed the instructions in this documentation page:
Configuring: Custom Server
Here is my app.js code in express side:
const express = require('express')
//const proxy = require('express-http-proxy')
const parser = require('body-parser')
const session = require('express-session')
const dotenv = require('dotenv').config()
const {pool} = require('./routes/routes')
const pgSessionStore = require('connect-pg-simple')(session);
function nextAppWrapper(nextApp){
const app = express()
const port = 3000
const {router} = require('./routes/routes')
const cors = require('cors')
corsConfig = {
methods:'*',
credentials:true
}
app.set('trust proxy', 1) // trust first proxy
app.listen(port, () => {
console.log(`Example app listening on port ${port}`)
})
app.use(cors(corsConfig))
app.use(session(
{
store: new pgSessionStore({
pool:pool,
tableName:'session',
createTableIfMissing:true
}),
secret: process.env.SESSION_SECRET,
resave: true,
cookie: { maxAge: 365 * 24 * 60 * 60 * 1000,httpOnly: true , domain:'127.0.0.1:3000'},
saveUninitialized: true,
}))
app.use(parser.urlencoded({extended:false}))
app.use(parser.json())
app.use('/api',router)
//app.use(proxy('http://127.0.0.1:3000'))
const handle = nextApp.getRequestHandler()
app.all('*', (req, res) => {
return handle(req, res);
});
}
module.exports = nextAppWrapper
here is my code for server.ts file on Next side:
const nextAppWrapper = require('../backend/app')
const next = require('next')
const dev = process.env.NODE_ENV !== 'production';
const nextApp = next({dev})
nextApp.prepare().then(()=>{
nextAppWrapper(nextApp)
})
So every-time I try to run npm run dev
in console, and do a small change in backend, that change does not take effect unless I execute npm run dev
again,
here is my package.json dep-list for express:
"dependencies": {
"@aws-sdk/client-dynamodb": "^3.651.1",
"@aws-sdk/client-s3": "^3.651.1",
"@aws-sdk/client-ses": "^3.651.1",
"bcryptjs": "^2.4.3",
"body-parser": "^1.20.3",
"connect-pg-simple": "^10.0.0",
"dotenv": "^16.4.5",
"express": "^4.21.0",
"express-http-proxy": "^2.1.1",
"express-session": "^1.18.0",
"jest": "^29.7.0",
"nodemailer": "^6.9.15",
"nodemon": "^3.1.4",
"pg": "^8.12.0",
"pg-pool": "^3.6.2",
"rewire": "^7.0.0",
"sinon": "^19.0.2",
"slugify": "^1.6.6",
"socket.io": "^4.7.5",
"supertest": "^7.0.0",
"uuid": "^10.0.0"
}
here is my package.json dep-list on next side:
"dependencies": {
"@nextui-org/react": "^2.4.8",
"@nextui-org/tooltip": "^2.0.41",
"dompurify": "^3.1.7",
"express-http-proxy": "^2.1.1",
"hugeicons-react": "^0.3.0",
"markdown-it": "^14.1.0",
"markdown-it-jsx": "^1.1.0",
"markdown-to-jsx": "^7.5.0",
"moment": "^2.30.1",
"next": "14.2.10",
"react": "^18",
"react-dom": "^18",
"socket.io": "^4.7.5"
},
"devDependencies": {
"@types/dompurify": "^3.0.5",
"@types/markdown-it": "^14.1.2",
"@types/node": "^20",
"@types/react": "^18",
"@types/react-dom": "^18",
"eslint": "^8",
"eslint-config-next": "14.2.10",
"postcss": "^8",
"tailwindcss": "^3.4.1",
"typescript": "^5"
}
also, scripts
"scripts": {
"dev": "node server.ts",
"build": "next build",
"start": "next start",
"lint": "next lint"
}
Please note that I am using 127.0.0.1
host with port 3000