Skip to content

OpenTechStrategies/example-client

 
 

Repository files navigation

DSNP Example Client

This is an example client to help developers learn how to work with the Distributed Social Networking Protocol(DSNP) and its SDK. This client's purpose is to be simple and comprehensible for developers, not to have all the functionality and user-interface polish of an application intended for widespread general usage.

This repo also provides a server ('static-server') that is run concurrently with example-client. The static-server stores and serves ActivityContent. Please note that the Example Client is not designed for scalability and would not be able to handle a live blockchain with lots of activity. Later in this document there is information about how to connect to an external chain if you really want to.

The DSNP Example Client is open source software, like the rest of the DSNP development ecosystem.

Table of Contents

Features

The Example Client's current features include:

  • User Profiles

    • Create a new profile
    • Edit your profile
    • See other users' profiles
    • Publicly follow/unfollow other users
    • Display list of followers/following
  • Posts

    • Create a public post
    • View a public post in the feed
    • Comment on a public post (note: only to one degree of depth)
    • React to posts
    • Filter and navigate through the feed
      • My Posts
      • My Feed
      • Another user's posts
      • Main Feed

This list of features may change as DSNP and its SDK evolve, of course.

Dependencies and Design

Below is a list of important libraries and dependencies for the Example Client and what their purpose is.

Note: Enzyme is not ready for React 17 yet, so we're using an unofficial version and installing packages with npm i --legacy-peer-deps if using node v7. We will change to an official version of Enzyme when a compatible released version is available.

Deployment

The following steps should get you up and running quickly (assuming a working knowledge of NPM and Git):

  • Clone the example-client repository: git clone git@github.com:LibertyDSNP/example-client.git

  • Install the correct npm and node version. We recommend using asdf: asdf install

  • Install the modules: npm install

    • Install Static Server modules cd ./static-server && npm install
  • Copy .env.example to .env and edit as needed.

  • Start the Static Server: cd ./static-server && npm run start

  • Start up site locally: npm run start

  • Visit http://localhost:3000 (or whatever your configured port is)

You can run the test suite with 'npm run test'.

Docker-based deployment

The Docker container is set up in such a way that the Static Server will serve the Example Client. To launch it, run the following commands:

  • docker build --build-arg REACT_APP_UPLOAD_HOST="" --build-arg REACT_APP_CHAIN_ID={REACT_APP_CHAIN_ID_VALUE} --build-arg REACT_APP_CHAIN_NAME={REACT_APP_CHAIN_NAME_VALUE} --build-arg REACT_APP_CHAIN_HOST={REACT_APP_CHAIN_HOST} --build-arg REACT_APP_TORUS_BUILD_ENV={REACT_APP_TORUS_BUILD_ENV_VALUE} . -t example-client

  • docker run --init --rm -p 8080:8080 -v {name_for_volume}:/app/static-server/public example-client

Docker Builds

A new Docker image will be pushed from our GitHub repository to our Docker hub when a new Git tag is created. Tags have the format docker/*, e.g.,docker/v1.0.0.

Development Troubleshooting and FAQ

  • Transactions rejected due to invalid nonce - If you've restarted the chain, you probably need to reset your test accounts. In Metamask, click on the Account icon from the extension. Then go to Settings --> Advanced, scroll down a little and click Reset Account. Do this for each connected account.

  • Still seeing old events after resetting chain - If you're running static-server, it needs to be stopped. Then delete all the batch files it stored with rm static-server/public/0x*

  • How do I restart example-app with an empty chain and no events? - For best results, in this order, do the following:

    1. Logout of the app from your browser.
    2. Kill the example-app with ^C (If you haven't changed the code and just want to delete and recreate all posts, you can skip this step.)
    3. Kill static-server same way
    4. Delete static-server batch files with rm static-server/public/0x*
    5. Go to the contracts repo and kill hardhat node (^C)
    6. Restart hardhat node: npx hardhat node
    7. Redeploy the contracts: npm run deploy:localhost
    8. Reset your test accounts in Metamask
    9. Restart example-app/static server: npm run start from within static-server
    10. Optionally, rerun populate script from example-app, if you want to quickly populate some accounts and events: node script/populate
    11. If you stopped the example-app, restart it: npm run start

    You should now be able to login to the app, and view and create posts.

  • How do I connect to some external chain instead of the local dev chain? - In general, we recommend against connecting to an external chain, because this Example Client is deliberately not scalable: it just reads all of whatever chain it connects to. That's fine when you're using a local development chain that has only your own posts, but things won't be so pleasant if you connect to a much larger and more active chain. On the other hand, if there is some external chain that you know is small enough for the Example Client to handle, then give it a try.

  • The testnet instructions might help.

Participating

Please feel free to ask questions or offer suggestions here in the issue tracker or in the DSNP Discussion Forums, whichever you think is more appropriate.

The Contribution Guide has details on how to interact with the project, including reporting bugs, requesting features, and sending changes (PRs).

Please note that this project adheres to the Project Liberty Code of Conduct.

About

Example Client for using the DSNP

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • TypeScript 57.7%
  • JavaScript 32.3%
  • SCSS 5.7%
  • HTML 4.0%
  • Dockerfile 0.3%