Shipping Your App

Search…
🚢
Shipping Your App
Shipping your app is very easy with Scaffold-eth. 
You can do it from the command-line with any of these services:
Surge
S3
IPFS
1
# package up the static site:
2
yarn build
3
​
4
# ship it!
5
yarn surge
6
​
7
OR
8
​
9
yarn s3
10
​
11
OR
12
​
13
yarn ipfs
Copied!
Preparing your App
Before building your app and shipping it there's a few things you should review to make sure it works as intended.
1.Deploy your contracts to the intended network(s). This will generate the contract artifacts for your app to consume. Refer to this guide for instructions on how to deploy your contracts with Hardhat deploy.
2.Verify your contracts on Etherscan. People are (rightly) afraid of interacting with an app whose smart contracts' code is not visible. Refer to this guide on how to streamline this process with Scaffoldd-eth
3.Turn Debug mode off to stop printing logs. In line 48 of app.jsx const DEBUG = false;
4.Review app.jsx and remove any extra code you are not using. Scaffold-eth comes with many examples on how to subscribe to blocks, fetch gas prices, eth prices, etc. which you might not use but are still making rpc calls to your node.
5.Make sure the React app is pointing to the selected network. By default Scaffold-eth is set up so the app forces which network it's pointing to. Review line 45 of app.jsx and change the targetNetwork accordingly.
6.Make sure you are using your own nodes and not the ones in Scaffold-eth as they are public and there's no guarantee they will be taken down or rate limited. Review lines 58 and 59 of app.jsx.
7.Review the constants.js file and swap the services' API keys with yours. You need to create an account on Infura, Etherscan and Blocknative if you want to use their services.
Once you are done with these suggested steps, you can build and ship your app as follows:
1
#Surge example
2
cd scaffold-eth
3
yarn build
4
yarn surge
Copied!
Deploying to Surge Step by Step
Deploying with Surge is very simple. The first time you do it, though, you will be asked to provide an email and then confirm your account. Once you've done that, run the follwing commands:
1
#First, build the app
2
yarn build
3
​
4
#Then, deploy to Surge
5
yarn surge
Copied!
You should see the following prompt:
You can change the domain you'd like to use for your app or just press enter to leave it as randomly generated. After the upload is successful, you should be able to access the site at the domain you chose. (Note: If you pick a domain that is already taken you will be prompted to change it)
Deploying to Netlify Step by Step
Of course, you can also take your build folder and use it to ship your app through other services Scaffold-eth doesn't currently support from the command-line. Here's a step-by-step guide on how to do it on Netlify.
Drag & Drop on the Netlify site
Step 1:  Setup
Make sure your build is properly configured as explained in this page above. Then, run the following command to build your app:
1
cd scaffold-eth
2
yarn build
Copied!
If successful, you should see something like this:
You should now have a build folder in /packages/react-app. 
Step 2: Deployment
Log into your Netlify account and head over the Sites tab
Drag and drop the previously generated build folder into the browser. You should see something like this after it's finished uploading:
Step 3: Configure and test
Once the app has been built on Netlify, you can continue configuring it, setting up HTTPS, assigning a custom domain and more. On the top-left side of the screen you can see the url to which your app has been deployed. Click on it to open it in a new tab. You should now see your app in there:
Deploying with Netlify-cli
Step 1: Setup Netlify-cli
1
cd scaffold-eth
2
​
3
# Install Netlify CLI globally
4
npm install netlify-cli -g
5
​
6
netlify login
7
#You will be prompted to enter your Netlify credentials
8
​
Copied!
Read this article for more installation options: https://www.netlify.com/blog/2019/05/28/deploy-in-seconds-with-netlify-cli/​
Step 2: Build your app
1
cd scaffold-eth
2
yarn build
Copied!
Step 3: Deploy your app
1
netlify deploy -p
Copied!
Follow the console prompts. Note that when asked for the Deploy Path you should enter the folder where your build was generated, which by default should be /packages/react-app/build
Once it's done uploading, you should see something like this: 
1
✔ Finished hashing 23 files
2
✔ CDN requesting 6 files
3
✔ Finished uploading 6 assets
4
✔ Deploy is live!
5
​
6
Logs:              https://app.netlify.com/sites/amazing-mcclintock-94e953/deploys/60d9e4f21445a8b4c095c04f
7
Unique Deploy URL: https://60d9e4f21445a8b4c095c04f--amazing-mcclintock-94e953.netlify.app
8
Website URL:       https://amazing-mcclintock-94e953.netlify.app
Copied!
Deploying with Netlify CI
Deploying with CI can be done, but currently Scaffold-eth is not prepared for it and you will need to do additional work, outside the scope of this guide.
Step 1: Fork the Scaffold-eth repo in your own Github account

Step 2: Log into Netlify on your browser, and create a new project, connecting it to your forked Scaffold-eth repo.
Step 3: Go to your new site settings-> Build and deploy in "Build Settings" make the following changes:
1. Instruct it where to find the build folder it is going to generate buy adding the path to "Publish Directory".
2.Add CI=false to "Build Command" to prevent the build from failing because of build warnings.
Step 4: Deploy
Go to the site's Deploys section and trigger a deploy. After a while your site should be live.
Notice a build will trigger automatically every time a new commit is made on the selected branch. 
Why doesn't it work as expected?
You will notice that even though the app is indeed deployed, it doesn't work. The reason for this is that when you trigger a commit on the repo, the CI will generate a build, but currently Scaffold-eth doesn't have the right pipeline built for this, as building the frontend doesn't run the commands necessary for generating the contracts' artifacts and addresses.