Quickly build and deploy SPA applications to Web3.0 (IPFS)

Project Overview

This article mainly records how as a non-web developer (myself), how to quickly deploy my first SPA application to the interstellar file system IPFS as the first exercise for getting started with web3.0, take me as an example, the front and back end knowledge Basically 0, my basic process is as follows:

• Choose the right application type (SPA)
• Select simple template and apply (H5+Bootstarp+native javascript)
• Code hosting platform (Github)

• Free deployment service for prostitutes:

  • Traditional way: Githubpages
  • PAAS (platform as a service) choice 1: fleek (my choice)
  • PAAS (platform as a service) option 2: 4everland
• The third-party form service provider formspree realizes the message function
• Bound fleet deployment via github
• Download the IPFS client, connect to the node deployed by fleet
• Test if the audio and video links of html are replaced with IPFS addresses, if there are enough backups, whether P2P loads faster
• Update webpage content: just three steps of git classic, add, commit, push, because the fleek has been bound
• CI/CD: none
• Optimization: There is no frame, and the html page has repeated parts. I personally use md to automatically convert it to html, which also meets daily needs

final effect

• Githubpage: https://yaozeliang.github.io/resume/
• IPFS:https://ipfs.fleek.co/ipfs/QmUzk9oyUCzaXsf8jedVqLzRFi1rBxTRdKfExA2pzFJeBU
• CID(Content Identifier):QmddHLkhzHixGpTAGopDNJ8dF3i6UrdrsEiMwsDt2x52G5
  
  

select template, modify, add message service, push to github

This is the link of the template I selected: Click here to preview , this template was launched in 2017, without using a framework, ajax with native javascript, but it just meets my goals, considering that the current PAAS platform deployment of react, django and other projects is not yet Too mature, I choose the simplest single page application

In line with the principle of white prostitution, we can use the free web page deployment service provided by github. But it is only suitable for single-page applications, and any front-end template will do. First, simply modify the template. After running it locally, the classic three steps are pushed to github:

git add
git commit -m "First commit"
git push origin master

Then you can quickly find the corresponding option in the warehouse where the file is located. After becoming a githubpage project, it will automatically find the index.html of the directory. Generally, everyone uses the deployment document. I have personal needs and want to make it a little more beautiful. some:

At this time, we can see that the deployment has been completed by clicking on the prompt url. Every time we modify the push locally, it is equivalent to redeploying. After a few minutes, we can see the changes. There is some delay, but we can't ask too much for free things. . Don't forget to use remote add origin to mount to the relevant repository in advance, for example, resume here

There is an obvious advantage of putting it on github, which is convenient for connecting to many other services. For example, the free message service provider formfree can be used directly for the part about leaving a message:
Its function is to automatically generate a form and address, so we only need to post to this address:
After the test, there is no problem with the message function, you can proceed to the next step

Select PAAS platform deployment, download IPFS client or view media file ID and hash via CLI

It can be seen here that github is very convenient. You don’t need to register to use fleek. Just choose to log in with github, then select the warehouse you want to deploy, and choose IPFS for the backend. At present, fleek also supports some mainstream frameworks. I haven’t tried it yet, but I saw gatsby, hugo, react, nodejs these:



Then we can see our results of: https://ipfs.fleek.co/ipfs/QmUzk9oyUCzaXsf8jedVqLzRFi1rBxTRdKfExA2pzFJeBU If we click on the media path https://ipfs.fleek.co/ipfs/QmUzk9oyUCzaXsf8jedVqLzRFi1rBxTRdKfExA2pzFJeBU/images on You can see that it is already on IPFS:

After downloading the IPFS client, open the link node and use the hash value QmUzk9oyUCzaXsf8jedVqLzRFi1rBxTRdKfExA2pzFJeBU to directly view
After accessing the node, you can see other nodes currently connected to us:

Now I watched the video of the media file, and I don't know when it started to be divided into many parts, which means other
Has node backed up my cache of this file? Can do more research.

As an experiment, the path in my original html refers to the local video/xxx.mp4. If I replace the path with ipfs, will the loading be faster? P2P?

Original code:

 <a class="lightbox mfp-iframe" href="video/powerapps.mp4"title="Stock Management"></a>

Try replacing with a link to IPFS, so that if accessed via githubpage, the video loaded is the IPFS address referenced

  <a class="lightbox mfp-iframe" href="https://ipfs.io/ipfs/Qmb6ZTkEPuy79rXo6WiPhiBkfiNmUFBaH4i1Dh6DYxhXK8filename=powerapps.mp4"title="Stock Management">
 </a>

To check the loading speed of the Network in F12, I simply ran it 10 times first, and the loading speed was similar. But running it again the next day found it was slightly faster, but I may have other factors locally.

Merkle DAG Merkle tree structure,

After a brief look, IPFS uses the Merkle DAG Merkle tree structure, and some uses the directed graph acyclic topological sorting. The entreprise version implements Dremio's environment backup. Friends who have used Dremio must know: Dremio paid function

The specific details will be recorded later, but the simplification problem is that when we go online from preprod to prod, we need to generate the same data set as preprod from the data source, pds, vds, and reflection in turn, but your sql queries will depend on each other. relationship, such as select a from b,c to get all datasets through api, you need to do sorting first, otherwise there may be a situation where a is generated before b and c. This relationship is not a layer traversal of a traditional binary tree, because each vds may have multiple parents. The solution is to sort the topological directed graph, which can ensure that the parent(s) is always generated first. Take python as an example, and refer to the implementation method of others. :

from collections import defaultdict 

 ####发现上面的代码有点问题（不知道是不是我的问题），所以我自己写了一个，同时也加深下对于拓扑的了解
class Graph: 
    # 构造函数
    def __init__(self,vertices): 
        # 创建用处存储图中点之间关系的dict{v: [u, i]}(v,u,i都是点,表示边<v, u>, <v, i>)：边集合
        self.graph = defaultdict(list) 
        # 存储图中点的个数
        self.V = vertices

    # 添加边
    def add_edge(self,u,v): 
        # 添加边<u, v>
        self.graph[u].append(v) 
    # 获取一个存储图中所有点的状态:dict{key: Boolean}
    # 初始时全为False
    def set_keys_station(self):
        keyStation = {}
        key = list(self.graph.keys())
        # 因为有些点，没有出边，所以在key中找不到，需要对图遍历找出没有出边的点
        if len(key) < self.V:
            for i in key:
                for j in self.graph[i]:
                    if j not in key:
                        key.append(j)
        for ele in key:
            keyStation[ele] = False
        return keyStation

    # 拓扑排序
    def topological_sort(self):
        # 拓扑序列
        queue = []
        # 点状态字典
        station = self.set_keys_station()
        # 由于最坏情况下每一次循环都只能排序一个点，所以需要循环点的个数次
        for i in range(self.V):
            # 循环点状态字典，elem：点
            for elem in station:
                # 这里如果是已经排序好的点就不进行排序操作了
                if not station[elem]:
                    self.topological_sort_util(elem, queue, station)
        return queue   
    # 对于点进行排序     
    def topological_sort_util(self, elem, queue, station):
        # 设置点的状态为True，表示已经排序完成
        station[elem] = True
        # 循环查看该点是否有入边，如果存在入边，修改状态为False
        # 状态为True的点，相当于排序完成，其的边集合不需要扫描
        for i in station:
            if elem in self.graph[i] and not station[i]:
                station[elem] = False
        # 如果没有入边，排序成功，添加到拓扑序列中
        if station[elem]:
            queue.append(elem)

g= Graph(6) 
g.add_edge(5, 2); 
g.add_edge(5, 0); 
g.add_edge(4, 0); 
g.add_edge(4, 1); 
g.add_edge(2, 3); 
g.add_edge(3, 1); 
  
print ("拓扑排序结果：")
print(g.topological_sort())

拓扑排序结果：
[5, 4, 2, 3, 1, 0]

The idea of IPFS is probably the same. Through continuous addressing (CID) jumping between nodes, files can be downloaded in a p2p manner, realizing a truly decentralized network. This may be the reason why the author confidently named it Interstellar File System. . . As for whether he can realize his ambition to replace the http protocol, it depends on the ecological development in the future.

Create a new branch and use IPFS as a map bed

I replaced a video with an ipfs link before, because I wanted to see the overall effect because of curiosity, so I created a new branch called IPFS. In this branch, I replaced the original a tag href and linked it to IPFS, so that I can delete many others after the modification. document:

master

IPFS

As far as my simple application is concerned, it is enough to keep the original html. My css, js, image, and video are all referenced on IPFS. I don't know if they are other peers connected to my node. Whether it is possible to have some caches and backups remains to be explored. Now I select the IPFS branch in the warehouse settings to deploy:

After the success, I checked the loading speed (network/waterfull), and it was indeed a little faster than before. I don't know the specific reason yet. There is a little trick. All are https://ipfs.io , such as here:

<script src="https://ipfs.io/ipfs/QmNXRFREw7waGtKW9uBUze3PkR9E12HeeAQSkZQSiFUJqo?filename=bootstrap.min.js"></script>
<script src="https://ipfs.io/ipfs/QmVf6WVGG3XYMa4hqArswuK9XAXscm1GQXzREWak4Agn1h?filename=page-transition.js"></script>
<script src="https://ipfs.io/ipfs/QmPG8uTXJmYYBxSR44pv5EfQkHxfcLs1MT5vYpXArugGys?filename=imagesloaded.pkgd.min.js"></script>
<script src="https://ipfs.io/ipfs/QmQ3ZKx2Lu1D8JR7ra1kpXDz7rVRpE8hjZYrXPPDe4mVxM?filename=validator.js"></script>
<script src="https://ipfs.io/ipfs/QmepiCNNLC52DSbKdotnav8H8XNdtxQN82xygcTPyCVQV2?filename=jquery.shuffle.min.js"></script>
<script src="https://ipfs.io/ipfs/Qmbtz6ZPeeBEnVeez78MGr5NVtnH5tkhP5ijv2KvtZyg6b?filename=masonry.pkgd.min.js"></script>
<script src="https://ipfs.io/ipfs/QmdB8FAW9LYHy7B2p5JVhyeSMVSG9uwm8cEGMMYGBEjFAe?filename=owl.carousel.min.js"></script>
<script src="https://ipfs.io/ipfs/QmSpUo5gEuMXFksbhc1iJbWDHispwbjyCsq79vze2rYuMr?filename=jquery.magnific-popup.min.js"></script>
<script src="https://ipfs.io/ipfs/QmQg9VfdpNi3zPRHSzU39zURPgQKBCWLcgYFwdCHwdu9pN?filename=jquery.hoverdir.js"></script>
<script src="https://ipfs.io/ipfs/QmWSGkNuDeDd23J9rgKMgDs2yAmnospcKkWKNR9RMSS5L6?filename=main.js"></script>

Obviously, a parameter filename can be passed at the end of the https://ipfs.io/ipfs/ . This is optional. If you remove it, there is no problem, but it will be more obvious when you bring it. You can also consider using the base tag in the head, such a reference will be simpler

<script src="QmWSGkNuDeDd23J9rgKMgDs2yAmnospcKkWKNR9RMSS5L6?filename=main.js"></script>

ENS domain name and personal optimization, Valine comment plugin interaction

In fact, after deploying on IPFS through fleet, there is no need to bother about css and js references. My workflow is to write articles in markdown, convert them to html, update git, and then fleet will automatically update because the corresponding warehouse is bound. As for optimization, I personally do it for demonstration purposes, hoping to combine some of my skills. So definitely won't integrate it into a blogging framework like Gatasby or Hugo, for me django is a good choice

As for the domain name, it is automatically given by git at present. I chose to try the ENS domain name of Ethereum, so that the ens domain name can be added to the deployment option of fleet. Each update is automatically updated by fleet, and the gas fee is generated. no personal responsibility

• ENS domain name official website: https://app.ens.domains/
• My ENS domain name: yaozelinag.eth

Because I chose the ENS domain name, you can easily find my public key 1621cabfc54f4a on the https://etherscan.io/enslookup-search?search=yaozeliang.eth :

One advantage is that ENS is bound to your Ethereum address, so now someone wants to give me a cup of coffee, instead of giving him a lengthy address, it is better to change it to a more identifying name: yaozeliang.eth (more suitable for WEB3 .0 people, I still like WeChat!)

As for interacting with visitors, I used the pure front-end plug-in valine, which is quite good, and the personal experience is very good. Recommended

final effect:

Current domain name: https://yaozeliang.eth.link/

homepage (random background image)

resume page

Introduction page

Project Showcase

Article sharing

Personal Collection

Interactive Review (Valine and Form)

Brief Summary

• githubpage requires that it must be a public repository. If you have a friend who also needs a similar template, you are welcome to purchase it for 0 yuan. . .
• Personally, I feel that IPFS defects are still concentrated in performance and data optimization, interface problems
• Personal network requires NAT configuration
• IPFS has go language support