This tutorial is meant to get you started on your PWA app
1. Get started with NodeJS by following the 1-3 minute long tutorial below:
https://www.youtube.com/watch?v=SkeyY_fysxE (macintosh)
https://www.youtube.com/watch?v=Xit4miSByOw (windows)
2. Create a developer wallet and save your secret seed in a text file.
https://www.youtube.com/watch?v=tkt7fnoPMbI
3. Install Docker and create a user account at the docker hub (if you don't want to use your email, you can use any temporare email provider)
https://www.docker.com/
https://hub.docker.com/
4.
Create a project folder named project in vscode.
5.
Create a folder named longrunning, and create a file called package.json in it.
6.
Add following code to the package.json file,
Code: Select all
{
"name": "pwa",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"express": "^4.19.2"
}
}
Open up the terminal and make sure that you are located in your longrunning folder ( you might need to write
Code: Select all
cd longrunning8.
Write
Code: Select all
npm i9.
Go back to your project folder, create the two files below and save their code.
Dockerfile
Code: Select all
FROM evernode/sashimono:hp.latest-ubt.20.04-njs.20
RUN mkdir -p /usr/local/bin/hotpocket/pwa
RUN mkdir -p /usr/local/bin/hotpocket/pwa/node_modules
COPY longrunning/ /usr/local/bin/hotpocket/pwa
COPY longrunning/node_modules /usr/local/bin/hotpocket/pwa/node_modules
COPY start.sh /start.sh
RUN chmod +x /start.sh
ENTRYPOINT ["/start.sh"]
EXPOSE 36525-36535Code: Select all
#!/bin/sh
# Run website
/usr/bin/node /usr/local/bin/hotpocket/pwa &
# Set the HotPocket binary as the entry point.
# $@ is used to pass all the commandline arguments fed to this script into hpcore.
/usr/local/bin/hotpocket/hpcore $@
index.html
Code: Select all
<!DOCTYPE html>
<html lang="en-US" dir="ltr">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link rel="manifest" href="/manifest.json">
<link rel="shortcut icon" href="favicon.ico" />
<title>APP title</title>
</head>
<body>
<h1>App Title</h1>
<a href="test.html">testlink</a>
</body>
</html>
Code: Select all
const { readFile } = require('fs');
const express = require('express');
const https = require('https');
const path = require('path');
const fs = require('fs');
const app = express();
const sslOptions = {
key: fs.readFileSync(path.resolve(__dirname, 'private.key')),
cert: fs.readFileSync(path.resolve(__dirname, 'certificate.crt')),
};
// Serve static files from the current directory
app.use(express.static(path.join(__dirname)));
app.get('/', (request, response) => {
const filePath = path.join(__dirname, 'index.html');
readFile(filePath, 'utf8', (err, html) => {
if (err) {
return response.status(500).send('error');
}
response.send(html);
});
});
const ports = Array.from({ length: 11 }, (_, i) => 36525 + i);
ports.forEach(port => {
https.createServer(sslOptions, app).listen(port, () =>
console.log(`Online at port ${port} (HTTPS)`)
);
});
Code: Select all
{
"lang": "en-us",
"name": "a PWA app",
"short_name": "PWA app",
"description": "A simple PWA app",
"start_url": "/",
"background_color": "#2f3d58",
"theme_color": "#2f3d58",
"orientation": "any",
"display": "standalone",
"icons": [
{
"src": "/logo512x512.png",
"sizes": "512x512"
}
]
}Code: Select all
<!DOCTYPE html>
<html lang="en-US" dir="ltr">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link rel="manifest" href="/manifest.json">
<link rel="shortcut icon" href="favicon.ico" />
<title>APP title</title>
</head>
<body>
<h1>App Title</h1>
<a href="index.html">index</a>
</body>
</html>
Create an app photo, 512x512 px and save it into the longrunning folder and name it logo512x512.png
12.
Upload your app photo to https://realfavicongenerator.net/ or any other favico generator and generate a favicon.ico file.
13.
Place your favicon.ico into your longrunning folder.
14.
Go through this process and get your certificate.crt and private.key files.
https://evernode.forum/viewtopic.php?t=33
15.
Place your files into your longrunning folder.
16.
Log into docker by writing docker login (the info you use are the ones that you used when signing up to the docker hub).
Make sure that you are in your original project folder (where the Dockerfile is located).
17.
Now its time to build your docker container, the command below need you to replace YourUserName with your dockerhub username. When running this command, docker needs to be running on your computer.
Code: Select all
docker build -t YourUserName/pwa -f ./Dockerfile .
Once it's built, we need to upload it to your docker hub, we do that with the command below.
Code: Select all
docker image push --all-tags YourUserName/pwa19.
Go to your startmenu, write powershell, rightclick on it and open it as admin, then write "Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope LocalMachine" and hit enter. This will allow your computer to work with scripts, in this case the evernode development kit.
Afterwards, install evernode developer kit by typing npm i evdevkit -g
20.
When that is done, we need to acquire an instance. To do that we need to first generate a public and a private key pair. These are the keypairs you would use to be able to communicate with your instance (it's basically the authentication).
Write evdevkit keygen to generate your keypair, save the public and the private keys in your nodepad. The private keypair should be kept private, because people can use it to communicate with your evernode instance.
21.
Now we need to make sure vscode knows your secret seed and private key for the deployment, use the two commands below and don't remove the " ", it needs to be there.
Code: Select all
$env:EV_TENANT_SECRET="Your Secret Seed Here"
$env:EV_USER_PRIVATE_KEY="Your Private Key Here"Let's find an eligible node to deploy to.
Go to following site:
https://xahau.xrplwin.com/evernode
Find a node which is up to date and that have a low price per hour and copy it's r-address.
23.
Write following command to acquire your instance for 1 moment (1 hour) and upload your docker container to it
Code: Select all
evdevkit acquire -i YourDockerHubAccountName/pwa:latest TheR-AddressYouCopied -m 1
24.
Take the domain you created in step #14, take the port you were given recently, open your webbrowser and write https://domain:port and hit enter.
You're now going to see your PWA app in the shape of a website, and it will remain live for one hour (1 moment).
25.
This page can be saved to your home screen if you use a phone. On iphones you hit your box with an arrow pointing up and then "save to home screen".
On android you can install it to your home screen as-well.
On the webbrowser microsoft edge you can also save it, it would be some sort of microsoft app then.
The results look like this:
