fixed

.gitignore

@@ -1,3 +1,3 @@
 node_modules/
 
-client/node_modules/`
+client/node_modules/

client/package.json

@@ -2,7 +2,7 @@
   "name": "svelte-app",
   "version": "1.0.0",
   "scripts": {
-    "build": "rollup -c",
+    "build": "rollup -c ",
     "dev": "rollup -c -w",
     "start": "sirv public"
   },
@@ -22,6 +22,7 @@
     "tailwindcss": "^2.0.2"
   },
   "dependencies": {
+    "@rollup/plugin-replace": "^2.3.4",
     "sirv-cli": "^1.0.0",
     "socket.io-client": "^3.1.0"
   }

client/public/index.html

@@ -4,11 +4,17 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
 
-    <title>Svelte app</title>
-
+    <title>Chat - App</title>
+    <meta name="description" content="Simple chat app and creating room" />
+    <meta name="og:description" content="Simple chat app and creating room" />
+    <meta
+      name="twitter:description"
+      content="Simple chat app and creating room"
+    />
+    <meta name="theme-color" content="#2196f3" />
     <link rel="icon" type="image/png" href="/favicon.png" />
     <link rel="stylesheet" href="/build/bundle.css" />
-
+    <link rel="manifest" href="manifest.json" />
     <script defer src="/build/bundle.js"></script>
   </head>
 

client/public/manifes.json

@@ -0,0 +1,7 @@
+{
+  "theme_color": "#2196f3",
+  "background_color": "#2196f3",
+  "display": "browser",
+  "scope": "/",
+  "start_url": "/"
+}

client/rollup.config.js

@@ -5,6 +5,7 @@ import livereload from 'rollup-plugin-livereload'
 import { terser } from 'rollup-plugin-terser'
 import css from 'rollup-plugin-css-only'
 import sveltePreprocess from 'svelte-preprocess'
+import replace from '@rollup/plugin-replace'
 
 const production = !process.env.ROLLUP_WATCH
 
@@ -42,6 +43,9 @@ export default {
     file: 'public/build/bundle.js',
   },
   plugins: [
+    replace({
+      'process.env.isProd': production,
+    }),
     svelte({
       preprocess: sveltePreprocess({ postcss: true }),
       compilerOptions: {

client/src/components/Button.svelte

@@ -2,7 +2,6 @@
   import { createEventDispatcher } from 'svelte'
 
   const dispathcer = createEventDispatcher()
-  export let variant = 'primary'
 
   function forward(e) {
     dispathcer('click', e)

client/src/const.js

@@ -1 +1,5 @@
 export const ID_KEY = 'chat-app.id'
+
+export const SOCKET_ENDPOINT = !process.env.isProd
+  ? 'http://localhost:3000/'
+  : 'https://morning-oasis-02038.herokuapp.com/'

client/src/store.js

@@ -1,11 +1,11 @@
 import io from 'socket.io-client'
 import { writable } from 'svelte/store'
-import { ID_KEY } from './const'
+import { ID_KEY, SOCKET_ENDPOINT } from './const'
 
 export const users = writable([])
 export const loggedUser = writable()
 
-export const socket = io('http://localhost:3000', {
+export const socket = io(SOCKET_ENDPOINT, {
   transports: ['websocket', 'polling'],
 })
 

index.js

@@ -42,6 +42,8 @@ io.on('connection', (socket) => {
   socket.on('user-leave', handleLeaveAndDisconnect)
 })
 
-http.listen(3000, () => {
-  console.log('listening on port 3000')
+const PORT = process.env.PORT || 3000
+
+http.listen(PORT, () => {
+  console.log(`listening on port ${PORT}`)
 })