1. Abstract

This simple tutorial makes available in GitHub Pages a project created with create-near-app with some slight modifications done by following the steps in this tutorial.

If you want to know about how I install the tools used in this tutorial, read my first tutorial about NEAR.

2. Creating the project

$ npx create-near-app near-greeting-frontend && cd $_
$ batcat README.md

3. Creating an account for the contract

To follow the next steps, I created an account called paulojeronimo-test4.testnet in https://wallet.testnet.near.org/.

$ near login
$ export CONTRACT_NAME=paulojeronimo-test4.testnet
$ near create-account near-greeting-frontend.$CONTRACT_NAME --masterAccount $CONTRACT_NAME

4. Setting the contract name

$ f=frontend/assets/js/near/config.js

$ vim $f # change the first line according to the follow output:

$ sed -n '1p' $f
const CONTRACT_NAME = process.env.CONTRACT_NAME || 'near-greeting-frontend.paulojeronimo-test4.testnet

Ref.: https://docs.near.org/docs/api/naj-quick-reference

5. Deploying and testing locally

$ git init
$ git add .
$ git commit -m 'Initial commit'

Create the repository in GitHub.

I use the gh command to do this in this way:

$ gh repo create $(basename "$PWD") --source=. --public --remote=origin --push

If you need to login in GitHub, type gh auth login first.

My created repo: https://github.com/paulojeronimo/near-greeting-frontend

Ref.: https://cli.github.com/manual/gh_repo_create

Run the app locally:

$ npm run dev

This will open http://localhost:1234.

Press the Sign in button.

Change greeting to what ever you want and click Save.

Check the code, according to instructions in the app.

Press the Sign out button.

Type Ctrl+C to stop the app.

6. Deploying to GitHub Pages

Update .gitignore:

$ cat >> .gitignore <<'EOF'
.parcel-cache/
contract/Cargo.lock
contract/target/
EOF

Install package gh-pages and stage these changes.

$ npm install -D gh-pages
$ git add .

Copy this content to the file /tmp/1.diff:

diff --git a/package.json b/package.json
index a985126..4e78bdf 100644
--- a/package.json
+++ b/package.json
@@ -3,10 +3,12 @@
   "version": "1.0.0",
   "license": "(MIT AND Apache-2.0)",
   "scripts": {
+    "predeploy": "rm -rf dist && npm run build:web",
     "build": "npm run build:contract && npm run build:web",
     "build:contract": "cd contract && rustup target add wasm32-unknown-unknown && cargo build --all --target wasm32-unknown-unknown --release && cp ./target/wasm32-unknown-unknown/release/greeter.wasm ../out/main.wasm",
     "build:web": "parcel build frontend/index.html --public-url ./",
-    "deploy": "npm run build:contract && near dev-deploy",
+    "deploy": "npm run build:contract && near dev-deploy && npm run deploy:gh-pages",
+    "deploy:gh-pages": "gh-pages -d dist",
     "start": "npm run deploy && echo The app is starting! It will automatically open in your browser when ready && env-cmd -f ./neardev/dev-account.env parcel frontend/index.html --open",
     "dev": "nodemon --watch contract -e ts --exec \"npm run start\"",
     "test": "npm run build:contract && npm run test:unit && npm run test:integration",
$ git apply /tmp/1.diff

$ git add .
$ git commit -m 'Added "deploy to gh-pages" support'

After the changes above, you can run the deploy script to make app available in GitHub Pages:

$ npm run deploy

In my case, this is the URL of the deployed app: https://paulojeronimo.com/near-greeting-frontend

Currently I’m trying to solve this issue:

issue 1

7. Other useful commands and extra references

7.1. Removing the existing repository through command line

$ gh repo delete near-greeting-frontend
? Type paulojeronimo/near-greeting-frontend to confirm deletion: paulojeronimo/near-greeting-frontend
✓ Deleted repository paulojeronimo/near-greeting-frontend

7.2. Extra feferences