React + Django app deployment problem

Site Name: lights-camera-murder.netlify.app
Im specifically trying to run a preview off a staging branch
:white_check_mark: Having Build problems
:x: No DNS issues

The Problem lies in my build settings.
As you can see from the screenshot my publish directory (assets/bundles) is not located in the same folder as my html file.

This is what i (think) i need to set for my build settings

  • Base directory: frontend
  • Package directory: frontend/
  • Build command: npm run build
  • Publish directory: assets/bundles

BUT its impossible because if i make my base directory frontend it automatically adds β€œfrontend” to publish directory making it look like this
frontend/assets/bundles
if my basedirectory is frontend, it automatically propogates all other fields to begin with frontend/

Which inevitably causes build failure↓

9:17:34 PM: Netlify Build                                                 
9:17:34 PM: ────────────────────────────────────────────────────────────────
9:17:34 PM: ​
9:17:34 PM: ❯ Version
9:17:34 PM:   @netlify/build 29.46.5
9:17:34 PM: ​
9:17:34 PM: ❯ Flags
9:17:34 PM:   baseRelDir: true
9:17:34 PM:   buildId: 66644b9416ef150008d8f3e6
9:17:34 PM:   deployId: 66644b9416ef150008d8f3e8
9:17:34 PM:   packagePath: frontend
9:17:34 PM: ​
9:17:34 PM: ❯ Current directory
9:17:34 PM:   /opt/build/repo
9:17:34 PM: ​
9:17:34 PM: ❯ Config file
9:17:34 PM:   No config file was defined: using default values.
9:17:34 PM: ​
9:17:34 PM: ❯ Context
9:17:34 PM:   deploy-preview
9:17:34 PM: ​
9:17:34 PM: Build command from Netlify app                                
9:17:34 PM: ────────────────────────────────────────────────────────────────
9:17:34 PM: ​
9:17:34 PM: $ npm run build
9:17:34 PM: npm error code ENOENT
9:17:34 PM: npm error syscall open
9:17:34 PM: npm error path /opt/build/repo/package.json
9:17:34 PM: npm error errno -2
9:17:34 PM: npm error enoent Could not read package.json: Error: ENOENT: no such file or directory, open '/opt/build/repo/package.json'
9:17:34 PM: npm error enoent This is related to npm not being able to find a file.
9:17:34 PM: npm error enoent
9:17:34 PM: npm error A complete log of this run can be found in: /opt/buildhome/.npm/_logs/2024-06-08T12_17_34_663Z-debug-0.log
9:17:34 PM: ​
9:17:34 PM: "build.command" failed                                        
9:17:34 PM: ────────────────────────────────────────────────────────────────
9:17:34 PM: ​
9:17:34 PM:   Error message
9:17:34 PM:   Command failed with exit code 254: npm run build (https://ntl.fyi/exit-code-254)
9:17:34 PM: ​
9:17:34 PM:   Error location
9:17:34 PM:   In Build command from Netlify app:
9:17:34 PM:   npm run build
9:17:34 PM: ​
9:17:34 PM:   Resolved config
9:17:34 PM:   build:
9:17:34 PM:     base: /opt/build/repo
9:17:34 PM:     command: npm run build
9:17:34 PM:     commandOrigin: ui
9:17:34 PM:     environment:
9:17:34 PM:       - REVIEW_ID
9:17:34 PM:     publish: /opt/build/repo/assets/bundles
9:17:34 PM:     publishOrigin: ui
9:17:35 PM: Failed during stage 'building site': Build script returned non-zero exit code: 2 (https://ntl.fyi/exit-code-2)
9:17:35 PM: Build failed due to a user error: Build script returned non-zero exit code: 2
9:17:35 PM: Failing build: Failed to build site
9:17:35 PM: Finished processing build request in 15.171s

The build is failing because the npm run build command is unable to find the package.json file, leading to an ENOENT (no such file or directory) error at line 61.

I’m just starting out as an engineer and geniunely have no clue what I’m doing. This is a fun project a friend and I are doing but I do hope to use this a learning oppertunity.

This is expected. We need all the paths to be relative to base directory. So if your frontend lives in the frontend directory, we expect that your output would also be built into the frontend directory. It could be frontend/build or frontend/dist or anywhere inside the frontend folder. It’s not common to see the build output to be outside the base directory. Do you have a specific usecase that needs such a config?

1 Like

Hi! I was following [ this tutorial ]

And they said to put it in the root directory (not 100% sure why though…)

Wow, that’s a tutorial from 2017. Not sure if you should even be following it given a lot of things might have changed in the past 7 years.

By reading that post (briefly), my question for you is, are you planning to host the React frontend on Netlify and the DJango backend somewhere else? Or are you planning to run the entire thing on Netlify and somehow use Django to get server-side rendering with React?

If you’re trying to run Django on Netlify, I’m afraid you’re at the wrong place. Netlify doesn’t run Django. But if you wish to deploy your React app here and host the backend elsewhere, that’s possible. I’d personally recommend using Vite: Getting Started | Vite (vitejs.dev). If you need SSR with React, I’d recommend using Next.js.

1 Like

Unfortunately I didnt realize it was from 2017 until 3/4th of the way through haha.
After things breaking over and over again i finally restarted the whole thing and used a tutorial from this year and now everythings great!

But… oh no i dont know why i didnt realize i would need to host django somewhere else. Thanks for the insight!! i look into that