DEV Community

Cover image for Generate offline documentation of reactjs in 5 minutes
naveennamani
naveennamani

Posted on • Updated on

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


Enter fullscreen mode Exit fullscreen mode

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



code .


Enter fullscreen mode Exit fullscreen mode

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.

Scripts in package.json file

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. ```bash

yarn install

1. Run the build script using
    ```bash


yarn build


Enter fullscreen mode Exit fullscreen mode
This will generate the required static HTML, js, css and all assets in the **public** folder.
Enter fullscreen mode Exit fullscreen mode
  1. 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!
Enter fullscreen mode Exit fullscreen mode

Top comments (11)

Collapse
 
tdamilola profile image
Taiwo Damilola

React-Native offline doc please....

Collapse
 
naveennamani profile image
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.

Collapse
 
tdamilola profile image
Taiwo Damilola

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

Thread Thread
 
naveennamani profile image
naveennamani

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

Collapse
 
naveennamani profile image
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 :)

Collapse
 
arielmeee profile image
arielmeee

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

Collapse
 
naveennamani profile image
naveennamani

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

Collapse
 
arielmeee profile image
arielmeee

Thanks!

Collapse
 
aziz_sokhibov profile image
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

Collapse
 
naveennamani profile image
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.

Collapse
 
naveennamani profile image
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.