React in Frappe - After yarn build components are not rendering

Frappe Framework
, , ,
1

Installed react in frappe using this command
bench add-spa
Inside the routes that component is not rendered after yarn build. In 8080 its working.
after yarn build that lorem text is rendering. That home component not rendering in my /elevate path where i mentioned in hooks.py and pacakge.json

I am using dns setup. i have three sites.
Frappe Framework: v15.x.x-develop () (develop)
bench --version 5.22.3

Please help for this and give solution to make this work sir @buildwithhussain @nikkothari22
This is my app.tsx file

import "./App.css";
import { FrappeProvider } from "frappe-react-sdk";
import Home from "./Home";
function App() {
  return (
    <div className="App">
      <FrappeProvider>
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Perspiciatis
        blanditiis doloremque ex magnam corporis beatae totam quos consequatur
        suscipit omnis quis dolores, velit repudiandae quaerat alias eaque
        necessitatibus nulla ullam.
        <BrowserRouter>
          <Routes>
            <Route path="/" element={<Home />} />
          </Routes>
        </BrowserRouter>
      </FrappeProvider>
    </div>
  );
}

export default App;


IN Console i am getting this error:

Inter.woff2:1 
        
        
       Failed to load resource: the server responded with a status of 404 (NOT FOUND)
12The resource <URL> was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate `as` value and it is preloaded intentionally.
elevate:1 The resource https://app.elevateresume.ai/assets/frappe/dist/js/frappe-web.bundle.FLIQV7DK.js was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate `as` value and it is preloaded intentionally.
2

sorry sir , I dont know much about react .

1 Like
3

Okay sir thankyou

4

You need to set a basename in React Router since it’s being served on a different path.

Example: if your React app is supposed to run on /dashboard, the basename needs to be dashboard.

Example in Raven:

  1. ENV file: Raven/raven-app/.env.production at develop · The-Commit-Company/Raven · GitHub
  2. App.tsx: Raven/raven-app/src/App.tsx at develop · The-Commit-Company/Raven · GitHub
2 Likes
5

Thankyou sir its working

6

Hi sir,
After installed react. In 8080 my api’s are working. After yarn build i am getting response like this only. how to make that work ??
In common_site_config.json i added ignore_csrf : 1

	<link
		href="https://fonts.googleapis.com/css2?family=DM+Sans&display=swap"
		rel="stylesheet"
	/>

	<link
		rel="stylesheet"
		href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"
	/>
	<link
		rel="shortcut icon"
		href="/files/Turiyaform_Favicon-removebg-preview.png"
		type="image/x-icon"
	/>
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Turiyaforms</title>
	<script type="module" crossorigin src="/assets/turiya_app/turiya/assets/index-2aa17b24.js"></script>
	<link rel="stylesheet" href="/assets/turiya_app/turiya/assets/index-7e4036b6.css">
</head>
<body>
	<div id="root"></div>
	<script>
		window.csrf_token = "None";
	</script>
	
</body>
7

On production, you would need the CSRF token. Check the index.html file in Raven (under raven-app folder) and the raven.py file which loads the context.

1 Like
8

Hi sir,
I checked index.html in raven-app. I added like that in my code.
I don’t know how to solve. I moved that existing apis are working. Whatever i am creating new that is not working. I am getting response as that index.html file.

How to make this work sir.
raven.py file what could i do with that sir ?
Any solution.

common_site_config.json
{
“allow_cors”: “*”,
“background_workers”: 1,
“dns_multitenant”: true,
“file_watcher_port”: 6787,
“frappe_types_pause_generation”: 0,
“frappe_user”: “ubuntu”,
“gunicorn_workers”: 5,
“ignore_csrf”: 1,
“live_reload”: true,
“maintenance_mode”: 0,
“pause_scheduler”: 0,
“rebase_on_pull”: false,
“redis_cache”: “redis://127.0.0.1:13000”,
“redis_queue”: “redis://127.0.0.1:11000”,
“redis_socketio”: “redis://127.0.0.1:13000”,
“restart_supervisor_on_update”: true,
“restart_systemd_on_update”: false,
“serve_default_site”: true,
“shallow_clone”: true,
“socketio_port”: 9000,
“use_redis_auth”: false,
“webserver_port”: 8000

index.html file

<html lang="en">
	<head>
		<meta charset="UTF-8" />

		<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
		<link
			href="https://fonts.googleapis.com/css2?family=DM+Sans&display=swap"
			rel="stylesheet"
		/>

		<link
			rel="stylesheet"
			href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"
		/>
		<link
			rel="shortcut icon"
			href="/files/Turiyaform_Favicon-removebg-preview.png"
			type="image/x-icon"
		/>
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Turiyaforms</title>
		<script type="module" crossorigin src="/assets/turiya_app/turiya/assets/index-99b6b423.js"></script>
		<link rel="stylesheet" href="/assets/turiya_app/turiya/assets/index-7e4036b6.css">
	</head>
	<!-- <body>
		<div id="root"></div>
		<script>
			window.csrf_token = "{{ frappe.session.csrf_token }}";
		</script>
		<script type="module" src="/src/main.tsx"></script>
	</body> -->

	<body>
		<div id="root"></div>
		<script>
			window.csrf_token = '{{ csrf_token }}';
					  if (!window.frappe) window.frappe = {};

					  window.app_name = "{{ app_name }}";

					  frappe.boot = JSON.parse({{ boot }});
		</script>
		
	</body>
</html>