DEV Community

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

Posted 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.

    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!

Discussion (3)

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 Author

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

Collapse
arielmeee profile image
arielmeee

Thanks!