From 411b50d6f4cb85f02f0d7c5a27931f44a133fa71 Mon Sep 17 00:00:00 2001 From: bill bittner Date: Thu, 9 Aug 2018 15:39:32 -0700 Subject: [PATCH] added fullstart and customize.md --- README.md | 121 +++++++++++++++++------------- customize.md | 73 ++++++++++++++++++ fullstart.md | 171 ++++++++++++++++++++++++++++++++++++++++++ nginx_example_config | 40 ++++++++++ test/test-embed.html | 25 ------ test/test-iframe.html | 44 ----------- 6 files changed, 353 insertions(+), 121 deletions(-) create mode 100644 customize.md create mode 100644 fullstart.md create mode 100644 nginx_example_config delete mode 100644 test/test-embed.html delete mode 100644 test/test-iframe.html diff --git a/README.md b/README.md index c2b8f898..1a9b8fd8 100644 --- a/README.md +++ b/README.md @@ -5,7 +5,8 @@ You can create your own custom version of spee.ch by installing this code base a ## Quick start -### Prepare your environment +_note: this is the quickstart guide, for an in-depth step-by-step overview visit the [fullstart guide](https://github.com/lbryio/speech/fullstart.md)._ + Install Node * [link](https://nodejs.org) @@ -27,8 +28,6 @@ Clone this repo $ git clone https://github.com/lbryio/spee.ch.git ``` -### Build and Start the App - Change directory into your project ``` $ cd spee.ch @@ -45,29 +44,22 @@ $ npm run configure ``` _note: add your ip address in `config/siteConfig.json` after completion_ -Build the app -(transpile source with babel and bundle with webpack) -``` -$ npm run build -``` - -start the app +Build & start the app ``` $ npm run start ``` -### View in browser -visit [localhost:3000](http://localhost:3000) in your browser +view in browser + * visit [http://localhost:3000](http://localhost:3000) in your browser -### (optional) add custom components and update the styles +(optional) add custom components and update the styles * create custom components by creating React components in `src/views/` (further instructions coming soon) * update the css by changing the files in `public/assets/css/` (further instructions and refactor coming soon) -### (optional) Syncing the full blockchain -Start the `spee.ch-sync` tool available at [billbitt/spee.ch-sync](https://github.com/billbitt/spee.ch-sync) - -This is not necessary, but highly reccomended. It will decode the blocks of the `LBRY` blockchain and add the claims information to your database's tables +(optional) Syncing the full blockchain + * Start the `spee.ch-sync` tool available at [billbitt/spee.ch-sync](https://github.com/billbitt/spee.ch-sync) + * This is not necessary, but highly reccomended. It will decode the blocks of the `LBRY` blockchain and add the claims information to your database's tables ## API * _(post)_ /api/claim/publish @@ -110,13 +102,67 @@ Spee.ch also runs a sync tool, which decodes blocks from the `LBRY` blockchain a * [react](https://reactjs.org/) -### Architecture -* the `server/` folder contains all of the server code - * `index.js` is the entry point for the server. It creates the [express app](https://expressjs.com/), requires the routes, syncs the database, and starts the server listening on the `PORT` designated in the config file. - * the `server/routes` folder contains all of the routes for the express app - * the `server/models` folder contains all of the models which the app uses to interact with the `mysql` database. Note: this app uses the [sequelize](http://docs.sequelizejs.com/) ORM. -* the `client/` folder contains all of the client code +### Architecture +* `cli/` contains the code for the cli tool. Running the tool will create `.json` config files and place them in the `config/` folder + * `configure.js` is the entry point for the cli tool + * `cli/defaults/` holds default config files + * `cli/questions/` holds the questions that the cli tool asks to build the config files + +* `client/` contains all of the client code + * The client side of spee.ch uses `React` and `Redux` + * `client/src/index.js` is the entry point for the client side js. It checks for preloaded state, creates the store, and places the `` component in the document. + * `client/src/app.js` holds the `` component, which contains the routes for `react-router-dom` + * `client/src/` contains all of the JSX code for the app. When the app is built, the content of this folder is transpiled into the `client/build/` folder. + * The Redux code is broken up into `actions/` `reducers/` and `selectors/` + * The React components are broken up into `containers/` (components that pull props directly from the Redux store), `components/` ('dumb' components), and `pages/` + * spee.ch also uses sagas which are in the `sagas/` folders and `channels/` + * `client/scss/` contains the css for the project + * + +* `client_custom` is a folder which can be used to override the default components in `client/` + * The folder structure mimics that of the `client/` folder + * to customize spee.ch, place your own components ans scss in the `client_custom/src/` and `client_custom/scss` folders. + +* `server/` contains all of the server code + * `index.js` is the entry point for the server. It creates the [express app](https://expressjs.com/), requires the routes, syncs the database, and starts the server listening on the `PORT` designated in the config files. + * `server/routes/` contains all of the routes for the express app + * `server/controllers/` contains all of the controllers for all of the routes + * `server/models/` contains all of the models which the app uses to interact with the `MySQL` database. + * Spee.ch uses the [sequelize](http://docs.sequelizejs.com/) ORM for communicating with the database. + +* `tests/` holds the end-to-end tests for this project + * Spee.ch uses `mocha` with the `chai` assertion library + * unit tests are located inside the project in-line with the files being tested and are designtated with a `xxxx.test.js` file name +### Tests +* This package uses `mocha` with `chai` for testing. +* Before running tests, create a `testingConfig.js` file in `devConfig/` by copying `testingConfig.example.js` +* To run tests: + * To run all tests, including those that require LBC (like publishing), simply run `npm test` + * To run only tests that do not require LBC, run `npm run test:no-lbc` + +### URL formats +Spee.ch has a few types of url formats that return different assets from the LBRY network. Below is a list of all possible urls for the content on spee.ch +* retrieve the controlling `LBRY` claim: + * https://spee.ch/`claim` + * https://spee.ch/`claim`.`ext` (serve) +* retrieve a specific `LBRY` claim: + * https://spee.ch/`claim_id`/`claim` + * https://spee.ch/`claim_id`/`claim`.`ext` (serve) +* retrieve all contents for the controlling `LBRY` channel + * https://spee.ch/`@channel` +* a specific `LBRY` channel + * https://spee.ch/`@channel`:`channel_id` +* retrieve a specific claim within the controlling `LBRY` channel + * https://spee.ch/`@channel`/`claim` + * https://spee.ch/`@channel`/`claim`.`ext` (serve) +* retrieve a specific claim within a specific `LBRY` channel + * https://spee.ch/`@channel`:`channel_id`/`claim` + * https://spee.ch/`@channel`:`channel_id`/`claim`.`ext` (serve) + +### Bugs +If you find a bug or experience a problem, please report your issue here on github and find us in the lbry discord! + ### Issue tags in this repo #### level 1 Issues that anyone with basic web development can handle; little-to-no experience with the spee.ch codebase is required. @@ -129,32 +175,3 @@ Familiarity with the spee.ch code base and how the lbry daemon functions is requ #### level 4 Issues with lbry (e.g. the spee.ch wallet, lbrynet configuration, etc.) that require strong familiarity with the lbry daemon and/or network to fix. Generally these issues are best suited for the `lbry` `protocol team` but are reported in this repo because of they are part of the spee.ch implementation - -### Tests -* This package uses `mocha` with `chai` for testing. -* Before running tests, create a `testingConfig.js` file in `devConfig/` by copying `testingConfig.example.js` -* To run tests: - * To run all tests, including those that require LBC (like publishing), simply run `npm test` - * To run only tests that do not require LBC, run `npm run test:no-lbc` - -### URL formats -Below is a list of all possible urls for the content on spee.ch -* controlling, free `LBRY` claim - * spee.ch/claim (show) - * spee.ch/claim.ext (serve) -* specific `LBRY` claim - * spee.ch/claim_id/claim - * spee.ch/claim_id/claim.ext -* all free contents for the controlling `LBRY` channel - * spee.ch/@channel -* a specific `LBRY` channel - * spee.ch/@channel:channel_id -* a specific claim within the controlling `LBRY` channel - * spee.ch/@channel/claim (show) - * spee.ch/@channel/claim.ext (serve) -* a specific claim within a specific `LBRY` channel - * spee.ch/@channel:channel_id/claim - * spee.ch/@channel:channel_id/claim.ext - -## Bugs -If you find a bug or experience a problem, please report your issue here on github and find us in the lbry discord! diff --git a/customize.md b/customize.md new file mode 100644 index 00000000..090772d3 --- /dev/null +++ b/customize.md @@ -0,0 +1,73 @@ +# Configure your own spee.ch + +## * Change some **css** + + * Navigate to *public/assets/css* folder and open **general.css** for editing. +`$ cd public/assets/css` +`$ nano general.css` + + * Add `background-color: yellow;` to the `html, body` declaration. +```css +html, body { +margin: 0; +padding: 0; +height: 100%; +word-wrap: break-word; +background-color: yellow; +} +``` +* + * Restart the server, and you should see your site with a yellow background! +`$ npm run start:dev` + +* Update the custom **About** Page component + * Most of the components used by [www.spee.ch](http://www.spee.ch) are taken from the spee.ch-components repo, but you can override those components by defining your own locally. As part of the [www.spee.ch](http://www.spee.ch) repo, a local custom **About** page is already included. You can edit the contents of this component in the *src/views/pages/* folder. + `$ cd src/views/pages/AboutPage` + `$ nano index.jsx` + + * Change the text, or edit the **HTML** however you like. + * Restart the server, and you should see your site with an updated **About** page! + `$ npm run start:dev` + +* Add a new custom Logo component. + + * To create your own custom component to override the defaults, create a folder and **index.jsx** file for the component in the *src/views/components* folder. + + `$ cd src/views/components` + `$ mkdir Logo` + `$ cd Logo` + `$ touch index.jsx` + `$ nano index.jsx` + + * Create a simple react component in **index.jsx**. +```js +import React from 'react'; +function Logo () { +return ( +

My Logo

+); +}; +export default Logo; +``` +* + * Restart the server, and you should see your site with a new Logo in the top left corner! +`$ npm run start:dev` + +**__4. Bonus:__** + +* [Install PM2](http://pm2.keymetrics.io/docs/usage/quick-start/) and run your server with PM2. + +* Install PM2. +`$ sudo npm i -g pm2` + +* From inside your project’s folder, start your server with PM2. +`$ pm2 start server.js` + * Visit your site and see if it is running! + +* Sync Your Spee.ch Instance with the full **Blockchain** + + * Install **lbrycrdd**. + * Install **lbry-decoder**. + * Start **lbry-decoder**. + * Install & run [spee.ch-sync](https://github.com/billbitt/spee.ch-sync) + * Configure **spee.ch-sync**. diff --git a/fullstart.md b/fullstart.md new file mode 100644 index 00000000..69219932 --- /dev/null +++ b/fullstart.md @@ -0,0 +1,171 @@ +# Create Your Own Spee.ch! + +## 1. Prerequisites +### You will need the following tools installed + +* Node (v8 LTS). +* Make sure you install from the **Node** website [link](https://nodejs.org/en/download/). +* npm (should come installed with Node). +* Git +* Curl +* Tmux +* Unzip + +### Make sure **npm** is up-to-date. +``` +$ npm update +``` + +### Setup a Webserver to serve **Spee.ch** from Port **3000**. +* If you are using a server provided by **lbry**, we will have **caddy** installed already. +* If you are using your own server, make sure to have a web server installed and set up to serve from port **3000**. +* Nginx instructions (recommended). + * Insert directions for certbot before installing. + * Install [Nginx](http://nginx.org/en/docs/install.html). + * Create a config file called `spee.ch` in */etc/nginx/sites-available* + * see example: [config file](https://github.com/lbryio/spee.ch/nginx_example_config). + * Rename all mentions of *sub.domain.com* with your subdomain name. + * Run this command to link the sites-available. + + `$ ln -s /etc/nginx/sites-available/speech /etc/nginx/sites-enabled/speech` + + * Restart Nginx. + + `$ sudo service nginx restart` + + * Try visiting your website. + * If Nginx is working, you should get a **502** error because there is nothing running on **3000** yet. + * If you get the default Nginx greeting, you have not properly configured it to serve from port **3000**. + * You can find logs in */var/log/nginx/* too. + * Caddy tutorial: [https://caddyserver.com/tutorial](https://caddyserver.com/tutorial) +### MySql + +* Install MySql + * [Instructions](https://dev.mysql.com/doc/mysql-installation-excerpt/5.7/en) +* Create user **root**. + * Note: We are going to access **mysql** as **root** for this setup, but you may want to create a separate user in the future. + * Keep your password somewhere handy! +* Create a database called **lbry** and make sure you can use it. + + `CREATE DATABASE lbry;` + + `$ USE lbry;` + + `$ exit; (or press ‘ctl + d’)` + +* Try logging into mysql. + + `$ mysql -u username -p` + +* If you are using a **LBRY** server, your **password** is the one provided for **ssh**. + * Note: If it fails, try using `sudo`. + +##2. Install & Run the LBRY Daemon + +### Install **lbrynet** +_note: if you have a server from LBRY, lbrynet is already installed, you can skip to 2.4._ +``` +$ wget --quiet -O ~/latest_daemon.zip https://lbry.io/get/lbrynet.linux.zip +$ unzip -o -u "~/latest_daemon.zip" +``` +### Start lbrynet +``` +$ tmux +$ ./lbrynet-daemon +``` + +### Detach (exit) the tmux session and leave **lbrynet** running in the background. + +press `ctrl` + `b` then `d` to detach + +### Get LBC! + +Get a list of your wallets: + +``` +$ ~/lbrynet-cli wallet_list +``` + +Send some LBC to one of the addresses from your wallet. + +Check your balance again: + +``` +$ ~/lbrynet-cli wallet_balance +``` + +You should have **LBC**! + +## 3. Set up Spee.ch + +### Clone the spee.ch repo + +``` +$ git clone https://github.com/lbryio/www.spee.ch.git +``` + +Change directory into your site’s folder + +``` +$ cd ` or `$ cd www.spee.ch +``` + +Install dependencies + +``` +$ npm install +``` + +Run the config cli: + +``` +$ npm run configure +``` + +Check your site configs +``` +$ cd config/ +$ nano siteConfig.json +``` +add your ip address in `config/siteConfig.json` + +### Build & run + +Run the below command to transpile, build, and start your server. +``` +$ npm run start +``` + +_**Note:** if you had to use `sudo` to login to **mysql** above, you may have issues with this step._ + +Spee.ch should now be running ! + +Visit your site in the browser. Try publishing an image! + + +## 4. Bonus: + +### Install PM2 and run your server with PM2 + +Install PM2 +``` +$ sudo npm i -g pm2 +``` + +From inside your project’s folder, start your server with PM2. +``` +$ pm2 start server.js +``` + +Visit your site and see if it is running! + +### Sync Your Spee.ch Instance with the full **Blockchain** + +Install **lbrycrdd** + +Install **lbry-decoder** + +Start **lbry-decoder** + +Install & run [spee.ch-sync](https://github.com/billbitt/spee.ch-sync) + diff --git a/nginx_example_config b/nginx_example_config new file mode 100644 index 00000000..4b643834 --- /dev/null +++ b/nginx_example_config @@ -0,0 +1,40 @@ +# Speech nginx configuration + +server { + listen 80; + server_name sub.domain.com; + + listen 443 ssl; + + ssl_certificate /etc/letsencrypt/live/sub.domain.com/fullchain.pem; + ssl_certificate_key /etc/letsencrypt/live/sub.domain.com/privkey.pem; + + ssl_session_cache shared:SSL:20m; + ssl_session_timeout 1440m; + ssl_protocols TLSv1 TLSv1.1 TLSv1.2; + ssl_prefer_server_ciphers on; + # Using list of ciphers from https://github.com/cloudflare/sslconfig + ssl_ciphers EECDH+CHACHA20:EECDH+AES128:RSA+AES128:EECDH+AES256:RSA+AES256:EECDH+3DES:RSA+3DES:!MD5; + + # if letsencrypt is not working, this is probably preventing it from getting to .well-known + if ($scheme = http) { + rewrite ^ https://$server_name$request_uri? permanent; + } + +# gzip_static on; +# gzip_http_version 1.0; + + access_log /var/log/nginx/speech_nginx_access_log; + error_log /var/log/nginx/speech_nginx_error_log; + + location / { + proxy_read_timeout 5m; + proxy_pass http://127.0.0.1:3000; + proxy_set_header X-Real-IP $remote_addr; + proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; + proxy_set_header X-Forwarded-Proto $scheme; + proxy_set_header X-Forwarded-Port $server_port; + proxy_set_header Host $host; + proxy_pass_header Server; + } +} diff --git a/test/test-embed.html b/test/test-embed.html deleted file mode 100644 index b0953586..00000000 --- a/test/test-embed.html +++ /dev/null @@ -1,25 +0,0 @@ - - - - - - - Document - - - test embed - -

no identifier, no ending

- no identifier, no ending - -

no identifier, yes ending

- no identifier, yes ending - -

yes identifier, no ending

- yes identifier, no ending - -

yes identifier, yes ending

- yes identifier, yes ending - - diff --git a/test/test-iframe.html b/test/test-iframe.html deleted file mode 100644 index 86e4dbff..00000000 --- a/test/test-iframe.html +++ /dev/null @@ -1,44 +0,0 @@ - - - - - - - Document - - - -

i frame: weather.gov

- - -

i frame: dev1.spee.ch video direct embed page

- - -

i frame: dev1.spee.ch image direct asset

- - -

i frame: image from internet

- - -

i frame: giphy

- - -

i frame: giphy 2

- - -