I have recently put an admin-on-rest app into production and it works great. However, when I update the app, the updated files within my project src directory are cached. For example I made a change to the restClient.js file, but this only gets loaded after users do a CTRL+F5 in the app.
What is the recommended way to handle this? Can I somehow add a cachebust to the files? Or should I simply set expires in the index.html file head section?
Ps. this questions is maybe more related to React apps in general then admin-on-rest..
Related
I am making a Single-Page React App [website]. Therefore, most of the links are on the same page, with ID #s, and that works fine for now.
The WIP present version of this particular app in question can be found here, for reference:
https://iworks.netlify.app/
In the Footer component, I have made a 'Legal' links' UL with Copyright, Privacy Policy and TOS, as standard HTML Files. These three basic HTML Files are placed in a sub-folder in the SRC folder itself, in production. This sub-folder is named 'html', and the links are set to open in a new tab.
The question is, how do I make React to recognise and build this sub-folder in the app, and to open these links relatively?
[Since these pages are not 'built' into the app, they certainly do not get included in the Build either. Now, one simple solution is definitely to just put them manually into the build, later on; but I also want to learn the fool-proof method to do this correctly. Hence this enquiry.]
Most of the discussions relating to React Routing on the web seem to either specify multi-page apps, setting components to open separately; or to place the entire react app in a sub-folder. However, I just want to manage these three links (i.e. HTML pages in 'html' sub-folder) as independent entities (for now).
What would be the most efficient manner to achieve this?
Duplicate of Is there a way to link non-react html files in a react app?
Just place your html files inside the public folder of you create-react-app application.
If you are not using cra, just place the html files in the folder of your web server set up to serve static content.
I made the shift from Vue over to React and I enjoy using the CRA tool to make interfaces on SharePoint. My normal methodology involves building the app and linking the build index.html file to a SharePoint Content Editor Web Part (CEWP).
I recently needed to have two CRA builds on the same page and I am running into the issue where control of the DOM by one build overwrites the content of the other build on the page.
It is now my understanding that multiple CRAs cannot exist on the same page. I do not want to eject my apps. In my research, it seems that webpack is assigning this["jsonpFunction...] to both apps. One suggestion I read involved finding and replacing all instances of this in one of the apps and changing it to "window.jsonpFunction...". I could not get that working either.
I want to continue using CRA and linking the index.html of the builds to different web parts on the same page.
Any suggestions appreciated.
Very Respectfully,
I solved my SharePoint on-premise issue with multiple React builds working in separate web parts by doing the following.
In package.json ensure the "name" field is unique. Also, ensure you have a "homepage" variable set to the location you intend to copy the build index.html file.
In index.js set the document.getElementById to a unique name not used by other React projects that will exist on the same page.
In index.html make sure the name used for the root div is identical to the one used in step 2 above.
In the manifest.json, provide a short name and name for your App. This step doesn't seem mandatory but I did it for consistency in my projects.
Now you can build and copy to SharePoint. I use Content Editor web parts with each pointing to the applicable index.html file for the app. Works great!
I write my first Gatsby Page. I also use Laravel as backend server.
In my project i have many slug pages. I used createPages and api connection to create them. User can add files like images, audio files and pdf. When it happen, page should change a bit content and show this file on specify address. Develop version works fine (i bind button to start npm run refresh). I used gatsby refresh endpoint and add to scripts:
"refresh": "curl -X POST http://localhost:8000/__refresh"
And it's work fine. But i don't know how change this to use it properly on production build. Can anyone help me? Thanks
The ENABLE_GATSBY_REFRESH_ENDPOINT environment variable is only working on development. According to the documentation:
During local development, it can be useful to refresh sourced content
without restarting the development server. To facilitate this, Gatsby
exposes an environment variable called ENABLE_GATSBY_REFRESH_ENDPOINT.
What you need is called a webhook. Basically, a webhook is a way for an application to trigger a change that happens in real-time in a CMS.
Each CMS has its own way of implementing webhooks, but the idea is to trigger a build process once a change in your CMS occurs.
I am using webpack to bundle a react app in a js file which I want add to client site. So I end up with a app.js and I can provide a url for where the file is hosted to clients https://example.mysite.com/apps/app.js and this can be included via a script tag on client site. Simple enough.
The issue I might run into here is browser side caching. I can't use version tags here because asking a client to continuously update code on their site is not a realistic expectation.
Webpack hashing is also not an option because this would mean updating the file on the client side, which again is something I would like to work around.
Is there a way to prevent my app.js file from being cached and fetching a new version of the file every time the app.js file has changed?
I am having an issue where my grunt build file is building correctly, but the website I'm working on is not getting all of the css files. It is only getting the master.css file. I'm using nodejs, with kraken, on top of express. I can't tell if there is some configuration option I need to change, I don't really know where I would do that.
For anyone interested, the issue was with the changing structure of the project. Going from angular to a dustjs w/ backbone combo changes the project form a SPA structure to a multi-page structure. This makes a huge difference because now instead of sending everything at once we are sending pages as they are needed, this also means that when a user switches to a different view, the server will be building an html version of that view and sending it back as fully fleshed out html. When the server builds the page it has access to the file structure, which means that the build folder that was necessary for the angular project, is no longer necessary.