Skip to content

Commit 9f1d30d

Browse files
exaby73exaby73
committed
feat(storage): migrate to vite + ts
1 parent 33803eb commit 9f1d30d

12 files changed

+15446
-5692
lines changed

Diff for: ‎.gitignore

+2
Original file line numberDiff line numberDiff line change
@@ -5,3 +5,5 @@
55
**/*.bak
66
.idea
77
.firebaserc
8+
dist/
9+
**/ui-debug.log

Diff for: ‎config.ts

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
export const firebaseConfig = {
2+
// Your web app's Firebase configuration here
3+
// See https://firebase.google.com/docs/web/setup#add-sdks-initialize
4+
};

Diff for: ‎firebase.json

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
{
2+
"hosting": {
3+
"public": "dist",
4+
"ignore": [
5+
"firebase.json",
6+
"**/.*",
7+
"**/node_modules/**"
8+
]
9+
},
10+
"storage": {
11+
"rules": "storage.rules"
12+
},
13+
"emulators": {
14+
"auth": {
15+
"port": 9099
16+
},
17+
"storage": {
18+
"port": 9199
19+
},
20+
"ui": {
21+
"enabled": true,
22+
"port": 4000
23+
},
24+
"singleProjectMode": true
25+
},
26+
"functions": {
27+
"source": "functions"
28+
}
29+
}

Diff for: ‎package-lock.json

+15,220-5,586
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

Diff for: ‎package.json

+8-1
Original file line numberDiff line numberDiff line change
@@ -19,10 +19,17 @@
1919
"devDependencies": {
2020
"eslint": "^8.39.0",
2121
"eslint-plugin-promise": "^6.1.1",
22-
"lerna": "^6.6.1"
22+
"lerna": "^6.6.1",
23+
"typescript": "^5.1.6",
24+
"vite": "^4.4.9"
2325
},
2426
"scripts": {
27+
"dev": "vite",
28+
"build": "vite build",
2529
"bootstrap": "lerna bootstrap",
2630
"test": "scripts/test.sh"
31+
},
32+
"dependencies": {
33+
"firebase": "^10.1.0"
2734
}
2835
}

Diff for: ‎storage.rules

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
rules_version = '2';
2+
3+
// Craft rules based on data in your Firestore database
4+
// allow write: if firestore.get(
5+
// /databases/(default)/documents/users/$(request.auth.uid)).data.isAdmin;
6+
service firebase.storage {
7+
match /b/{bucket}/o {
8+
9+
// This rule allows anyone with your Storage bucket reference to view, edit,
10+
// and delete all data in your Storage bucket. It is useful for getting
11+
// started, but it is configured to never expire and it
12+
// leaves your app open to attackers.
13+
//
14+
// Make sure to write security rules for your app before you deploy, or else
15+
// all client requests to your Storage bucket will be allowed.
16+
match /{allPaths=**} {
17+
allow read, write: if true
18+
}
19+
}
20+
}

Diff for: ‎storage/firebase.json

-10
This file was deleted.

Diff for: ‎storage/index.html

+58-95
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<!DOCTYPE html>
1+
<!doctype html>
22
<!--
33
Copyright (c) 2016 Google Inc.
44
@@ -15,105 +15,68 @@
1515
limitations under the License.
1616
-->
1717
<html>
18-
<head>
19-
<meta charset=utf-8 />
20-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
21-
<title>Firebase SDK for Cloud Storage Quickstart</title>
18+
<head>
19+
<meta charset="utf-8" />
20+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
21+
<title>Firebase SDK for Cloud Storage Quickstart</title>
2222

23-
<!-- Material Design Theming -->
24-
<link rel="stylesheet" href="https://code.getmdl.io/1.1.3/material.orange-indigo.min.css">
25-
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
26-
<script defer src="https://code.getmdl.io/1.1.3/material.min.js"></script>
23+
<!-- Material Design Theming -->
24+
<link
25+
rel="stylesheet"
26+
href="https://code.getmdl.io/1.1.3/material.orange-indigo.min.css"
27+
/>
28+
<link
29+
rel="stylesheet"
30+
href="https://fonts.googleapis.com/icon?family=Material+Icons"
31+
/>
32+
<script defer src="https://code.getmdl.io/1.1.3/material.min.js"></script>
2733

28-
<link rel="stylesheet" href="main.css">
29-
</head>
30-
<body>
31-
<div class="demo-layout mdl-layout mdl-js-layout mdl-layout--fixed-header">
32-
33-
<!-- Header section containing title -->
34-
<header class="mdl-layout__header mdl-color-text--white mdl-color--light-blue-700">
35-
<div class="mdl-cell mdl-cell--12-col mdl-cell--12-col-tablet mdl-grid">
36-
<div class="mdl-layout__header-row mdl-cell mdl-cell--12-col mdl-cell--12-col-tablet mdl-cell--8-col-desktop">
37-
<h3>Firebase SDK for Cloud Storage Quickstart</h3>
34+
<link rel="stylesheet" href="main.css" />
35+
</head>
36+
<body>
37+
<div class="demo-layout mdl-layout mdl-js-layout mdl-layout--fixed-header">
38+
<!-- Header section containing title -->
39+
<header
40+
class="mdl-layout__header mdl-color-text--white mdl-color--light-blue-700"
41+
>
42+
<div class="mdl-cell mdl-cell--12-col mdl-cell--12-col-tablet mdl-grid">
43+
<div
44+
class="mdl-layout__header-row mdl-cell mdl-cell--12-col mdl-cell--12-col-tablet mdl-cell--8-col-desktop"
45+
>
46+
<h3>Firebase SDK for Cloud Storage Quickstart</h3>
47+
</div>
3848
</div>
39-
</div>
40-
</header>
41-
42-
<main class="mdl-layout__content mdl-color--grey-100">
43-
<div class="mdl-cell mdl-cell--12-col mdl-cell--12-col-tablet mdl-grid">
49+
</header>
4450

45-
<!-- Container for the demo -->
46-
<div class="mdl-card mdl-shadow--2dp mdl-cell mdl-cell--12-col mdl-cell--12-col-tablet mdl-cell--12-col-desktop">
47-
<div class="mdl-card__title mdl-color--light-blue-600 mdl-color-text--white">
48-
<h2 class="mdl-card__title-text">Upload a file</h2>
49-
</div>
50-
<div class="mdl-card__supporting-text mdl-color-text--grey-600" id="messagesDiv">
51-
<p>Select a file below. When it is uploaded, a link will be displayed to the uploaded file.</p>
52-
<h6>Choose File</h6>
53-
<input type="file" id="file" name="file"/>
54-
<h6>File URL:</h6>
55-
<span id="linkbox"></span>
51+
<main class="mdl-layout__content mdl-color--grey-100">
52+
<div class="mdl-cell mdl-cell--12-col mdl-cell--12-col-tablet mdl-grid">
53+
<!-- Container for the demo -->
54+
<div
55+
class="mdl-card mdl-shadow--2dp mdl-cell mdl-cell--12-col mdl-cell--12-col-tablet mdl-cell--12-col-desktop"
56+
>
57+
<div
58+
class="mdl-card__title mdl-color--light-blue-600 mdl-color-text--white"
59+
>
60+
<h2 class="mdl-card__title-text">Upload a file</h2>
61+
</div>
62+
<div
63+
class="mdl-card__supporting-text mdl-color-text--grey-600"
64+
id="messagesDiv"
65+
>
66+
<p>
67+
Select a file below. When it is uploaded, a link will be
68+
displayed to the uploaded file.
69+
</p>
70+
<h6>Choose File</h6>
71+
<input type="file" id="file" name="file" />
72+
<h6>File URL:</h6>
73+
<span id="linkbox"></span>
74+
</div>
5675
</div>
5776
</div>
58-
</div>
59-
</main>
60-
</div>
61-
62-
<!-- Import and configure the Firebase SDK -->
63-
<!-- These scripts are made available when the app is served or deployed on Firebase Hosting -->
64-
<!-- If you do not serve/host your project using Firebase Hosting see https://firebase.google.com/docs/web/setup -->
65-
<script src="/__/firebase/9.22.1/firebase-app-compat.js"></script>
66-
<script src="/__/firebase/9.22.1/firebase-auth-compat.js"></script>
67-
<script src="/__/firebase/9.22.1/firebase-storage-compat.js"></script>
68-
<script src="/__/firebase/init.js"></script>
69-
70-
<script>
71-
var auth = firebase.auth();
72-
var storageRef = firebase.storage().ref();
73-
74-
function handleFileSelect(evt) {
75-
evt.stopPropagation();
76-
evt.preventDefault();
77-
var file = evt.target.files[0];
78-
79-
var metadata = {
80-
'contentType': file.type
81-
};
82-
83-
// Push to child path.
84-
storageRef.child('images/' + file.name).put(file, metadata).then(function(snapshot) {
85-
console.log('Uploaded', snapshot.totalBytes, 'bytes.');
86-
console.log('File metadata:', snapshot.metadata);
87-
// Let's get a download URL for the file.
88-
snapshot.ref.getDownloadURL().then(function(url) {
89-
console.log('File available at', url);
90-
document.getElementById('linkbox').innerHTML = '<a href="' + url + '">Click For File</a>';
91-
});
92-
}).catch(function(error) {
93-
console.error('Upload failed:', error);
94-
});
95-
}
96-
97-
window.onload = function() {
98-
document.getElementById('file').addEventListener('change', handleFileSelect, false);
99-
document.getElementById('file').disabled = true;
77+
</main>
78+
</div>
10079

101-
auth.onAuthStateChanged(function(user) {
102-
if (user) {
103-
console.log('Anonymous user signed-in.', user);
104-
document.getElementById('file').disabled = false;
105-
} else {
106-
console.log('There was no anonymous session. Creating a new anonymous user.');
107-
// Sign the user in anonymously since accessing Storage requires the user to be authorized.
108-
auth.signInAnonymously().catch(function(error) {
109-
if (error.code === 'auth/operation-not-allowed') {
110-
window.alert('Anonymous Sign-in failed. Please make sure that you have enabled anonymous ' +
111-
'sign-in on your Firebase project.');
112-
}
113-
});
114-
}
115-
});
116-
}
117-
</script>
118-
</body>
80+
<script type="module" src="main.ts"></script>
81+
</body>
11982
</html>

Diff for: ‎storage/main.ts

+81
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
import { initializeApp } from "firebase/app";
2+
import { getAuth, connectAuthEmulator, signInAnonymously } from "firebase/auth";
3+
import {
4+
connectStorageEmulator,
5+
getStorage,
6+
ref,
7+
uploadBytes,
8+
getDownloadURL,
9+
} from "firebase/storage";
10+
import { firebaseConfig } from "../config";
11+
12+
const fileInput = document.getElementById("file") as HTMLInputElement;
13+
const linkBox = document.getElementById("linkbox") as HTMLDivElement;
14+
15+
/**
16+
* When running on Firebase Hosting, no options need to be passed.
17+
* If you want to run the app locally, see https://firebase.google.com/docs/web/setup
18+
*/
19+
initializeApp(firebaseConfig);
20+
21+
const auth = getAuth();
22+
const storage = getStorage();
23+
24+
// Locally, we use the firebase emulators.
25+
if (window.location.hostname === "localhost") {
26+
connectAuthEmulator(auth, "http://localhost:9099");
27+
connectStorageEmulator(storage, "localhost", 9199);
28+
}
29+
30+
const storageRef = ref(storage);
31+
32+
function handleFileSelect(e: Event) {
33+
e.stopPropagation();
34+
e.preventDefault();
35+
36+
const target = e.target as HTMLInputElement | null;
37+
const files = target?.files;
38+
if (!target || !files) {
39+
return;
40+
}
41+
42+
const file = files[0];
43+
44+
// Push to child path.
45+
uploadBytes(ref(storageRef, "images/" + file.name), file)
46+
.then(function (snapshot) {
47+
console.log("Uploaded", snapshot.metadata.size, "bytes.");
48+
console.log("File metadata:", snapshot.metadata);
49+
// Let's get a download URL for the file.
50+
getDownloadURL(snapshot.ref).then(function (url) {
51+
console.log("File available at", url);
52+
linkBox.innerHTML = '<a href="' + url + '">Click For File</a>';
53+
});
54+
})
55+
.catch(function (error) {
56+
console.error("Upload failed:", error);
57+
});
58+
}
59+
60+
fileInput.addEventListener("change", handleFileSelect, false);
61+
fileInput.disabled = true;
62+
63+
auth.onAuthStateChanged(function (user) {
64+
if (user) {
65+
console.log("Anonymous user signed-in.", user);
66+
fileInput.disabled = false;
67+
} else {
68+
console.log(
69+
"There was no anonymous session. Creating a new anonymous user.",
70+
);
71+
// Sign the user in anonymously since accessing Storage requires the user to be authorized.
72+
signInAnonymously(auth).catch(function (error) {
73+
if (error.code === "auth/operation-not-allowed") {
74+
window.alert(
75+
"Anonymous Sign-in failed. Please make sure that you have enabled anonymous " +
76+
"sign-in on your Firebase project.",
77+
);
78+
}
79+
});
80+
}
81+
});

Diff for: ‎tsconfig.json

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
{
2+
"compilerOptions": {
3+
"target": "ES6",
4+
"module": "ES2022",
5+
"moduleResolution": "NodeNext",
6+
"esModuleInterop": true,
7+
"forceConsistentCasingInFileNames": true,
8+
"strict": true,
9+
"skipLibCheck": true
10+
}
11+
}

Diff for: ‎vite-env.d.ts

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
/// <reference types="vite/client" />

Diff for: ‎vite.config.js

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import { defineConfig } from "vite";
2+
3+
export default defineConfig({
4+
base: "/",
5+
build: {
6+
rollupOptions: {
7+
input: {
8+
storage: "./storage/index.html",
9+
},
10+
},
11+
},
12+
});

0 commit comments

Comments
 (0)