CODEWITHSUNDEEP
reactjsgatsbystrapi
OmerFY
OmerFY

Reputation: 85

Can I make my React project work completely offline?

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?

Upvotes: 0

Views: 991

Answers (2)

Ferran Buireu
Ferran Buireu

Reputation: 29315

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.

Upvotes: 1

simplecreator
simplecreator

Reputation: 463

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.

Upvotes: 2

Related Questions