Link express with svelte

-/node_modules/
-/public/build/
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
 
 
-.DS_Store
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# TypeScript v1 declaration files
+typings/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+.env.test
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+
+# Next.js build output
+.next
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and *not* Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port

+This is free and unencumbered software released into the public domain.
+
+Anyone is free to copy, modify, publish, use, compile, sell, or
+distribute this software, either in source code form or as a compiled
+binary, for any purpose, commercial or non-commercial, and by any
+means.
+
+In jurisdictions that recognize copyright laws, the author or authors
+of this software dedicate any and all copyright interest in the
+software to the public domain. We make this dedication for the benefit
+of the public at large and to the detriment of our heirs and
+successors. We intend this dedication to be an overt act of
+relinquishment in perpetuity of all present and future rights to this
+software under copyright law.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
+IN NO EVENT SHALL THE AUTHORS BE LIABLE FOR ANY CLAIM, DAMAGES OR
+OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE,
+ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
+OTHER DEALINGS IN THE SOFTWARE.
+
+For more information, please refer to <https://unlicense.org>

-type "npm run dev" in terminal to run
\ No newline at end of file
+# svelte-base
+Basic svelte and express template I use for my application
+
+## Commands:
+- `npm start` : Build the app in dev mode and launch the server
+- `npm run build` : Build the app
+- `npm run server` : Launch the server
+- `npm run release` : Build the app for production
+- `npm run dev` : Launch the server for test or developing
+
+You can change the port of the application in the server.js file

-.DS_Store
-thumbs.db
-*.log
-node_modules/
\ No newline at end of file

 {
 {
-  "name": "svelte-app",
+  "name": "svelte-base",
   "version": "1.0.0",
   "version": "1.0.0",
-  "private": true,
+  "description": "Basic svelte and express template I use for my application",
+  "main": "server.js",
   "scripts": {
   "scripts": {
-    "build": "rollup -c",
-    "dev": "rollup -c -w",
-    "start": "sirv public --no-clear --host 0.0.0.0"
+    "build": "webpack",
+    "release": "cross-env NODE_ENV=production webpack",
+    "server": "node server.js",
+    "start": "npm run build & npm run server",
+    "dev": "nodemon --watch ./src -e svelte,js,json --exec npm start"
   },
   },
-  "devDependencies": {
-    "@rollup/plugin-commonjs": "^17.0.0",
-    "@rollup/plugin-node-resolve": "^11.0.0",
-    "rollup": "^2.3.4",
-    "rollup-plugin-css-only": "^3.1.0",
-    "rollup-plugin-livereload": "^2.0.0",
-    "rollup-plugin-svelte": "^7.0.0",
-    "rollup-plugin-terser": "^7.0.0",
-    "svelte": "^3.0.0"
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Bigaston/svelte-base.git"
+  },
+  "author": "Bigaston",
+  "license": "UNLICENSED",
+  "bugs": {
+    "url": "https://github.com/Bigaston/svelte-base/issues"
   },
   },
+  "homepage": "https://github.com/Bigaston/svelte-base#readme",
   "dependencies": {
   "dependencies": {
-    "engine.io-parser": "^5.0.1",
+    "express": "^4.17.1",
     "jquery": "^3.6.0",
     "jquery": "^3.6.0",
-    "sirv-cli": "^1.0.0"
+    "nodemon": "^2.0.15",
+    "socket.io": "^4.3.2",
+    "socket.io-client": "^4.3.2"
+  },
+  "devDependencies": {
+    "cross-env": "^7.0.2",
+    "css-loader": "^3.5.2",
+    "style-loader": "^1.1.3",
+    "svelte": "^3.20.1",
+    "svelte-loader": "^2.13.6",
+    "webpack": "^4.42.1",
+    "webpack-cli": "^3.3.11"
   }
   }
 }
 }

 <!DOCTYPE html>
 <!DOCTYPE html>
-<html lang="en">
+<html lang="ko">
 <head>
 <head>
 	<meta charset='utf-8'>
 	<meta charset='utf-8'>
 	<meta name='viewport' content='width=device-width,initial-scale=1'>
 	<meta name='viewport' content='width=device-width,initial-scale=1'>
+	<link rel='icon' type='image/png' href='/public/favicon.png'>
+	<link rel='stylesheet' href='/public/global.css'>
 
 
-	<title>Svelte app</title>
-
-	<link rel='icon' type='image/png' href='/favicon.png'>
-	<link rel='stylesheet' href='/global.css'>
-	<link rel='stylesheet' href='/build/bundle.css'>
-
-	<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=046d27f1430524731d3ec6870f0c8923"></script>
-	<script defer src='/build/bundle.js'></script>
 </head>
 </head>
 
 
 <body>
 <body>
+	<noscript>
+		<p>This website need JavaScript to work</p>
+	</noscript>
+	
+	<main></main>
+
+	<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=046d27f1430524731d3ec6870f0c8923"></script>
+	<script src='./public/build/bundle.js'></script>
 </body>
 </body>
 </html>
 </html>

-import svelte from 'rollup-plugin-svelte';
-import commonjs from '@rollup/plugin-commonjs';
-import resolve from '@rollup/plugin-node-resolve';
-import livereload from 'rollup-plugin-livereload';
-import { terser } from 'rollup-plugin-terser';
-import css from 'rollup-plugin-css-only';
-
-const production = !process.env.ROLLUP_WATCH;
-
-function serve() {
-	let server;
-
-	function toExit() {
-		if (server) server.kill(0);
-	}
-
-	return {
-		writeBundle() {
-			if (server) return;
-			server = require('child_process').spawn('npm', ['run', 'start', '--', '--dev'], {
-				stdio: ['ignore', 'inherit', 'inherit'],
-				shell: true
-			});
-
-			process.on('SIGTERM', toExit);
-			process.on('exit', toExit);
-		}
-	};
-}
-
-export default {
-	input: 'src/main.js',
-	output: {
-		sourcemap: true,
-		format: 'iife',
-		name: 'app',
-		file: 'public/build/bundle.js'
-	},
-	plugins: [
-		svelte({
-			compilerOptions: {
-				// enable run-time checks when not in production
-				dev: !production
-			}
-		}),
-		// we'll extract any component CSS out into
-		// a separate file - better for performance
-		css({ output: 'bundle.css' }),
-
-		// If you have external dependencies installed from
-		// npm, you'll most likely need these plugins. In
-		// some cases you'll need additional configuration -
-		// consult the documentation for details:
-		// https://github.com/rollup/plugins/tree/master/packages/commonjs
-		resolve({
-			browser: true,
-			dedupe: ['svelte']
-		}),
-		commonjs(),
-
-		// In dev mode, call `npm run start` once
-		// the bundle has been generated
-		!production && serve(),
-
-		// Watch the `public` directory and refresh the
-		// browser on changes when not in production
-		!production && livereload('public'),
-
-		// If we're building for production (npm run build
-		// instead of npm run dev), minify
-		production && terser()
-	],
-	watch: {
-		clearScreen: false
-	}
-};

-// @ts-check
-
-/** This script modifies the project to support TS code in .svelte files like:
-
-  <script lang="ts">
-  	export let name: string;
-  </script>
- 
-  As well as validating the code for CI.
-  */
-
-/**  To work on this script:
-  rm -rf test-template template && git clone sveltejs/template test-template && node scripts/setupTypeScript.js test-template
-*/
-
-const fs = require("fs")
-const path = require("path")
-const { argv } = require("process")
-
-const projectRoot = argv[2] || path.join(__dirname, "..")
-
-// Add deps to pkg.json
-const packageJSON = JSON.parse(fs.readFileSync(path.join(projectRoot, "package.json"), "utf8"))
-packageJSON.devDependencies = Object.assign(packageJSON.devDependencies, {
-  "svelte-check": "^2.0.0",
-  "svelte-preprocess": "^4.0.0",
-  "@rollup/plugin-typescript": "^8.0.0",
-  "typescript": "^4.0.0",
-  "tslib": "^2.0.0",
-  "@tsconfig/svelte": "^2.0.0"
-})
-
-// Add script for checking
-packageJSON.scripts = Object.assign(packageJSON.scripts, {
-  "check": "svelte-check --tsconfig ./tsconfig.json"
-})
-
-// Write the package JSON
-fs.writeFileSync(path.join(projectRoot, "package.json"), JSON.stringify(packageJSON, null, "  "))
-
-// mv src/main.js to main.ts - note, we need to edit rollup.config.js for this too
-const beforeMainJSPath = path.join(projectRoot, "src", "main.js")
-const afterMainTSPath = path.join(projectRoot, "src", "main.ts")
-fs.renameSync(beforeMainJSPath, afterMainTSPath)
-
-// Switch the app.svelte file to use TS
-const appSveltePath = path.join(projectRoot, "src", "App.svelte")
-let appFile = fs.readFileSync(appSveltePath, "utf8")
-appFile = appFile.replace("<script>", '<script lang="ts">')
-appFile = appFile.replace("export let name;", 'export let name: string;')
-fs.writeFileSync(appSveltePath, appFile)
-
-// Edit rollup config
-const rollupConfigPath = path.join(projectRoot, "rollup.config.js")
-let rollupConfig = fs.readFileSync(rollupConfigPath, "utf8")
-
-// Edit imports
-rollupConfig = rollupConfig.replace(`'rollup-plugin-terser';`, `'rollup-plugin-terser';
-import sveltePreprocess from 'svelte-preprocess';
-import typescript from '@rollup/plugin-typescript';`)
-
-// Replace name of entry point
-rollupConfig = rollupConfig.replace(`'src/main.js'`, `'src/main.ts'`)
-
-// Add preprocessor
-rollupConfig = rollupConfig.replace(
-  'compilerOptions:',
-  'preprocess: sveltePreprocess({ sourceMap: !production }),\n\t\t\tcompilerOptions:'
-);
-
-// Add TypeScript
-rollupConfig = rollupConfig.replace(
-  'commonjs(),',
-  'commonjs(),\n\t\ttypescript({\n\t\t\tsourceMap: !production,\n\t\t\tinlineSources: !production\n\t\t}),'
-);
-fs.writeFileSync(rollupConfigPath, rollupConfig)
-
-// Add TSConfig
-const tsconfig = `{
-  "extends": "@tsconfig/svelte/tsconfig.json",
-
-  "include": ["src/**/*"],
-  "exclude": ["node_modules/*", "__sapper__/*", "public/*"]
-}`
-const tsconfigPath =  path.join(projectRoot, "tsconfig.json")
-fs.writeFileSync(tsconfigPath, tsconfig)
-
-// Add global.d.ts
-const dtsPath =  path.join(projectRoot, "src", "global.d.ts")
-fs.writeFileSync(dtsPath, `/// <reference types="svelte" />`)
-
-// Delete this script, but not during testing
-if (!argv[2]) {
-  // Remove the script
-  fs.unlinkSync(path.join(__filename))
-
-  // Check for Mac's DS_store file, and if it's the only one left remove it
-  const remainingFiles = fs.readdirSync(path.join(__dirname))
-  if (remainingFiles.length === 1 && remainingFiles[0] === '.DS_store') {
-    fs.unlinkSync(path.join(__dirname, '.DS_store'))
-  }
-
-  // Check if the scripts folder is empty
-  if (fs.readdirSync(path.join(__dirname)).length === 0) {
-    // Remove the scripts folder
-    fs.rmdirSync(path.join(__dirname))
-  }
-}
-
-// Adds the extension recommendation
-fs.mkdirSync(path.join(projectRoot, ".vscode"), { recursive: true })
-fs.writeFileSync(path.join(projectRoot, ".vscode", "extensions.json"), `{
-  "recommendations": ["svelte.svelte-vscode"]
-}
-`)
-
-console.log("Converted to TypeScript.")
-
-if (fs.existsSync(path.join(projectRoot, "node_modules"))) {
-  console.log("\nYou will need to re-run your dependency manager to get started.")
-}

+const express = require('express')
+const path = require("path")
+
+var app = express()
+
+const PORT = 1697;
+
+app.use("/public", express.static('./public'));
+
+app.get("/*", (req, res) => {
+	res.sendFile(path.join(__dirname, "./public/index.html"))
+})
+
+var serv = app.listen(PORT, () => console.log(`Serveur lauched on port ${PORT}`))

@@ -5,12 +5,16 @@
     export let sidebar_show = false;
     export let sidebar_show = false;
     let side = "right";
     let side = "right";
 
 
-    function showBar() {
-        sidebar_show = !sidebar_show;
+    function hide() {
+        if (window.scrollY < 400) {
+            sidebar_show = true
+        } else {
+            sidebar_show = false
+        }
     }
     }
 </script>
 </script>
 
 
-
+<svelte:window on:scroll={hide}></svelte:window>
 <SideBar bind:show={sidebar_show} {side}>
 <SideBar bind:show={sidebar_show} {side}>
     {festa.title}
     {festa.title}
 </SideBar>
 </SideBar>

@@ -19,6 +19,7 @@
         border-right: 1px solid #aaa;
         border-right: 1px solid #aaa;
         background: #fff;
         background: #fff;
         overflow-y: auto;
         overflow-y: auto;
+        padding: 2rem 1rem 0.6rem;
         width: 330px;
         width: 330px;
         z-index: 900;
         z-index: 900;
     }
     }

-<!DOCTYPE html>
-<html>
-<head>
-	<meta charset="utf-8">
-    <script src="http://code.jquery.com/jquery-3.6.0.min.js"></script>
-	<title>다음 지도 API</title>
-</head>
-<body>
-	<div id="map" style="width:100%;height:100vh;"></div>
-
-	<script src="https://dapi.kakao.com/v2/maps/sdk.js?appkey=046d27f1430524731d3ec6870f0c8923"></script>
-	<script>
-        
-        var url = "http://api.visitkorea.or.kr/openapi/service/rest/KorService/areaBasedList?ServiceKey=2lFkvQJYgzOOhwUKiUt8aZVNpd1PpBOf%2FfMNW17cl25DE0GUEDddeR9iGnuSUpggjUoIUgamfhcvnKQ3eH1dAw%3D%3D&contentTypeId=15&areaCode=&sigunguCode=&cat1=&cat2=&cat3=&listYN=Y&MobileOS=ETC&MobileApp=TourAPI3.0_Guide&arrange=A&numOfRows=12&pageNo=1&_type=json";
-            $.getJSON(url,function(data){
-            console.log(data);
-		var mapContainer = document.getElementById('map'), // 지도를 표시할 div 
-		    mapOption = {
-		        center: new kakao.maps.LatLng(37.56682, 126.97865), // 지도의 중심좌표
-		        level: 12, // 지도의 확대 레벨
-		        mapTypeId : kakao.maps.MapTypeId.ROADMAP // 지도종류
-		    }; 
-
-        var markers= [];
-		// 지도를 생성한다 
-        console.log(data.response.body.items.item.length);
-		var map = new kakao.maps.Map(mapContainer, mapOption); 
-           for(var i = 0; i<data.response.body.items.item.length;i++){
-                // 지도에 마커를 생성하고 표시한다
-                var marker = new kakao.maps.Marker({
-                    position: new kakao.maps.LatLng(data.response.body.items.item[i].mapy, data.response.body.items.item[i].mapx), // 마커의 좌표
-                    map: map // 마커를 표시할 지도 객체
-                });
-                markers.push(marker);
-                   // 마커 위에 표시할 인포윈도우를 생성한다
-
-            };
-            
-            for(var i = 0; i<data.response.body.items.item.length;i++){ // 왜 9까지 밖에 안되누 ㅠㅠ
-                var infowindow = new kakao.maps.InfoWindow({
-                content : '<div style="padding:5px;">'+data.response.body.items.item[i].title+'</div>' // 인포윈도우에 표시할 내용
-            });
-                infowindow.open(map, markers[i]);
-            }
-          })
-    
- 
-	</script>
-</body>
-</html>
\ No newline at end of file

+const path = require('path');
+
+const mode = process.env.NODE_ENV || 'development';
+const prod = mode === 'production';
+
+module.exports = {
+	entry: {
+		bundle: ['./src/main.js']
+	},
+	resolve: {
+		alias: {
+			svelte: path.resolve('node_modules', 'svelte')
+		},
+		extensions: ['.mjs', '.js', '.svelte'],
+		mainFields: ['svelte', 'browser', 'module', 'main']
+	},
+	output: {
+		path: __dirname + '/public/build',
+		filename: '[name].js',
+		chunkFilename: '[name].[id].js'
+	},
+	module: {
+		rules: [
+			{
+				test: /\.svelte$/,
+				use: {
+					loader: 'svelte-loader',
+					options: {
+						emitCss: true,
+						hotReload: true
+					}
+				}
+			},
+			{
+				test: /\.css$/,
+				use: ['style-loader', 'css-loader']
+			}
+		]
+	},
+	mode,
+	plugins: [],
+	devtool: prod ? false: 'source-map'
+};