Search code examples
javascriptreactjsffmpegserver-side-renderingvercel

How to host a react.js ssr on vercel?

I want to host a react.js server side rendering because of ffmpeg killing me with SharedArrayBuffer is not defined

I've tried so many hosting service provider like firebase but now I want to host it to Vercel but I don't know how to make it works with react ssr. Can anyone help me?

When I run 'ssr' command in my machine it's work and ffmpeg is not throwing 'bad memory' or 'SharedArrayBuffer is not defined' but when I run it in vercel build command it stucks but the index.js/server.js is running I know because the main script is running and won't stop so the build is stuck but any solution? I've search the problem but I guess nobody haven't asked this yet

A picture of directory

and this a code of package.json

{
  "name": "ultimatesheep-vidreverse",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@babel/preset-env": "^7.18.10",
    "@babel/preset-react": "^7.18.6",
    "@babel/register": "^7.18.9",
    "@ffmpeg/core": "^0.11.0",
    "@ffmpeg/ffmpeg": "^0.11.0",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.3.0",
    "@testing-library/user-event": "^13.5.0",
    "bootstrap": "^5.2.0",
    "cors": "^2.8.5",
    "ignore-styles": "^5.0.1",
    "react": "^18.2.0",
    "react-bootstrap": "^2.5.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "uuid": "^8.3.2",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "ssr": "npm run build && node backend/index.js",
    "deploy": "npm run build && firebase deploy",
    "git" : "git add . && git commit -m 'ahawdaw' && git push -u origin main"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "externals": {
    "react": "React"
  },
  "description": "This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).",
  "main": "backend/index.js",
  "keywords": [],
  "author": "",
  "license": "ISC"
}

my vercel settings

Solution

  • if you're having the same problem as me in the past, try checking out next.js and I fixed all the problem I had!