---
description: >-
  In this section you will learn about how to deploy your application on the
  live server. Please read the documentation carefully.
---

# Deployment

To create a production build you need to run the command `npm run build`. It will create the `dist` folder, that contains the production build files. Now you just need to upload the `dist` files on to the server.

#### Static Server:

For environments using [Node](https://nodejs.org/), the easiest way to handle this would be to install [serve](https://github.com/zeit/serve) and let it handle the rest:

```
npm install -g serve
serve -s build
```

#### Other Solutions:

You don’t necessarily need a static server in order to run a project in production. It works just as fine integrated into an existing dynamic one.

Here’s a programmatic example using [Node](https://nodejs.org/) and [Express](http://expressjs.com/):

{% code title="server.js" %}
```javascript
const express = require('express');
const path = require('path');
const app = express();

app.use(express.static(path.join(__dirname, 'build')));

app.get('/', function (req, res) {
  res.sendFile(path.join(__dirname, 'build', 'index.html'));
});

app.listen(9000);
```
{% endcode %}

**Apache HTTP server:**

If you’re using [Apache HTTP Server](https://httpd.apache.org/), you need to create a `.htaccess` file in the `public` folder that looks like this:

```
Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]
```

Upload the `dist` files in the public folder.

#### Building for Relative Paths:

If you want to make your production build in different folder or sub directory. Like, if you want that the template run on the `test.com/dist` rather then `test.com` then you need to follow the steps given below:

**Step 1:** Open `.webpack.config.js` file and search for

```
const publicPath = '/';
```

and set your path as per requirement like:

```
const publicPath = '/dist/';
```

**Step 2:** Now go to `src>App.js` file and set the `Router basename` to `dist` like following code:

```
<Router basename={'/dist'}>
            <Switch>
               <Route path="/" component={App} />
            </Switch>
         </Router> 
```

**Step 3:** Open `.htaccess` file and set the roots for subdirectory: We have added the screenshot for the `.htaccess` file location and also the code of the file.

![.htaccess File](https://3423697845-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LEnOfkACC-WsXr2rO7I%2F-LacrNWpWQiSiEZ9x-8z%2F-LacyaqMMhAvTF_zkErZ%2FScreenshot%202019-03-23%20at%2010.44.24%20AM.png?alt=media\&token=edd735b0-8a47-40c1-b666-331a70b4d0d3)

{% code title=".htaccess" %}
```
# To be inside the /Directory

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /dist/
    RewriteRule ^index\.html$ - [L]
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . /dist/index.html [L]
</IfModule>
```
{% endcode %}
