Expose a build from next js

Help
, ,
1

Hi everyone,

I’m kind of new to web developpment so I might not understant the whole logical of what I’m trying to do but here is the context. I’ve developped my own CMS in react, no back, but then I’ve realized the SEO of my websites would be better using SSR, so I start over the website part in express with node js. But since it’s the most complex part I want to touch as little as possible to my administration part, still in react. From the server side, I’m calling my react built for the adminisatration part.

Everything works perfectly fine in local. But once deployed, only the displayed part is working well, the admin part has the error “Not found”

Here is the organization of my files

CMS Project
|server
|>index.js
|front_React
|>build
|package.json
|vercel.json
|.vercelignore

Here is how i call the build in my index :

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

const app = express();

app.use(express.static(path.join(__dirname, 'public')));
const reactBuildPath = path.join(__dirname, '../Front_React/build');
app.use('/admin', express.static(reactBuildPath));

app.get('/admin/*', (req, res) => {
  res.sendFile(path.join(reactBuildPath, 'index.html'));
});
app.use('/', routes);

And here is my vercel.json :

{
    "version": 2,
    "builds": [
      {
        "src": "server/index.js",
        "use": "@vercel/node"
      },
      {
        "src": "Front_React/build/**",
        "use": "@vercel/static"
      }
    ],
    "routes": [
      {
        "src": "/admin/_next/static/(.*)",
        "headers": { "cache-control": "public, max-age=31536000, immutable" },
        "dest": "/_next/static/$1"
      },
      {
        "src": "/admin/(.*)",
        "dest": "server/index.js"
      },
      {
        "src": "/(.*)",
        "dest": "server/index.js"
      }
    ]
  }

here is my scripts in package.json :

  "scripts": {
    "build": "npm run build-admin",
    "start": "node server/index.js",
    "dev": "nodemon server/index.js",
    "build-admin": "cd Front_React && npm install && npm run build",
    "test": "npm run jest"
  },

finally, here is the configuration of my vercel project :

image
image1324×825 45.8 KB

image
image1403×519 29.2 KB

I’m sure I’m close to the solution but I would really appreciate a few tips here !

2

If you’re having trouble deploying an Express app, this guide can help.

You can also ask v0 for suggestions tailored to your own project setup.

3

Hi @alek-cendres, thanks for sharing your topic with the community.

I think you are of to a good start so not much changes will be required. The gist is: you need to serve your frontend (React application) and Express app in different Vercel projects.

You can use the same git repository, but you’ll have to configure the root directory of your project in the Project settings for each project.

Here are the resources you can refer to get started:

I hope this helps.