This is a POC project that dmonstrates how you can create an app which is fully serverless. And by serverless, we mean - no server at all! Instead, we've created the full server architecture in the browser.
The watermark up is a good demonstartion of the server in client abilities. The app requires:
- Highly available server
- Work offline
- Consistent Data
- Upload / Download Files
- Background operations
You can see this full functioning app here
Routes use the same notion as express.js. You should configure them in routes.js
app.post("/data/*", (req, res) => {
...
});
app.get("/files/*", (req, res) => {
...
});
for example:
app.get("/data/*", (req, res) => {
let path = getDBPathFromUrl(req.url);
res.send(
readtheDatafromIndexedDb(
"data",
path,
)
.then(response => { return response; })
)
});
The server is a single-threaded based with event loop. All handlers should use async calls for IO. However, if you still need to run long task you can do this by defining workers to handle tasks that are consumed from a queue
for(var i=0; i < 5; i++){
new Worker('watermarkingWorker.js');
}
hustle.Queue.put({path: path}, {
tube: 'watermarking',
ttr: 3,
});
var consumer = new hustle.Queue.Consumer(fn, {
tube: 'watermarking',
delay: 100,
});
fn = () => {...}
- Install GitHub Pages -
npm install gh-pages --save-dev
- Add properties to
package.json
file -"http://{username}.github.io/{repo-name}"
and in the existing scripts property we to need to add predeploy and deploy.
"scripts": {
"predeploy": "npm run build",
"deploy": "gh-pages -d build"
}
3.deploy - npm run deploy
Other resources that don't match any route, will be fetched from the server, and cached for future usage.
caches.match(req).then(match => {
return fetch(req).then(response => {
return caches.open("resources").then(cache => cache.put(req, response.clone())).then(()=>
response
)
}).catch(()=> match);
Front end code is fully decoupled from server implementation. fetch
and resource fetching should be working natively.
handleDeleteFile = (path) => {
fetch(path, { method: 'DELETE' })
.then(this.fetchImageListFromServer())
}
<img src="/files/withoutWatermark/..." />