You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

70 lines
4.3 KiB

---
layout: learn
description: Blockstack app mining documentation
permalink: /:collection/:path.html
---
# How to deploy a Blockstack dApp
{:.no_toc}
Blockstack applications are a type of web application that use Blockstack's technology to authenticate users. As such, Blockstack apps tend to be simple in design and operation, since in many cases they don’t have to host anything besides the application’s assets.
* TOC
{:toc}
## Where to deploy your application
Before users can interact with your application, you must deploy it on a server that is accessible over the internet. Deploying requires that you:
* Configure or customize the files in the `public` directory.
* Build your application site for deployment.
* Copy your generated application files to your production server.
If you first populated your application with the Blockstack application generator, your application contains the starting blocks for configuring, building, and deploying your app. For example, the React template builds out a scaffolding with the following building blocks.
<table class="uk-table">
<tr>
<th>File or Directory</th>
<th>Description</th>
</tr>
<tr>
<td><code>node_modules/react-scripts</code></td>
<td>A set of scripts for that helpsyou kick off React projects without configuring, so you do not have to setup your project by yourself.</td>
</tr>
<tr>
<td><code>package.json</code></td>
<td>Contains a scripts section that includes a reference to the react-scripts which are a dependency. This script creates a <code>build</code> directory containing your files for deployment.</td>
</tr>
<tr>
<td><code>public/favicon.ico</code></td>
<td>An example shortcut icon.</td>
</tr>
<tr>
<td><code>public/index.html</code></td>
<td>An entry page for an application.</td>
</tr>
<tr>
<td><code>public/manifest.json</code></td>
<td>A JSON file that describes your web application to the browser.&nbsp;&nbsp;</td>
</tr>
<tr>
<td><code>cors</code></td>
<td>Contains example deployment files for cross origin request configuration.</td>
</tr>
</table>
If you use the generator to build Javascript or Vue scaffolding, your project configuration files will be different.
Regardless of which scaffolding you use, you must customize and extend this basic scaffolding as needed by your application. For example, you may want to add more properties to the `manifest.json` file. Since every application is different, Blockstack cannot give you specific intructions how to do this. The steps you take are specific to your application.
## Blockstack Authentication and deployment
When you application authenticates users with Blockstack, your DApp at one URL requests a resource (an identity) from another DApp, the Blockstack Browser. A request for a resource outside of the origin (your new website) is called as a _cross-origin request_(CORs). Getting data in this manner can be risky, so you must configure your website security to allow interactions across origins.
You can think of CORS interactions as an apartment building with Security. For example, if you need to borrow a ladder, you could ask a neighbor in your building who has one. Security would likely not have a problem with this request (i.e., same-origin, your building). If you needed a particular tool, however, and you ordered it delivered from an online hardware store (i.e., cross-origin, another site), Security may request identification before allowing the delivery man into the apartment building. (Credit: <a href="https://www.codecademy.com/articles/what-is-cors" target="\_blank">Codecademy</a>)
The way you configure CORs depends on which company you use to host your web application. The application generator adds a `cors` directory to your application scaffolding. This directory contains files for Netlify (`_headers` and `_redirects`) as well as one for Firebase (`firebase.json`). Consult the documentation for your hosting service to learn how to configure CORS on that service.
## Deployment and Radiks
If you are deploying an Blockstack application that uses Radiks, your deployment includes a server and a database component. You must take this into account when deploying your application. You may want to choose a service such as Heroku or Digital Ocean if your app uses Radiks.