I have a React project that uses Strapi on the backend. I want to create a static version of the project that works completely offline. The offline version will just have read-only features e.g. viewing articles. By completely offline I mean I should be able to put the related HTML/CSS/JS etc. files in a folder, send it to someone and they should be able to click on index.html and start using the app.
I am thinking of looking into Gatsby but I was wondering if what I am describing is possible at all?
Check the build process of React.
You can easily run the built app completely offline, but you must reckon that no API request will work (unless you run your Strapi server locally as well). At this point, I should add, that you can run your app locally and if you have an internet connection, all requests should work correctly.
You can indeed, there's a plugin to do it (gatsby-plugin-offline) but you can achieve the same result manually.
The tricky part relies on avoiding API requests since they won't work. Having a CMS like Strapi or others doesn't make the difference because Gatsby fetches the data at the build time, no matter the source.
The previously mentioned plugin adds drop-in support using Workbox Build and precaches the pages to make them available without a connection, in your gatsby-config.js add:
plugins: [
{
resolve: `gatsby-plugin-offline`,
options: {
precachePages: [`/about-us/`, `/projects/*`],
},
},
]
You can customize the plugin by adding or inserting different files depending on your needs.
Related
I have a huge project using asp.net and jquery. I want to start migrating to react page by page (it might take a lot of time).
I would like to know what is the best practice to do it.
Can I move pages to react partially (for example half of page), and is it good approach?
Lets say I have main page A with with links to page B and C. Can I move page B and C to react, using routing, without moving page A right now?
I think I will use Vite to create and manager react project. In the production vite generates static files so I will simply host new files next to old ones in my backend server.
The problem is with development, because in this mode vite creates new server with functions like hotreload and in the result I have two diffrent servers hosting frontend asp.net and vite.
I would prefer to have just one server also for development. Is it possible to build development version with vite and copy it to server the same way like in production? Is this good approach?
I know that it would be the best to have backend and frontend server separated, but project is so huge that it is not possible in the foreseeable future
I have a request from a client to implement deep linking in our React application whereby clicking a link will take them directly into the installed app (potentially to a certain point but not sure on that yet).
To my understanding react-native and react-navigation both handle this as part of a feature set within "Linking" that they offer. However it seems excessive to import a framework just for deep linking (perhaps not though).
After googling I can only really find references to deep linking on react-native or react-navigation.
What is my best course of action?
Let's get to some basics first, then it will be clear.
In modern SPA's, say with React, it's common for the SPA to handle navigation itself. You need to use browser's history API. It's because your SPA is just a single index.html with bunch of js code, so it sort of virtual, every page is constructed by your app. In order to not reinvent a wheel, its easier to use some library for that, say react-router-dom.
But then everything works as expected, and you have deployed your app. When user wants to get some deep page, say, https://my-awesome-app.com/deep/page/1, browser will just send a request to a server, asking: "Please, server, give me a page 1.html, in folder page, in folder deep". But server doesn't have that file, because it has literally one index.html, because its a SPA application. Then we need to tell the server to re-write all deep routes to index html, here is an example for my app hosted on Netlify:
[[redirects]]
from = "/*"
to = "/index.html"
status = 200
When user will ask for that page, server will 'redirect' that request to the index.html and my react-router-dom will figure out which 'PageComponent' to render based on that path.
So, you can implement routing in your app yourself, probably using browser's History API, but I guess it might be easier to use library. But it's your call.
On the other hand if your app is not an SPA, the story might be different, because say in NextJS routing is implemented in framework itself, and if used deep linking would require different setup depending on how app is deployed.
Deep-linking is handled largely by Apple and Google server-side
https://www.adjust.com/blog/dive-into-deeplinking/
React-native provides extended functionality for deep-linking within mobile apps but normal web-applications there is no need to implement it there. Use universal links or Google specific links as standard linking within your web app to enable deep linking
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.
Are there any examples out there of injecting new ReactJS components at Runtime, e.g:
A build is deployed on production is stable and running.
We need to add a component or a new route without running through an entire deploy process.
An additional usecase : the application ships with all the components ( e.g: A CMS Module library) - Only certain components were enabled in layout at build time but need more to be added later via a config.
Approaches I have considered.
Using next getStaticPaths and then using a override in the front-end to inject client side components. This will most probably be seen at runtim
Use a more faster deploy system - This is more obvious but imagine lots of changes within a day and multiple deploys.
Any similar problems or approaches people would have tried would be great.
Update Nov 2022
If you are searching on the internet and this comes up, Zack Jackson's Module Federation supposedly achieves this and is called live code sharing via Module federation - https://module-federation.github.io/ There is a NextJS Paid plugin https://app.privjs.com/buy/packageDetail?pkg=#module-federation/nextjs-mf (supports only CSR currently)
I think you would lose out on a lot of built-in build optimizations from Next by trying to circumvent the standard build process, e.g. automatic code-splitting as described here.
However, you might find the fallback feature solves your problem entirely - the fallback feature was meant for large ecommerce sites like it sounds like you're working with. As stated at the fallback true docs:
useful if your app has a very large number of static pages that depend on data (think: a very large e-commerce site). You want to pre-render all product pages, but then your builds would take forever.
I am using create-react-app to create Single Page Websites (SPAs). I often have websites with a lot of images and content that require a minor textual change or a minor update. Is there anyway to make these without rebuilding the entire application? If I rebuild it all the image names and everything changes and the whole enchilada has to be uploaded and built for minor changes in content to the website. How can one approach this?I dont want to go back to building in PHP or another platform where individual pages can be tweaked and uploaded without having to upload everything every time there is a minor change. How are you approaching this in building react based websites?
Rebuilding a CRA should not take very long or cost much, you can use a Continuous Integration solution like Netlify to update your site programmatically based on the changes.
Or you can just build an API and write a modular site using the APIs. That is how most CMS work. You should try headless CMSs if you don't want to write all APIs yourself.
if you want to just develop frontend code and don't worry about images, videos, texts and so on you should really try and headless cms that will provide contents via API and a nice editorial console for your users.
There are a lot of them, and for sure you will find one that suits your needs.
I work in ContentChef ( full disclaimer here!!!) which also provides a nice SDK in js or typescript so you can easly get started.
If you want to give it a try: https://www.contentchef.io/developers/headless-cms-for-react