fixing config in dev and prod

Author: wassfila

.env.example

@@ -1,10 +1,15 @@
 GITHUB_CLIENT_ID="xxx000x0x0x0x0x00xx0"
 GITHUB_CLIENT_SECRET="00xx0xx00x0x0xxx00xx00000x000x00x0x00xxx"
 SESSION_SECRET="x00x0x00x0x0x0x0000xx"
-HOST="https://127.0.0.1"
+
+# test 127.0.0.1 deploy microwebstacks.github.io
+PROTOCOL="https"
+HOST="127.0.0.1"
 PORT=3000
-USE_HTTPS=true
+
 CERT_FILE="cert/cert.pem"
 KEY_FILE="cert/key.pem"
-BASE='astro-big-doc'
+OUT_DIR="./temp"
+
+#optional
 SITE='http://microwebstacks.github.io'

config.js

@@ -3,11 +3,19 @@ import * as dotenv from 'dotenv'
 
 dotenv.config()
 
+let outdir = (process.env.OUT_DIR==null)?"./temp":process.env.OUT_DIR
+let protocol = process.env.PROTOCOL
+
+if(import.meta.env.MODE == "development"){
+    protocol = "http"
+}
+
 const config = {
     site:process.env.SITE,
     port:process.env.PORT,
+    url:`${protocol}://${process.env.HOST}:${process.env.PORT}`,
     rootdir: (process.env.ROOT_DIR==null)?process.cwd():process.env.ROOT_DIR,
-    outdir: (process.env.OUT_DIR==null)?"./temp":process.env.OUT_DIR
+    outdir: outdir
 }
 
 export {

integrations/nav_menu/menu_utils.js

@@ -3,7 +3,9 @@ import {dirname,join} from 'node:path'
 import {promises as fs} from 'fs';
 
 async function save_json(root_path,data){
-    await fs.writeFile(join(config.rootdir,root_path),JSON.stringify(data,undefined, 2))
+    const filepath = join(config.rootdir,root_path)
+    await fs.writeFile(filepath,JSON.stringify(data,undefined, 2))
+    console.log(` saved json file ${filepath}`)
 }
 
 function trim_ext(filename){

server/auth/auth_router.js

@@ -10,7 +10,7 @@ dotenv.config()
 
 const GitHubStrategy = Strategy;
 
-const callbackURL = process.env.HOST+":"+process.env.PORT+"/auth/github/callback"
+const callbackURL = process.env.PROTOCOL+"://"+process.env.HOST+":"+process.env.PORT+"/auth/github/callback"
 const strategyConfig = {
   clientID:     process.env.GITHUB_CLIENT_ID,
   clientSecret: process.env.GITHUB_CLIENT_SECRET,

server/server.js

@@ -23,13 +23,12 @@ app.use((req, res, next) => {
   })
 
 
-const use_https = ["true","1"].includes(process.env.USE_HTTPS.toLowerCase())
+console.log(`listening on ${process.env.PROTOCOL}://${process.env.HOST}:${process.env.PORT}`)
 
-if(use_https){
+if(process.env.PROTOCOL == "https"){
     const key = readFileSync(join(__dirname, process.env.KEY_FILE),'utf8')
     const cert = readFileSync(join(__dirname, process.env.CERT_FILE),'utf8')
     const httpsServer = https.createServer({key,cert},app)
-    console.log(`listening on ${process.env.HOST}:${process.env.PORT}`)
     httpsServer.listen(process.env.PORT);//443 for clear url
 }else{
     app.listen(process.env.PORT);

src/libs/utils.js

@@ -15,7 +15,11 @@ function isNewer(filepath,targetfile){
 
 function cache_file_url(source_file){
   const source_dir = dirname(source_file)
-  const targetroot = join(config.rootdir,config.outdir,"raw")
+  let outdir = config.outdir
+  if(import.meta.env.MODE == "development"){
+    outdir = "public"
+  }
+  const targetroot = join(config.rootdir,outdir,"raw")
   const source_file_base_name = basename(source_file)
   const file_rel_to_root = relative(config.rootdir,source_dir)
   const targetpath = resolve(targetroot,file_rel_to_root)
@@ -34,7 +38,11 @@ function relAssetToUrl(relativepath,refdir,baseUrl){
     if(existsSync(filepath)){
       //console.log(`   * impo*rt.me*ta.ur*l = ${import.meta.url}`)
 
-      const targetroot = join(config.rootdir,config.outdir,"raw")
+      let outdir = config.outdir
+      if(import.meta.env.MODE == "development"){
+        outdir = "public"
+      }
+      const targetroot = join(config.rootdir,outdir,"raw")
       const filerootrel = relative(config.rootdir,refdir)
       const targetpath = resolve(targetroot,filerootrel)
       const targetfile = join(targetpath,relativepath)

src/pages/about/index.astro

@@ -1,19 +1,25 @@
 ---
 import Layout from "@/layout/Layout.astro";
+import { config } from "@/config";
 const title = "About"
 console.log("Hello About")
-
 ---
 <Layout title={title}>
 	<h1>About</h1>
 	<a>This is 'About' page</a>
 </Layout>
-
+<div id="data-url" style="display: none;" data-url={config.url}></div>
 
 <script>
-	if(false){//test forward api
-		const test_api = await fetch("https://127.0.0.1:3000/api/test")
+	if(import.meta.env.MODE != "development"){
+		console.log("production mode")
+		const url = document.getElementById("data-url").getAttribute("data-url")
+		console.log(url)
+		const test_api = await fetch(`${url}/api/test`)
 		const data = await test_api.json()
 		console.log(data)
 	}
+	else{
+		console.log("development mode")
+	}
 </script>