Kevin Powell - Community•10mo ago

Vite integration on pre-existing react project.. 404 but dev server running

This is the existing project: https://github.com/nnall/CRUDApps/tree/main/signup Because the backend is already set up in my current project, I'm reluctant to scrap it and use npm create vite@latest to create a whole new react project through the vite command. I merely want to integrate it, like an npm package, and run the vite server as my dev server, which I appear to be doing (see pic) according to the terminal output when I run this script: "start": "npx vite",. But the browser at that address is giving me a 404 error. This is my config file:

// vite.config.js
import { defineConfig } from "vite";
import React from "react";
import { VitePluginReact } from "@vitejs/plugin-react";

// https://vitejs.dev/config/
export default defineConfig({
  root: "./src", // Specify the root directory
  base: "/", // Specify the base URL
  plugins: [VitePluginReact()],
  alias: {
    // Update this with your actual entry file name
    "@": "./index.jsx",
  },
});

// vite.config.js
import { defineConfig } from "vite";
import React from "react";
import { VitePluginReact } from "@vitejs/plugin-react";

// https://vitejs.dev/config/
export default defineConfig({
  root: "./src", // Specify the root directory
  base: "/", // Specify the base URL
  plugins: [VitePluginReact()],
  alias: {
    // Update this with your actual entry file name
    "@": "./index.jsx",
  },
});

and the npm packages:

"dependencies": {
    "@react-three/drei": "^9.97.0",
    "@react-three/fiber": "^8.15.15",
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "i": "^0.3.7",
    "node": "^21.2.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-native": "^0.73.2",
    "react-router-dom": "^6.21.2",
    "react-scripts": "5.0.1",
    "react-three-fiber": "^6.0.13",
    "sass": "^1.69.7",
    "three": "^0.160.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "npx vite",
    "build": "npx vite build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

"dependencies": {
    "@react-three/drei": "^9.97.0",
    "@react-three/fiber": "^8.15.15",
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "i": "^0.3.7",
    "node": "^21.2.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-native": "^0.73.2",
    "react-router-dom": "^6.21.2",
    "react-scripts": "5.0.1",
    "react-three-fiber": "^6.0.13",
    "sass": "^1.69.7",
    "three": "^0.160.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "npx vite",
    "build": "npx vite build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

GitHub

CRUDApps/signup at main · nnall/CRUDApps

Server learning apps. Contribute to nnall/CRUDApps development by creating an account on GitHub.

7 Replies

b1mind•10mo ago

What is the issue with using the create vite command and then moving the files into that project? Get away from CRApp and just use Vite from the start.

thethingisbackOP•10mo ago

ok, yea was just thinking that.. but wasn't sure if that would break the ability to run the server or something, I guess not though

b1mind•10mo ago

What server? Not seeing that part in your project xD

thethingisbackOP•10mo ago

nicknall@Nicks-Air backend % node server.js
Server is running on port 5001
Connected to the database as ID: 13

nicknall@Nicks-Air backend % node server.js
Server is running on port 5001
Connected to the database as ID: 13

? not a 'server' a db connection

b1mind•10mo ago

🤷‍♂️ I'm only seeing what you shared so if you are going to use a server/db I would use NextJS or Remix As per React docs But yea it should not matter if you are using Vite or CRApp since you are decoupled already.

thethingisbackOP•10mo ago

ok. but in terms of just creating this 3d front end, it doesn't matter that I'm not currently using NextJS right? I can still just create a new project from scratch and add my existing files to that and be okay?

b1mind•10mo ago

If you are doing a fullstack app I think its best to use yes. (Remix does it better imo) Remix was made by the same folks at React-Router it should be noted too.. Fixing the mistake that is it. If I was using something other than NodeJS for BE or if you really really wanted it to be a SPA then you would just use Vite.

Gaming

Programming

Vite integration on pre-existing react project.. 404 but dev server running