Installation

This guide covers the installation of Documents and how to edit your new project.

To install and edit the Documents, you need to have several prerequisites in place. Here's a list of all the essential pre-requisites for setting up and working on this project.

Deploy with Vercel

Prerequisites

1

System Requirements

  • Node.js: Make sure you have Node.js installed. The project uses npm, which comes with Node.js. Install Node.js from here.
  • NPM or Yarn: Since the project uses npm commands, ensure that npm is installed with Node.js. Alternatively, you can use Yarn if preferred.

To verify installation, run:

node -v
npm -v
2

Git

You need to have Git installed to clone the repository. Download Git from here.

git --version
3

Code Editor

You’ll need a code editor to work on the project. Common options include:

4

Required Knowledge

  • Next.js: Since this is a Next.js project, you should be familiar with Next.js basics.
  • React: The project uses React, so understanding React's component structure and hooks will help.
  • TypeScript: The project is written in TypeScript, so you should have a basic understanding of it.
  • Tailwind: The project uses Tailwind CSS for styling.
  • MDX: Markdown + JSX (MDX) is used for writing documentation.

Installation

1

Clone the Repository

First, clone the repository to your local machine using Git:

git clone https://github.com/rubixvi/rubix-documents.git

Change the directory to the project folder:

cd rubix-documents
2

Install Dependencies

Use npm to install all the required dependencies:

npm install

This will install all the dependencies listed in the package.json file, including:

  • Next.js
  • React
  • TypeScript
  • Tailwind CSS
  • MDX components
  • Other dependencies like ESLint, PostCSS, Husky, etc.
3

Running the Development Server

Start the development server by running:

npm run dev

This will start the local server, and you can open your browser at:

http://localhost:3000
4

Editing the Project

  • MDX Files: Documentation content is stored in contents/docs.
  • Components: You can edit React components in the components/ directory.
  • Tailwind: Tailwind styling are managed in tailwind.config.ts and app/globals.css.

To make any changes to the project, open the files in your editor and modify them as needed.

Required:

The project's search functionality relies on the Husky's automation to build search-data/documents.json ensure git commit is performed to generate this file.

5

Building for Production

Once you’ve made your changes and want to build the project for production:

npm run build

This will generate a production-ready build of the app.

6

Running Production Server

To run the production server:

npm run start

The production app will be available at:

http://localhost:3000

Optional

1

Deploying to Vercel

This project is optimized for Vercel deployment. To deploy to Vercel:

  • Go to vercel.com and sign up.
  • Link your GitHub repository and deploy the project.
  • Vercel will handle the build process for you automatically.

The production app will be available at:

http://localhost:3000
2

Linting and Pre-commit Hooks

The project uses ESLint for linting and Husky for Git hooks. These tools are configured automatically, but you can customize them in .eslintrc.json and .husky directories.

Important Information

The project's search functionality relies on the Husky's automation to build search-data/documents.json ensure git commit is performed to generate this file.