Generate offline documentation of reactjs in 5 minutes

When it comes to learning a new language, framework or library, the first and important source of help comes from the documentation provided by the respective websites. But it is often difficult to go through the complete documentation immediately. And during development we need to refer to the documentation very frequently.

Having an offline version of the documentation may help to find the information faster and whenever required. Also, it helps to work offline without any distractions from the facebook notifications.

In this post, let's build the offline documentation for reactjs.

Getting the source code

The documentation for reactjs is available on reactjs.org website. The source code for this website is available as a github repository here.

Fireup a cmd, clone this repository and cd into the directory

git clone https://github.com/reactjs/reactjs.org
cd reactjs.org

Open the code editor of your choice. If using vscode, just enter

code .

Understanding the tech stack

Once we have the source code, we can see many configuration files there. The most important ones that quickly gives us all the information we need are

1. gatsby-*.js - these files tells us that Gatsby is used for generating the static HTML for the website.
2. yarn.lock - it is using yarn as the package manager.
3. vercel.json - the website is hosted on vercel

package.json

Perhaps, package.json is the one file that any webdev will start looking at when they start working on a new project. Once we open this file, we can see the dependencies of the projects and the scripts used.

From the file we can see the following scripts.

Luckily, we have the build script that we require to build the static HTML.

Commands

Now we have enough information to generate the documentation.

1. Install all the dependencies using the yarn package manager.
   

   yarn install
   

2. Run the build script using
   

   yarn build
   

   This will generate the required static HTML, js, css and all assets in the public folder.

3. Serve the documentation generated in public folder
   

   cd public
   python -m http.server // simpler
   // Or if you prefer nodejs
   yarn add global serve
   serve
   

Congratulations! We now have reactjs documentation available offline.

If you would like to have offline documentation for any framework/library you require, please tell us in the comments.

Happy coding!

Comments

[Taiwo Damilola]

React-Native offline doc please....

[naveennamani]

Hey @tdamilola I've created a repo with a collection of scripts for generating offline-docs. Please go to the repository and create an issue if you require any other tools. I'll be updating the repo with script for react-native docs soon today.

[Taiwo Damilola]

Thanks Man. just seeing this, appreciate your good work bro.

[naveennamani]

😀 thanks for the compliment, just what I wanted to finish my 50 scripts landmark which is long pending 😅

[naveennamani]

Please check the repo, I just now added the script.
github.com/naveennamani/offline-do...

Consider giving a star to the repo if you like :)

[arielmeee]

How about offline docs for Laravel? That would be helpful if you're up to it.

[naveennamani]

For sure, I'll hack a way! :)

[arielmeee]

Thanks!

[Aziz Sokhibov]

I did everything what you said in the post, but i have files in the 'public' folder, but where is index.html? how to open the main page? i did not understand it

[naveennamani]

I've just seen the repo and it is no longer using gatsby for the website. Instead it is using nextjs. next build command will only build the code needed for production app. But for export of all pages as static HTML it has next export command. But the problem is the website is using next images for serving optimised images, which is not compatible for generating HTML pages. So the best thing you can do is serve the build files using nextjs itself.

[naveennamani]

I haven't updated this article from a long time. I'll text the instructions again and will update.
Thanks for informing about it.