React Path Settings How to do that?

Hi @buildwithhussain

In past i followed your video to use react in frappe.
We added path in type generation settings
for example folder path:turiya/src app name: app

Right now i created new frappe app. I added react i gave name as elevate.
after yarn build i check with /elevate there is no page.

Is that type geneartion settings is necessary ?
https://trial.com:8080
after yarn build in which name this will run? where could we setup this.

I installed frappe types now type generation settings is not coming in app?

Kindly help
thankyou

No, it is not required. Only needed if you want to generate TS types for your DocTypes.

Depends on what you named your dashboard while setting up. You can check package.json file to see what the html file is being named to, as well as hooks.py file: check website_route_rules hook.

1 Like

@buildwithhussain
Webhooks :
website_route_rules = [{‘from_route’: ‘/elevate/path:app_path’, ‘to_route’: ‘elevate’},]

package.json:
{
“name”: “elevate”,
“private”: true,
“version”: “0.0.0”,
“type”: “module”,
“scripts”: {
“dev”: “vite”,
“build”: “vite build --base=/assets/elevate_resume/elevate/ && yarn copy-html-entry”,
“lint”: “eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0”,
“preview”: “vite preview”,
“copy-html-entry”: “cp …/elevate_resume/public/elevate/index.html …/elevate_resume/www/elevate.html”
},

In 8080 component is rendering. After yarn build
/elevate has empty page. Is everything okay. Or i need to change anywhere ??

this is your frontend path, change this to whatever you want in hooks.py and package.json

Okay sir @buildwithhussain . Here issue is i given name as /elevate. In 8080 its running. After build /elevate page not rendering any component.

I don’t know why how to solve that. Hooks.py and package.json everything looks fine regarding your solution.
But after build /elevate not even working.

yarn run v1.22.22
$ vite build --base=/assets/elevate_resume/elevate/ && yarn copy-html-entry
vite v5.2.10 building for production...
✓ 78 modules transformed.
../elevate_resume/public/elevate/index.html                              0.61 kB │ gzip:   0.36 kB
../elevate_resume/public/elevate/assets/linksecthree-CNGOsAhJ.png        6.89 kB
../elevate_resume/public/elevate/assets/elevatelogoblack-BxhgQZcX.svg   11.84 kB │ gzip:   4.51 kB
../elevate_resume/public/elevate/assets/elevatelogowhite-B_2GA82d.svg   11.91 kB │ gzip:   4.53 kB
../elevate_resume/public/elevate/assets/imagefour-BQv_eMu_.png          25.97 kB
../elevate_resume/public/elevate/assets/linksecone-Bk6E09N2.png         28.14 kB
../elevate_resume/public/elevate/assets/primeicons-C6QP2o4f.woff2       35.15 kB
../elevate_resume/public/elevate/assets/imagethree-CcMV5Ylh.png         48.40 kB
../elevate_resume/public/elevate/assets/imagetwo-Crwu5l0I.png           49.16 kB
../elevate_resume/public/elevate/assets/primeicons-MpK4pl85.ttf         84.98 kB
../elevate_resume/public/elevate/assets/primeicons-WjwUDZjB.woff        85.06 kB
../elevate_resume/public/elevate/assets/primeicons-DMOk5skT.eot         85.16 kB
../elevate_resume/public/elevate/assets/primeicons-Dr5RGzOO.svg        342.53 kB │ gzip: 105.26 kB
../elevate_resume/public/elevate/assets/imageone-D7FpcTo_.png          576.85 kB
../elevate_resume/public/elevate/assets/Header-Dx-2RTii.css              1.08 kB │ gzip:   0.52 kB
../elevate_resume/public/elevate/assets/About-BxvTAo90.css               4.24 kB │ gzip:   0.94 kB
../elevate_resume/public/elevate/assets/index-B4jXpOlQ.css             529.09 kB │ gzip:  55.50 kB
../elevate_resume/public/elevate/assets/Home-CmOpP7ud.js                 0.11 kB │ gzip:   0.12 kB
../elevate_resume/public/elevate/assets/About-BJdAjT7G.js                4.02 kB │ gzip:   1.26 kB
../elevate_resume/public/elevate/assets/Header-BjAF6BJK.js              89.98 kB │ gzip:  23.54 kB
../elevate_resume/public/elevate/assets/index-CZ-oZUOx.js              265.59 kB │ gzip:  86.62 kB
✓ built in 3.59s
$ cp ../elevate_resume/public/elevate/index.html ../elevate_resume/www/elevate.html
Done in 4.58s.


Build command. Any solution sir

I create another app also. i installed there also i am getting same issue.
in 8080 its working after build its not working.
@buildwithhussain
@nikkothari22

bench add-spa
Dashboard Name [dashboard]: turiya
App Name: turiya_app
Which framework do you want to use? (vue, react) [vue]: react

In app.tsx
your given sample code is working after build also.
if we render another component in App.tsx

for example


<Route path=“/” element={}/>

It’s not rendering this Home component after build.

Hi :wave:t3:

After running build, can you please check your www directory to see if a file named elevate.html was generated or not?

Also, I would suggest to check Raven’s source code for checking if you are missing any React router configuration.

1 Like

I forgot to add .env.production now that one is working sir.
I have one issue.
From my old instance i moved one app to new instance. I moved doctypes. I created react setup and did yarn build.

Existing python code working properly. Created new api’s are not working. i am getting response like this how to solve sir.

Request URL:

/api/method/turiya_app.api.get_data

Request Method:

GET

Status Code:

200 OK

<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 = "None";
		</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({
                'lang': 'en',
                'sysdefaults': {
                    'float_precision': 3,
                    'date_format': 'dd-mm-yyyy',
                    'time_format': 'HH:mm:ss',
                    'first_day_of_the_week': 'Sunday',
                    'number_format': '#,##,###.##'
                },
                'time_zone': {
                    'system': 'Asia/Kolkata',
                    'user': 'Asia/Kolkata'
                },
                'assets_json': {
                    'bootstrap-4-web.bundle.js': '/assets/frappe/dist/js/bootstrap-4-web.bundle.FOZOVELL.js',
                    'controls.bundle.js': '/assets/frappe/dist/js/controls.bundle.BCADTOKS.js',
                    'data_import_tools.bundle.js': '/assets/frappe/dist/js/data_import_tools.bundle.M3NNVJKU.js',
                    'desk.bundle.js': '/assets/frappe/dist/js/desk.bundle.7WDHN5GS.js',
                    'dialog.bundle.js': '/assets/frappe/dist/js/dialog.bundle.XIPKSCYB.js',
                    'form.bundle.js': '/assets/frappe/dist/js/form.bundle.7BSWP43R.js',
                    'frappe-web.bundle.js': '/assets/frappe/dist/js/frappe-web.bundle.7NGVU2HT.js',
                    'libs.bundle.js': '/assets/frappe/dist/js/libs.bundle.TIV7ZGVY.js',
                    'list.bundle.js': '/assets/frappe/dist/js/list.bundle.THHJ2UTR.js',
                    'logtypes.bundle.js': '/assets/frappe/dist/js/logtypes.bundle.EKN7LWKW.js',
                    'onboarding_tours.bundle.js': '/assets/frappe/dist/js/onboarding_tours.bundle.RAUR6X4Z.js',
                    'report.bundle.js': '/assets/frappe/dist/js/report.bundle.THUMKTDE.js',
                    'sentry.bundle.js': '/assets/frappe/dist/js/sentry.bundle.IPS6PK2M.js',
                    'telemetry.bundle.js': '/assets/frappe/dist/js/telemetry.bundle.LKEZCADB.js',
                    'user_profile_controller.bundle.js': '/assets/frappe/dist/js/user_profile_controller.bundle.ZJ6AYZ5P.js',
                    'video_player.bundle.js': '/assets/frappe/dist/js/video_player.bundle.DUYYLSFO.js',
                    'web_form.bundle.js': '/assets/frappe/dist/js/web_form.bundle.UUYJRZEQ.js',
                    'form_builder.bundle.js': '/assets/frappe/dist/js/form_builder.bundle.DKA67WXT.js',
                    'print_format_builder.bundle.js': '/assets/frappe/dist/js/print_format_builder.bundle.5PJIL4OI.js',
                    'workflow_builder.bundle.js': '/assets/frappe/dist/js/workflow_builder.bundle.LKQGN2IC.js',
                    'build_events.bundle.js': '/assets/frappe/dist/js/build_events.bundle.YCQHDH2E.js',
                    'file_uploader.bundle.js': '/assets/frappe/dist/js/file_uploader.bundle.4WK53RBB.js',
                    'kanban_board.bundle.js': '/assets/frappe/dist/js/kanban_board.bundle.5M6YP7JC.js',
                    'desk.bundle.css': '/assets/frappe/dist/css/desk.bundle.IP5XXUEK.css',
                    'email.bundle.css': '/assets/frappe/dist/css/email.bundle.NVSCZBSU.css',
                    'login.bundle.css': '/assets/frappe/dist/css/login.bundle.GGWIGUUV.css',
                    'print.bundle.css': '/assets/frappe/dist/css/print.bundle.DUOVY4X4.css',
                    'print_format.bundle.css': '/assets/frappe/dist/css/print_format.bundle.ENS6KOQC.css',
                    'report.bundle.css': '/assets/frappe/dist/css/report.bundle.RLRPQJ7Z.css',
                    'web_form.bundle.css': '/assets/frappe/dist/css/web_form.bundle.TAANOOXV.css',
                    'website.bundle.css': '/assets/frappe/dist/css/website.bundle.TTN3ZJAI.css',
                    'website.bundle.js': '/assets/lms/dist/js/website.bundle.OZX6IVRK.js',
                    'lms.bundle.css': '/assets/lms/dist/css/lms.bundle.MYYEIIYB.css',
                    'rtl_desk.bundle.css': '/assets/frappe/dist/css-rtl/desk.bundle.HTLVA2WO.css',
                    'rtl_email.bundle.css': '/assets/frappe/dist/css-rtl/email.bundle.VPQ4FHK2.css',
                    'rtl_login.bundle.css': '/assets/frappe/dist/css-rtl/login.bundle.BUDPJRW7.css',
                    'rtl_print.bundle.css': '/assets/frappe/dist/css-rtl/print.bundle.5NHI4UOY.css',
                    'rtl_print_format.bundle.css': '/assets/frappe/dist/css-rtl/print_format.bundle.KTQZDIII.css',
                    'rtl_report.bundle.css': '/assets/frappe/dist/css-rtl/report.bundle.PHUP5EQ4.css',
                    'rtl_web_form.bundle.css': '/assets/frappe/dist/css-rtl/web_form.bundle.UY3I2SU7.css',
                    'rtl_website.bundle.css': '/assets/frappe/dist/css-rtl/website.bundle.VGTFHJHS.css',
                    'rtl_lms.bundle.css': '/assets/lms/dist/css-rtl/lms.bundle.ZJW4LY2E.css'
                },
                'sitename': 'turiyatree.in'
            });
        </script>
    </body>
</html>

I did bench update --reset at that time
cannot link doppio/node_modules is that any issue ?
Building assets…
Assets for Commit 7eeb6644c8cc3d4192ff0976941ff6495ba1f7a8 don’t exist

Linking /home/ubuntu/frappe-bench/apps/doppio/node_modules to ./assets/doppio/node_modules

Cannot link /home/ubuntu/frappe-bench/apps/doppio/node_modules to ./assets/doppio/node_modules

Linking /home/ubuntu/frappe-bench/apps/lms/node_modules to ./assets/lms/node_modules

Linking /home/ubuntu/frappe-bench/apps/frappe_types/frappe_types/public to ./assets/frappe_types