so.. from this Youtube tutorial: https://www.youtube.com/watch?v=NA21dUBfJhw&list=PL4cUxeGkcC9gcy9lrvMJ75z9maRw4byYp&index=33 I got some code for a 'doto-list'. The problem is the tutorial guy only did local hosting and I'm trying to actually host it on an actual webpage through Firebase. so what I did was adding const functions = require('firebase-functions') at the top and adding exports.app = functions.https.onRequest((request, response) => { response.send("Hello from Firebase!") at the bottom and the only result I get on the actual webpage is "Hello from Firebase!". Is there any way to make the entire 'todo-list' program work on my actual webpage?
index.js
const functions = require('firebase-functions');
var express = require('express');
var app = express();
var todoController = require('./todoController');
app.set('view engine', 'ejs');
app.use(express.static('./'));
todoController(app);
exports.app = functions.https.onRequest((request, response) => {
response.send("Hello from Firebase!");
});
todo.ejs
<html>
<head>
<title>Todo List</title>
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-
CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
<script src="./assets/todo-list.js"></script>
<link href="./assets/styles.css" rel="stylesheet"
type="text/css">
</head>
<body>
<div id="todo-table">
<form>
<input type="text" name="item" placeholder="Add new
item..." required />
<button type="submit">Add Item</button>
</form>
<ul>
<% for(var i=0; i < todos.length; i++){ %>
<li><%= todos[i].item %></li>
<% } %>
</ul>
</div>
</body>
</html>
todoController.js
var bodyParser = require('body-parser');
var data = [{item: 'get milk'}, {item: 'walk dog'}, {item: 'kick
some coding ass'}];
var urlencodedParser = bodyParser.urlencoded({extended: false});
module.exports = function(app) {
app.get('/todo', function(req, res){
res.render('todo', {todos: data});
});
app.post('/todo', urlencodedParser, function(req, res){
data.push(req.body);
res.json(data);
});
app.delete('/todo/:item', function(req, res){
data = data.filter(function(todo){
return todo.item.replace(/ /g, '-') !== req.params.item;
});
res.json(data);
});
};
todo-list.js
$(document).ready(function(){
$('form').on('submit', function(){
var item = $('form input');
var todo = {item: item.val()};
$.ajax({
type: 'POST',
url: '/todo',
data: todo,
success: function(data){
//do something with the data via front-end framework
location.reload();
}
});
return false;
});
$('li').on('click', function(){
var item = $(this).text().replace(/ /g, "-");
$.ajax({
type: 'DELETE',
url: '/todo/' + item,
success: function(data){
//do something with the data via front-end framework
location.reload();
}
});
});
});
edit: Turns out that as long as I delete response.send("Hello from Firebase!"); and just use exports.app=functions.https.onRequest(app);, it works... which means response.send("Hello from Firebase!); was making this code not work. Any idea why?
