ukchukx

$ docker network inspect kong-net
# Sample output
[
    {
        "Name": "kong-net",
        "Id": "1176776a97a0d22a44789cdd8fb4408cb80e4af086ac6474ab503704fda06c40",
        # ...
        "Containers": {
            # ...            "3a21018c6c9a6c0877ac182e7cd0e3e3da0af87b36d1f2a4882f76fe43a03a27": {
                "Name": "kc_backend",

ukchukx

$ curl -i -X POST --url http://localhost:8001/services/ --data 'name=kc-chat-backend' \
  --data 'url=http://172.19.0.4' --data 'port=10000'
# Sample output

HTTP/1.1 201 Created
Content-Type: application/json; charset=utf-8
Connection: keep-alive
Access-Control-Allow-Origin: *
Server: kong/1.4.3
Content-Length: 295

ukchukx

$ curl -i -X POST --url http://localhost:8001/services/kc-chat-backend/routes \
  --data 'paths[]=/api/kongchat' --data 'strip_path=false' --data 'methods[]=GET' \
  --data 'methods[]=POST'

# Sample output

HTTP/1.1 201 Created
Content-Type: application/json; charset=utf-8
Connection: keep-alive
Access-Control-Allow-Origin: *

ukchukx

$ curl -i -X GET --url http://localhost:8000/api/kongchat/ping

# Sample output

HTTP/1.1 200 OK
Content-Type: application/json; charset=utf-8
Content-Length: 18
Connection: keep-alive
X-Powered-By: Express
ETag: W/"12-6FyCUNJCdUkgXM8yXmM99u6fQw0"

ukchukx

$ curl -X POST http://kong:8001/services/kc-chat-backend/plugins \
    --data "name=cors" \
    --data "config.origins=*" \
    --data "config.methods=GET" \
    --data "config.methods=POST" \
    --data "config.methods=OPTIONS" \
    --data "config.headers=Accept" \
    --data "config.headers=Accept-Version" \
    --data "config.headers=Content-Length" \
    --data "config.headers=Content-MD5" \

ukchukx

npx degit sveltejs/template .
npm i  # install
npm i stream-chat dotenv
npm i -D postcss postcss-load-config svelte-preprocess tailwindcss @fullhuman/postcss-purgecss @rollup/plugin-replace # development dependencies
npx tailwind init
touch postcss.config.js
cp ../backend/.env . # Make a copy of backend's .env in frontend
npm run dev # and visit http://localhost:5000 in the browser

ukchukx

const purgecss = require('@fullhuman/postcss-purgecss')({
  content: ['./src/**/*.svelte', './src/**/*.html'],
  whitelistPatterns: [/svelte-/],
  defaultExtractor: content => content.match(/[A-Za-z0-9-_:/]+/g) || []
})

module.exports = {
  plugins: [
    require('tailwindcss'),
    ...(!process.env.ROLLUP_WATCH ? [purgecss] : [])

ukchukx

import svelte from 'rollup-plugin-svelte';
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import livereload from 'rollup-plugin-livereload';
import { terser } from 'rollup-plugin-terser';
import sveltePreprocess from 'svelte-preprocess';
import replace from '@rollup/plugin-replace';
import { config } from 'dotenv';

config();

ukchukx

<style global>
  @tailwind base;
  @tailwind components;
  @tailwind utilities;
</style>

ukchukx

<script>
import { onMount } from 'svelte';
import { StreamChat } from 'stream-chat/dist/index.js';

export let appName;
let loggedIn = false;
let online = false;
let token = '';
let username = '';
let message = '';