{"Hello /*__@appAccount__*/!"}
; \ No newline at end of file diff --git a/templates/frontend/gateway/README.md b/templates/frontend/gateway/README.md index 2bf7ff446..634e61e0e 100644 --- a/templates/frontend/gateway/README.md +++ b/templates/frontend/gateway/README.md @@ -1,34 +1,33 @@ -This is a [React](https://reactjs.org/) app bootstrapped with [`bos-workspace` component testing environment](https://github.com/urbit/bos-workspace) and [Urbit-aware NEAR Social VM](https://github.com/urbit/NearSocialVM). +This is a [React](https://reactjs.org/) app bootstrapped with [`bos-workspace` component development environment](https://github.com/nearbuilders/bos-workspace) and [Urbit-aware NEAR Social VM](https://github.com/urbit/NearSocialVM). ## Prerequisites - Make sure you have a [current version of Node.js](https://nodejs.org) installed – we are targeting versions `18` for frontend/gateways. - Have [Urbit environment setup](https://docs.urbit.org/courses/environment#creating-a-fake-ship) and running Urbit "fakeship". -> We strongly recommend you to follow our [creating your first Urbit-compatible NEAR BOS gateway](https://docs.urbit.org/) if you are new to Urbit or isn’t so familiar with BOS. +> We strongly recommend you to follow our [creating your first Urbit-compatible NEAR BOS gateway](https://docs.urbit.org/) if you are new to Urbit or aren't so familiar with BOS. -## Getting Started +## Getting started -First, run the development server: +To run locally, install packages: -``` -pnpm start +```bash +yarn ``` -Open [http://localhost:8081](http://localhost:8081) with your browser to see the result. +Then, run the command: -This gateway is an ideal environment to develop Urbit-aware components to deploy on the NEAR blockchain, or develop an entire Urbit aware BOS gateway. +```bash +yarn run dev +``` -Build local components run +This will start a local [bos-workspace](https://github.com/nearbuilders/bos-workspace) to build and serve your local widgets via RPC proxy, and watch for changes to the gateway itself. -``` -pnpm run component-build -#or -pnpm start -``` +If the gateway does not automatically open, go to [http://localhost:8081](http://localhost:8081) with your browser to see the result. -To connect BOS gateway to your Urbit fakeship -specify credentials in `.env` file. +## Connecting to Urbit +To connect a BOS gateway to your Urbit fakeship, +specify the credentials in `.env` file. ```.env # fakeship name without ~ @@ -41,18 +40,18 @@ REACT_APP_HOST=http://localhost:8080 REACT_APP_CODE=lidlut-tabwed-pillex-ridrup ``` -Get fakeship access key, run +code command in your fakeship’s dojo (Urbit's command-line application). +Get the fakeship access key by running the `+code` command in your fakeship’s dojo (Urbit's command-line application). -``` +```cmd > +code lidlut-tabwed-pillex-ridrup ``` -### Gateway structure +## Project Structure -`/src` - React dApp, gateway itself. +`/src` - React dApp, gateway itself connected to the [Urbit-aware NEAR Social VM](https://github.com/urbit/NearSocialVM) -- it is prepared as a web component, originally derived from [near-bos-webcomponent](https://github.com/nearbuilders/near-bos-webcomponent). -`/apps` - a bos-workspace testing environment for your components. +`/widget` - bos-workspace directory to hold `Widget` component code. The contents of this directory are built and served, and are automatically hooked up to the gateway via a proxy RPC. ### Importing NEAR components @@ -96,7 +95,7 @@ Sends a poke (like a POST request) to the local ship. This method takes the app you’d like to send a [poke](https://docs.urbit.org/glossary/poke) to, the [mark](https://docs.urbit.org/glossary/mark) that tells the app what kind of poke it is, and a json object with the data you’d like to send. -``` +```javascript Urbit.pokeUrbit('hood', 'helm-hi', 'hello urbit!') .then(res => { console.log(`${pokeVal} been printed in dojo`) @@ -154,5 +153,7 @@ To learn more about NEAR, take a look at the following resources: ## Deploying +To deploy your widgets to the near.social contract on the NEAR blockchain, follow the [bos-workspace deploy guide](https://github.com/NEARBuilders/bos-workspace?tab=readme-ov-file#deployment) to either deploy via command line, or an automated git workflow. + - [Deploying Component]() - [Deploying BOS gateway]() diff --git a/templates/frontend/gateway/bos.config.json b/templates/frontend/gateway/bos.config.json new file mode 100644 index 000000000..56f772bb9 --- /dev/null +++ b/templates/frontend/gateway/bos.config.json @@ -0,0 +1,4 @@ +{ + "account": "urbitlabs.near", + "index": "urbitlabs.near/widget/app" +} diff --git a/templates/frontend/gateway/config/webpack.development.js b/templates/frontend/gateway/config/webpack.development.js index 1d301bb2a..2aa1a074d 100644 --- a/templates/frontend/gateway/config/webpack.development.js +++ b/templates/frontend/gateway/config/webpack.development.js @@ -1,8 +1,8 @@ -const path = require('path') -const { HotModuleReplacementPlugin } = require('webpack') +const path = require('path'); +const { HotModuleReplacementPlugin } = require('webpack'); module.exports = () => ({ - devtool: false, + devtool: 'inline-source-map', module: { rules: [ { @@ -32,23 +32,27 @@ module.exports = () => ({ }, { // compiles Sass to CSS - loader: 'sass-loader' - } - ] - } - ] - }, - output: { - path: path.resolve(__dirname, 'dist'), - filename: '[name].bundle.js', - publicPath: '/' + loader: 'sass-loader', + options: { + // Prefer `dart-sass` + implementation: require('sass'), + sassOptions: { + quietDeps: true, + }, + }, + }, + ], + }, + ], }, devServer: { open: true, static: path.resolve(__dirname, '../dist'), port: 8081, compress: true, - historyApiFallback: true + historyApiFallback: { + disableDotRule: true, + }, }, plugins: [new HotModuleReplacementPlugin()] }) diff --git a/templates/frontend/gateway/config/webpack.production.js b/templates/frontend/gateway/config/webpack.production.js index 6f3b47284..c548348a2 100644 --- a/templates/frontend/gateway/config/webpack.production.js +++ b/templates/frontend/gateway/config/webpack.production.js @@ -1,5 +1,6 @@ const MiniCssExtractPlugin = require('mini-css-extract-plugin') const CssMinimizerPlugin = require('css-minimizer-webpack-plugin') +const TerserPlugin = require('terser-webpack-plugin') const path = require('path') module.exports = () => { @@ -14,7 +15,7 @@ module.exports = () => { rules: [ // { // test: /\.(css)$/, - // use: [MiniCssExtractPlugin.loader, "css-loader"], + // use: [MiniCssExtractPlugin.loader, 'css-loader'], // // options: { // // sourceMap: false, // // }, @@ -34,7 +35,7 @@ module.exports = () => { // Run postcss actions loader: 'postcss-loader', options: { - // `postcssOptions` is needed for postcss 8.x; + // `postcssOptions` is needed for postcss 8.x // if you use postcss 7.x skip the key postcssOptions: { // postcss plugins, can be exported to postcss.config.js @@ -46,7 +47,14 @@ module.exports = () => { }, { // compiles Sass to CSS - loader: 'sass-loader' + loader: 'sass-loader', + options: { + // Prefer `dart-sass` + implementation: require('sass'), + sassOptions: { + quietDeps: true + } + } } ] } @@ -60,7 +68,12 @@ module.exports = () => { ], optimization: { minimize: true, - minimizer: [new CssMinimizerPlugin(), '...'], + minimizer: [ + new CssMinimizerPlugin(), + new TerserPlugin({ + exclude: /webcomponentapp.js/ + }) + ], runtimeChunk: { name: 'runtime' } diff --git a/templates/frontend/gateway/data.json b/templates/frontend/gateway/data.json new file mode 100644 index 000000000..5e02b832a --- /dev/null +++ b/templates/frontend/gateway/data.json @@ -0,0 +1,3 @@ +{ + "urbitlabs.near": {} +} diff --git a/templates/frontend/gateway/package.json b/templates/frontend/gateway/package.json index 02320340d..020081b87 100644 --- a/templates/frontend/gateway/package.json +++ b/templates/frontend/gateway/package.json @@ -10,37 +10,34 @@ "serve": "webpack serve", "watch": "npm-watch", "webpack": "webpack", - "dev": "npm run component-build && npm run serve -- --env mode=development", + "bw": "bos-workspace", + "dev": "concurrently \"npm run dev:gateway\" \"wait-on dist/index.html && npm run dev:apps\"", + "dev:apps": "npm run bw dev -- -p 8081 -g ./dist", + "dev:gateway": "npm run webpack -- --env mode=development --watch", "prod": "npm run webpack -- --env mode=production", "prod:analyze": "npm run prod -- --env presets=analyze", - "build": "npm run component-build && npm run prod", - "start": "npm run dev", - "component-build": "bos-workspace dev" - }, - "watch": { - "component-build": [ - "apps/widget/components/**.*" - ] + "build": "npm run prod", + "start": "npm run dev:gateway && http-server -p 8081 dist --allowed-hosts=all" }, "dependencies": { + "@braintree/sanitize-url": "^6.0.2", + "@urbit/http-api": "^2.3.0", "bootstrap": "^5.3.3", "bootstrap-icons": "^1.11.3", - "bos-workspace": "github:urbit/bos-workspace", - "dompurify": "^3.1.2", "dotenv-webpack": "^8.1.0", "error-polyfill": "^0.1.3", - "npm-watch": "^0.13.0", "near-api-js": "^2.1.3", + "near-social-vm": "github:urbit/NearSocialVM", + "near-social-vm-types": "^1.0.0", "react": "^18.3.1", "react-bootstrap": "^2.10.2", "react-bootstrap-typeahead": "^6.3.2", "react-dom": "^18.3.1", - "react-router-dom": "^5.3.4", + "react-router-dom": "^6.20.0", "sass": "^1.76.0", "sass-loader": "^14.2.1", - "webpack": "^5.91.0", - "@urbit/http-api": "^2.3.0", - "near-social-vm": "github:urbit/NearSocialVM" + "socket.io-client": "^4.7.5", + "webpack": "^5.91.0" }, "eslintConfig": { "extends": [ @@ -65,6 +62,7 @@ "@babel/preset-env": "^7.24.5", "@babel/preset-react": "^7.24.1", "babel-loader": "^8.3.0", + "bos-workspace": "^1.0.0-alpha", "browserify-zlib": "^0.2.0", "buffer": "^6.0.3", "clean-webpack-plugin": "^4.0.0", @@ -83,6 +81,7 @@ "stream-http": "^3.2.0", "style-loader": "^3.3.4", "url": "^0.11.3", + "wait-on": "^7.2.0", "webpack": "^5.91.0", "webpack-bundle-analyzer": "^4.10.2", "webpack-cli": "^4.10.0", diff --git a/templates/frontend/gateway/public/index.html b/templates/frontend/gateway/public/index.html index 085f3925d..ad4a27c47 100644 --- a/templates/frontend/gateway/public/index.html +++ b/templates/frontend/gateway/public/index.html @@ -24,7 +24,6 @@ - - +