Deploying the Flutter Documentation Website In Local
Tags: flutter, documentation, beginners
Published: 2020-12-16 17:57:54

Hello Readers 👋,

As everyone hopes to set up the flutter documentation website locally so that we don't have to constantly need to go online to access the documentation whenever we need any information on any topics. So today's let's try to set up the documentation website locally.

## Let's Setup the Prerequisites

Let's go to the **[Flutter/ Website](https://github.com/flutter/website)** GitHub repository provided by the Flutter Organisation which contains the source code for the documentation website which we are going to use for hosting our website.

Now let's check the [readme.md](http://readme.md) file which got the information on how to set up the website locally.

These are the required tools. Install the following tools, if you don't have them already.

- bash, the Bourne shell.
- nvm, the Node Version Manager.
- rvm, the Ruby Version Manager.
- Flutter (You get Dart when you get Flutter. Confirm with which flutter and which dart.)
- GNU diffutils version 3.6 or later.

```
$ brew install diffutils
```

These instructions assume you're using bash -- setup might not work if you use another shell. But just follow along, for now, I will mention the change in setup when we require.

Next main prerequisite is cloning the source code for the website 

> This repo has git submodules, which affects how you clone it.

- Clone this repo and its submodule *at the same*, use the `-recurse-submodules` option:

```
$ git clone --recurse-submodules https://github.com/flutter/website.git
```

> At any time during development you can use the git submodule command to refresh submodules:

```
  $ git pull
  $ git submodule update --init --remote
```

### Run installation scripts

> It is safe to (re-)run all of the commands and scripts are given below even if you already have the required packages installed.

**Open a bash terminal/command window** and execute the following commands:

1.After you have cloned this repo, change to the *root of this repo*:

```
  $ cd <PATH_TO_REPO>
```

2.Run the `env-set.sh` script to initialize environment variables, and to install/use required Node & Ruby version:

```
  $ source ./tool/env-set.sh
```

3.Run `before-install.sh` to install the core set of required tools:

```
  $ ./tool/before-install.sh
```

4.Run `install.sh` to install everything else needed to build this site:

```
  $ ./tool/install.sh
```
> Any time you create a new terminal/command window to work on this repo, repeat steps 1 and 2 above.

### Running Installation script for the ZSH shell

Above methods result in an error as
```
travis_fold command not found
```
So now let's follow another method which works for the ZSH shell.

 1.After you have cloned this repo, change to the *root of this repo*:

```
  $ cd <PATH_TO_REPO>
```

 2.Run the command `npm install` to install all the node packages required

```
  $ npm install
```

 3.Run the command `bundle install` to install all the ruby packages required

```
  $ bundle install
```

## Deploying the website locally

Now onto the final setup Deploying the website locally. For that, there are 2 ways 

- Using the npm
- Using the bundle

First, let's deploy the website using the npm command

```
npm run start
```

This command will deploy the documentation website at [http://localhost:5000](http://localhost:5000/)

If we want to change the port number we have to open the `tools/serve.sh` file. And goto line 70.

```
(set -x; $SERVE --version; $SERVE --port ${SITE_LOCALHOST_PORT:-5000}) &
```

change the port value which is mentioned after the `SITE_LOCALHOST_PORT:-` To whatever port number you desire. (But there is one max limit for the port number do look out for that😉)

The second way of Deploying the website using the bundle command

```
$ bundle exec jekyll serve --incremental --watch --livereload --port 4002
```

As you can see we have mentioned the port as 4002 so the website will be deployed at

[http://localhost:4002](http://localhost:4002/) . If we want to change the port we just have to change the number mentioned after the argument —port.

## Thank You
So By now you also might have the documentation website running locally on your system.  So let's congratulate ourselves for this 🥳. Now as usual If you find any mistakes do let me know about it I will make those changes. Thank you for reading the article/ blog (Still don't know the difference between the two) leave a like and comment if you find it useful.

In the next blog, I will write about the Scaffold widget in the flutter app by creating an example flutter app.

vale 👋