# Deployment

{% hint style="success" %}
[Get $200 free credits on Digital Ocean](https://m.do.co/c/e4c24293fe5d).
{% endhint %}

Your React client will run in development mode by default. When you want to deploy to a live server, you must build the front-end and serve the static files.

```javascript
// build the client
cd client && npm run build

// serve the client
npm run serve
```

You can run this file before you deploy or set it as a `post-build` script in `package.json` if your hosting provider supports post-build scripts. Gravity includes the [Heroku](https://heroku.com) `post-build` script for you already.

{% hint style="warning" %}
You need to set server.open to false in vite.config.js before deploying.
{% endhint %}

## Running The Client & Server Together

If you want to serve the static files in the same production environment as your server, you will need to add the following lines to `server.js`

````javascript
// serve static files in production
if (process.env.NODE_ENV === 'production'){

  app.use(express.static(path.join(__dirname, 'client/dist')));

  app.get('*', (req, res) => {
    res.sendFile(path.join(__dirname + '/client/dist/index.html'))
  });
}
```
````

## Environment Variables

You must ensure you set up your [environment variables](../gravity-server/environment-variables) in your production environment.&#x20;

## Heroku Deployment Tutorial

{% embed url="https://www.youtube.com/watch?v=TkVwVHbzukw" %}
