So I am trieng to create react app in a suitlet. but I cant figure it out how to upload the field to the file cabinet, how to call the index.html file and what to do with the node_modules folder?
for example, I have a suitelet with a HTML field, but how can I call the react from there?
Related
I am trying to use reactjs components in wordpress. I was following this tutorial -
https://jhinter.medium.com/using-react-based-web-components-in-wordpress-f0d4097aca38
Until I got stuck at the last part: I have added this as an html custom block to an empty page:
<script src="/apps/csptest-component/direflowBundle.js"></script>
<csptest-component></csptest-component>
The console prints out:
GET http://www.adminprofi.com/apps/csptest-component/direflowBundle.js net::ERR_ABORTED 404 (Not Found)
I have used FTP to put the file in a folder called apps/csptest-component in the root directory of the wordpress site and I can see that the upload was successful. Do I need to change the link that the src is pointing to? Any help is appreciated!
WordPress allows you to access files in the wp-content directory, so best practice would be to have a child theme setup and then you can upload your javascript to the directory: wp-content/themes/child/js and access it using http://www.adminprofi.com/wp-content/themes/child/js/direflowBundles.js .
It's recommended to use a child theme to ensure your script doesn't get removed when your theme is updated (plenty of resources on how to do this). Create a folder in here called js for tidiness.
EDIT: I think it will be easiest for you to upload your script to: /wp-content/themes/Divi/js folder, and then you can access your script like: <script src="http://www.adminprofi.com/wp-content/themes/Divi/js/yourscriptname.js"></script>
I'm trying to embed an existing react app to my WordPress site using the plugin ReactPress. I created a react app inside the plugin section:
and added my build folder of the existing react app inside the path where is needed (using file administrator plugin):
The Path is wp-content/plugins/reactpress/apps/dase-mural-design. The problem is when I click on the URL Slug in order to see this section (where the build folder is placed) I don't see the react app I've just uploaded, I just see header and footer and these errors:
What I'm doing wrong? How can I fix it?
Thanks in advance.
Update:
I used FileZilla to upload these files but is still not showing anything. Any idea?
I changed the package.json homepage to: "homepage": "/wp-content/plugins/reactpress/apps/dase-mural-design/build",
But in the console of the WordPress site I see:
Thanks
It's an encoding issue, try setting your site encoding to utf-8 or uploading the files of your react app with a different tool, it could be the file manager plugin is changing the encoding when uploading.
I have a react application build with create-react-app. Its using octoberCMS as the backend fetching data using Axios calls from the frontend. Till now I was developing keeping the build content of react inside a directory named 'react' in the root directory of octoberCMS installation. Hence the URL I was hitting was http://example.com/react/.
The problem is now I am done with the development phase and look forward to deployment. But I want my front-end to be served at http://example.com and backend to be served at http://example.com/backend (backend served as I want). How can I achieve this? I am fairly new to both frameworks.
I have tried keeping the build content along with the rest of the octoberCMS
First build your react app that will give you vendor.js[third party scripts] and your app.js[your actual app]
put them in to theme directory assets something
Then In Ocotber CMS make page with URL /:url? and paste your index.html content there.
it will be your root div and including js html, change path for js which points to the build js which you put in theme directory.
now what happens when anybody come to site
- we are serving same content as we do in dev build
- index.html with root tag and needed js
Now if use hit any other url like https://www.example.com/test/etc it also will be catch by /:url? (and all other requests) and home page served and our react app will work as we needed.
if any questions please comment.
I have a react app created with create-react-app. I would like to add an image not part of the react app to the offline manifest. The image is just referenced from index.html. I don't understand how I can include this in the offline manifest.
The react app is ejected.
Put the image in the public folder just as in a regular website and refer to that image. Everything in the src folder is put in a big js file after building so you cant use that
This has newbie written all over it. I have Angularjs deployed to firebase, Now I want to deploy another. Do I start from my Dashboard and create new app, for do i first do firebase Init on the directory where the Index, html file is located? The documentation seems to indicate that we startwith Firebase Init command. If so, what is the Create New app on the dashboard used or?
Create a new directory for your new AngularJS app. Be sure that neither of these directories is nested under the other, since that won't work.
Put the HTML, CSS, JS and whatever files in that directory
Create a new app from your Firebase dashboard
Run firebase init in the directory
Select the new app you just created
From then on, run firebase deploy as you usually would.