feat: create build action for production, add configurable public url

.github/workflows/deploy_dev.yml

@@ -1,4 +1,4 @@
-name: Deploy dev
+name: Deploy prd
 
 on:
   push:
@@ -7,7 +7,7 @@ on:
 
 jobs:
   deploy:
-    environment: blueprints-dev
+    environment: blueprints-prd
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v2

.github/workflows/deploy_prd.yml

@@ -0,0 +1,48 @@
+name: Deploy dev
+
+on:
+  push:
+    branches:
+      - master
+
+jobs:
+  deploy:
+    environment: blueprints-dev
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v2
+        with:
+          node-version: "14.x"
+      - name: Get yarn cache directory path
+        id: yarn-cache-dir-path
+        run: echo "::set-output name=dir::$(yarn cache dir)"
+      - uses: actions/cache@v2
+        id: yarn-cache
+        with:
+          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
+          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-yarn-
+      - run: yarn
+      - run: yarn db-gen
+      - run: yarn nx build blueprints
+        env:
+          PUBLIC_URL: https://storage.googleapis.com/factorio-blueprints-assets/public
+      - name: Set up Cloud SDK
+        uses: google-github-actions/setup-gcloud@master
+        with:
+          project_id: ${{ secrets.GCP_PROJECT_ID }}
+          service_account_key: ${{ secrets.GCP_SA_KEY }}
+          export_default_credentials: true
+      - run: gcloud auth configure-docker --quiet
+      - name: Build and push
+        uses: docker/build-push-action@v2
+        with:
+          context: .
+          file: blueprints.github.Dockerfile
+          push: true
+          tags: eu.gcr.io/factorio-sites/blueprints
+      - run: gsutil -h "Cache-Control:public, max-age=31536000" -m rsync -r -d ./dist/apps/blueprints/.next/static gs://factorio-blueprints-assets/_next/static
+      - run: gsutil -h "Cache-Control:public, max-age=31536000" -m rsync -r -d ./dist/apps/blueprints/public gs://factorio-blueprints-assets/public
+      - run: gcloud run deploy factorio-blueprints-dev --image=eu.gcr.io/factorio-sites/blueprints --platform managed --region=europe-west4

.yalc/@fbe/editor/dist/Editor.d.ts

@@ -1,7 +1,7 @@
 import { Blueprint, IOilOutpostSettings } from './core/Blueprint';
 import { GridPattern } from './containers/BlueprintContainer';
 export declare class Editor {
-    init(canvas: HTMLCanvasElement): Promise<void>;
+    init(canvas: HTMLCanvasElement, basis_transcoder_base_url: string): Promise<void>;
     setRendererSize(width: number, height: number): void;
     get moveSpeed(): number;
     set moveSpeed(speed: number);

.yalc/@fbe/editor/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@fbe/editor",
-    "version": "1.0.0+4db8c378",
+    "version": "1.0.0+4f4eee93",
     "description": "A Factorio blueprint editor and renderer webapp",
     "author": "Teoxoy",
     "license": "MIT",
@@ -22,5 +22,5 @@
         "pathfinding": "^0.4.18",
         "pixi.js": "^6.0.0-rc.2"
     },
-    "yalcSig": "4db8c378010b5990474548640c7c809e"
+    "yalcSig": "4f4eee93c2881067899a7289c5c0e423"
 }

.yalc/@fbe/editor/yalc.sig

@@ -1 +1 @@
-4db8c378010b5990474548640c7c809e
+4f4eee93c2881067899a7289c5c0e423

apps/blueprints/gcp-storage-cors.json

@@ -1,6 +1,10 @@
 [
   {
-    "origin": ["https://factorioblueprints.tech", "https://dev.factorioblueprints.tech"],
+    "origin": [
+      "https://factorioblueprints.tech",
+      "https://static.factorioblueprints.tech",
+      "https://dev.factorioblueprints.tech"
+    ],
     "method": ["GET"],
     "responseHeader": ["Content-Type"],
     "maxAgeSeconds": 3600

apps/blueprints/next.config.js

@@ -7,6 +7,9 @@ module.exports = {
   poweredByHeader: false,
   reactStrictMode: true,
   assetPrefix: process.env.ASSET_PREFIX ? process.env.ASSET_PREFIX : "",
+  publicRuntimeConfig: {
+    PUBLIC_URL: process.env.PUBLIC_URL || "",
+  },
   webpack(config, options) {
     const { dev, isServer } = options;
 

apps/blueprints/public/star.svg

@@ -1,11 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg
-        className="material-icons"
-        xmlns="http://www.w3.org/2000/svg"
-        width="24"
-        height="24"
-        viewBox="0 0 24 24"
->
-    <path d="M0 0h24v24H0z" fill="none" />
-    <path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z" />
-</svg>

apps/blueprints/src/components/ImageEditor.tsx

@@ -1,6 +1,7 @@
 import { css } from "@emotion/react";
 import { parseBlueprintStringClient } from "@factorio-sites/web-utils";
 import { useEffect, useRef, useState } from "react";
+import { PUBLIC_URL } from "../utils/env";
 
 type FBE = typeof import("@fbe/editor");
 type Editor = InstanceType<FBE["Editor"]>;
@@ -43,7 +44,7 @@ export const ImageEditor: React.FC<ImageEditorProps> = ({ string, onError }) =>
       const editor = new FBE.Editor();
       const canvas = canvasRef.current;
       if (!canvas) return;
-      await editor.init(canvas);
+      await editor.init(canvas, PUBLIC_URL);
       canvas.style.width = "100%";
       canvas.style.height = "auto";
       editor.setRendererSize(canvas.offsetWidth, canvas.offsetHeight);

apps/blueprints/src/components/blueprint/Blueprint.tsx

@@ -17,6 +17,7 @@ import { BlueprintEntities } from "./BlueprintEntities";
 import { BlueprintImage, RENDERERS } from "./BlueprintImage";
 import { useAuth } from "../../providers/auth";
 import { Button } from "../Button";
+import { PUBLIC_URL } from "../../utils/env";
 
 const StyledBlueptintPage = styled(Grid)`
   grid-gap: 16px;
@@ -98,7 +99,7 @@ export const BlueprintSubPage: React.FC<BlueprintProps> = ({
             <span>Image</span>
             {renderer === "fbe" && (
               <img
-                src="/fbe.svg"
+                src={`${PUBLIC_URL}/fbe.svg`}
                 alt="Factorio blueprint editor"
                 css={{ display: "inline-block", height: "24px", marginLeft: "10px" }}
               />

apps/blueprints/src/components/blueprint/BlueprintBook.tsx

@@ -28,6 +28,7 @@ import { FactorioCode } from "../FactorioCode";
 import { BlueprintImage, RENDERERS } from "./BlueprintImage";
 import { Button } from "../Button";
 import { useAuth } from "../../providers/auth";
+import { PUBLIC_URL } from "../../utils/env";
 
 const StyledBlueptintPage = styled(Grid)`
   grid-gap: 16px;
@@ -180,7 +181,7 @@ export const BlueprintBookSubPage: React.FC<BlueprintBookSubPageProps> = ({
             <span>Image</span>
             {renderer === "fbe" && (
               <img
-                src="/fbe.svg"
+                src={`${PUBLIC_URL}/fbe.svg`}
                 alt="Factorio blueprint editor"
                 css={{ display: "inline-block", height: "24px", marginLeft: "10px" }}
               />

apps/blueprints/src/hooks/fbe.hook.ts

@@ -1,4 +1,5 @@
 import { useEffect, useState, RefObject } from "react";
+import { PUBLIC_URL } from "../utils/env";
 
 export type FBE = typeof import("@fbe/editor");
 export type Editor = InstanceType<FBE["Editor"]>;
@@ -15,7 +16,7 @@ export const useFBE = (canvasRef?: RefObject<HTMLCanvasElement>) => {
         const _editor = new _FBE.Editor();
         const canvas = canvasRef.current;
         if (!canvas) return;
-        await _editor.init(canvas);
+        await _editor.init(canvas, PUBLIC_URL);
         canvas.style.width = "100%";
         canvas.style.height = "auto";
         _editor.setRendererSize(canvas.offsetWidth, canvas.offsetHeight);

apps/blueprints/src/pages/_app.tsx

@@ -9,25 +9,26 @@ import { getSessionToken } from "@factorio-sites/node-utils";
 import { Header } from "../components/Header";
 import { AuthContext, AuthContextProps } from "../providers/auth";
 import { useFetch } from "../hooks/fetch";
+import { PUBLIC_URL } from "../utils/env";
 
 const globalStyles = css`
   @font-face {
     font-family: titillium web;
     font-style: normal;
     font-weight: 400;
-    src: url(/fonts/TitilliumWeb-Regular.ttf);
+    src: url(${PUBLIC_URL}/fonts/TitilliumWeb-Regular.ttf);
   }
   @font-face {
     font-family: titillium web;
     font-style: normal;
     font-weight: 600;
-    src: url(/fonts/TitilliumWeb-SemiBold.ttf);
+    src: url(${PUBLIC_URL}/fonts/TitilliumWeb-SemiBold.ttf);
   }
   @font-face {
     font-family: titillium web;
     font-style: normal;
     font-weight: 700;
-    src: url(/fonts/TitilliumWeb-Bold.ttf);
+    src: url(${PUBLIC_URL}/fonts/TitilliumWeb-Bold.ttf);
   }
 
   html {
@@ -81,7 +82,7 @@ const BlueprintsApp = ({
           <Global styles={globalStyles} />
           <Head>
             <title>Factorio Blueprints</title>
-            <link rel="shortcut icon" href="/favicon.png" />
+            <link rel="shortcut icon" href={`${PUBLIC_URL}/favicon.png`} />
             <meta name="description" content="Find blueprints for Factorio with advanced search" />
           </Head>
           {!auth.loading && (

apps/blueprints/src/pages/about.tsx

@@ -4,6 +4,7 @@ import { SimpleGrid, Box, Text, Image, Link } from "@chakra-ui/react";
 import { Panel } from "../components/Panel";
 import { css } from "@emotion/react";
 import { IoIosConstruct } from "react-icons/io";
+import { PUBLIC_URL } from "../utils/env";
 
 const headerCss = css`
   margin-top: 1rem;
@@ -75,7 +76,7 @@ export const Index: NextPage = () => {
               }}
             >
               <img
-                src="/fbe.svg"
+                src={`${PUBLIC_URL}/fbe.svg`}
                 alt="Factorio blueprint editor"
                 css={{ display: "inline-block", height: "18px" }}
               />

apps/blueprints/src/utils/env.ts

@@ -0,0 +1,4 @@
+import getConfig from "next/config";
+const { publicRuntimeConfig } = getConfig();
+
+export const PUBLIC_URL = publicRuntimeConfig.PUBLIC_URL as string;

yalc.lock

@@ -2,7 +2,7 @@
   "version": "v1",
   "packages": {
     "@fbe/editor": {
-      "signature": "4db8c378010b5990474548640c7c809e",
+      "signature": "4f4eee93c2881067899a7289c5c0e423",
       "file": true,
       "replaced": "./fbe-editor-v1.0.0.tgz"
     },