Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 2 years ago.
Improve this question
I had successfully installed and and run admin-lte in my Node.js project. As we know they are providing us login, register and forgot password pages for ready to use.
So if I want to make an API (and that API is also made in Node.js) call on one of the page then what steps should I follow?
You should render html page in nodejs (for example inside express.js) and in express.js you can use template engine like: EJS - hbs ... see this Link.
And for use API inside adminLTE you should use front end web frameworks like: reactjs - angular - vuejs or use old jquery and etc. You can even render static web page and send data into template engine via Expressjs template engine, I explained above.
ReactJS version of the original AdminLTE dashboard: https://github.com/booleanhunter/ReactJS-AdminLTE
AdminLte for Angular 2:
https://github.com/mledour/angular-admin-lte
See this example for load static web page with hbs:
const express = require('express');
const app = express();
const port = 3000;
//Loads the handlebars module
const handlebars = require('express-handlebars');
//Sets our app to use the handlebars engine
app.set('view engine', 'handlebars');
//Sets handlebars configurations (we will go through them later on)
app.engine('handlebars', handlebars({
layoutsDir: __dirname + '/views/layouts',
}));
app.use(express.static('public'))
app.get('/', (req, res) => {
//Serves the body of the page aka "main.handlebars" to the container //aka "index.handlebars"
res.render('main', {layout : 'index'});
});
app.listen(port, () => console.log(`App listening to port ${port}`));
Related
I want to hosting my webapp to firebase hosting but it seems that firebase doesn't work with pug template because it return me 404 page not found with my "index.pug".
Thanks in advance.
Firebase Hosting won't compile any sort of frameworks or templates for you. It just serves static content. If you want to use a pug template, you'll have to compile it, then move the static assets into the Firebase Hosting public directory.
tested as of 2020-05-16. express + pug works on firebase hosting.
a few notes :
test with a private window of your browser ;
after you deploy, it may take a couple more seconds for the pug page to be available. i'm from Hongkong while i'm deploying the functions to the default location us-central, not sure if this is related though ;
the view you submit to "res.render", for example, make sure it's index and NOT /index ;
try these :
[project folder root]/functions/index.js
const functions = require('firebase-functions');
const path = require("path");
const express = require("express");
const app = express();
//###############################################################
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'pug');
//###############################################################
app.get("/index", function(req, res, next){
res.render("index", {title:"title lo, rendered from index.js"});
});
app.get("/page/:page_num", function(req, res, next){
const page_num = req.params.page_num;
res.render("page", {title:"page here", page_num: page_num});
});
// export to firebase functions
exports.app = functions.https.onRequest(app);
[project folder root]/functions/views/index.pug
h1 okok hello from pug
p this is a line
p another line here
p here is the title : #{title}
[project folder root]/functions/views/page.pug
h1 page
p this is page title : #{title}
p this is page number : #{page_num}
To do that you should use cloud functions. You can use handlebars or pug. Here it is an example using handlebars.
https://github.com/firebase/functions-samples/tree/master/template-handlebars
I haven't used pug, but it should be in the same way that handlebars.
You should divide the dynamic files in the functions folder (pug files goes there under views) and your CSS and JS should be in the public folder. The public only serves static content.
There is a really good video to get a step by step guide (also you can learn about CDN and caching content) here https://www.youtube.com/watch?v=LOeioOKUKI8
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 2 months ago.
Improve this question
I have a NextJS app with a custom express server. My pages/index.js is making an internal call to my express route /api/users. This is done using isomorphic-unfetch inside getinitialprops() like this:
const res = await fetch('http://localhost:3000/api/users');
My custom express server on top of NextJS has API routes that send back JSON data. Like so:
//some code before
const app = next({ dev })
const handle = app.getRequestHandler()
let apiRoutes = require('./routes/apiRoutes.js');
app.prepare().then(() => {
const server = express()
server.use('/api', apiRoutes);
server.get('*', (req, res) => {
return handle(req, res)
})
//more code
So my question is, is this the way to communicate between the my client side code and server side code? If so:
How do I protect these endpoints so that the user doesn't just type in myNextJSwebsite.com/api/users and get a JSON response?
This is a common pattern to separate between api & renderer.
In order to secure your api end-point you will need to implement some kind of authorization, there is common lib for auturization in express, called passport, you can check the types, it supports most of the common methods.
I personally prefer the JWT way, because it allows to work with many instances of my server due to the fact that there are no user session on the server.
I've been researching over this issue for the past month and I am not finding any useful solutions. I am currently trying to host a website using the firebase functions, along with express.js and the EJS view engine.
I'm going into the issue of serving static CSS files into the EJS files. I've looked all over but can't seem to find any proper answer that helps.
I have the following file structure (inside the functions folder):
public
views
index.js
Here's my index.js:
const functions = require('firebase-functions');
const express = require("express");
const ejs = require("ejs");
var path = require('path');
// // Create and Deploy Your First Cloud Functions
// // https://firebase.google.com/docs/functions/write-firebase-functions
//
// exports.helloWorld = functions.https.onRequest((request, response) => {
// response.send("Hello from Firebase!");
// });
var app = express();
app.set('view engine', 'ejs');
// app.use('/static', express.static('public'));
app.use(express.static(__dirname + "/public"));
app.get("/", (request, response) => {
response.render("test");
})
// app.listen(5000, () => {
// console.log("Active app on port 5000");
// });
exports.webApp = functions.https.onRequest(app);
The page it is rendering (test.ejs):
<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body></body>
</html>
And finally, the style.css file:
html {
background-color: black;
}
(The style.css is done like that along with the test.ejs only for testing as I was having a big issue with all of this)
I tried most of the solutions online, however all of them only work while running the express.js app locally and not through the firebase serve or deploy commands. I am totally lost in regards to this and any help is appreciated.
The TL;DR of the issue:
In normal NodeJS & Express hosting one needs to specify the directory of your static content. Since firebase hosting does this static content hosting for you (where the /public directory is hosted at your domain root),
Solution: you can do the following:
simply omit the app.use(express.static(__dirname + "/public")); (as this removes the duplicate hosting attempt that firebase hosting is doing for you)
all your styles, javascript, etc needs to omit the /public portion,
For example
from this:
link(rel="stylesheet", href="/public/styles/my-styles.css")
to this:
link(rel="stylesheet", href="/styles/my-styles.css")
You can test this:
Host your app with the original (faulty/incorrect static resource links), then browse to the static resource link - you should get a 404 or failure to load resource atleast.
Using the same "faulty" link, omit the ".../public..." portion of the url, your static content will render correctly.
This means firebase hosting is hosting all the content of the /public directory to the root of your domain.
Next, make the change by removing the static directory app.use() function and remove all traces of /public in your static content links (as shown above).
Browse to your page (that includes the altered static routes), your page will load correctly with all your styles, scripts, etc (assuming you don't have any faulty code ;) )
The Problem is because of the Google Cloud Plan.
In the beginning, all firebase users go with the Spark plan, which is completely free. In recently, Google Cloud may have blocked some features that we used free a year ago.
So, You need to go to Google Cloud console, then change the plan of your project you want to deploy. Then if you didn't register your payment card, you should do that for the firebase hosting or firebase functions feature.
A few minutes later, it loads all necessary files, such as a styling CSS, JS files that were missing when loading your deployed website.
Then enjoy your deployed website. ;)
If you are facing this problem in July 2021.
the firebase cloud function is not available for the Spark(free) plan.
You need to upgrade your project to a Blaze plan first (Worry not! This is Pay as you go plan. the spark plan is included in it, So you will be not charged until you exceed the limit).
To upgrade to the blaze plan you need to set up billing information in the Google Cloud platform which will be directed automatically when you opt for the upgrade.
Here is my code for EJS View engine setup in firebase function:
const functions = require('firebase-functions');
const express = require("express");
const app = express();
app.set("views",__dirname+"/tmp");
app.set("view engine","pug");
app.engine('pug', require('pug').__express);
app.get("/",p3p(p3p.recommended),function(req,res){
res.render("index");
});
app.get("/login",p3p(p3p.recommended),function(req,res){
res.render("login");
});
exports.main = functions.https.onRequest(app);
I hope you can relate it to the pug view engine and configure your setup in the firebase function for serving the static files.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 7 years ago.
Improve this question
I am a complete beginner to all aspects of the MEAN stack. I have a minimal implementation of an application that pulls data from a MongoDB and displays the data on an angular front end using a RESTful API. The front end was generated using yeoman. I used this tutorial: https://www.youtube.com/watch?v=OhPFgqHz68o
I have done some research into admin panels that I can integrate with node and best practices. I have found ready made panels such as this one: https://github.com/jedireza/drywall
My Questions are as follows:
How do I go about directing a user to either my application or the admin panel at login? Do I use express for this?
If I wanted to implement drywall (link posted above), how could I go about integrating it with my current application? i.e. Do I have to download drywall and then write my code within the files that come with it, or can I somehow integrate it with my currently written application?
I use Angularjs for the front end and Node.js with Express at the backend.
I am going to paste one demo of my routing.
Angular JS Routing Example - Using Routing Module
app.config(function($routeProvider, $locationProvider) {
$routeProvider
.when('/txn_history', {
templateUrl: 'views/add_user.html',
controller:'mainCtrl'
})
Express JS
Attached the directory for usage
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }))
app.use(express.static(__dirname + '/test'));
Using Routes Module for Node & adding a JS file that has function to add user
var routes = require('./routes');
var route_add_user = require('./routes/add_user');
Calling the function with the route here; .adduser is function name within that js file
app.get('/adduser', route_add_user.adduser);
I hope this helps
I am using node.js with express web framework and with jade template parser.
I am following the bootstrap examples and have problems with holder.js.
I have put holder.js script into static files (public directory), having in app.js the following:
app.use(express.static(path.join(__dirname, 'public')));
I wanted to display some images with following code in jade template:
img(data-src='/holder.js/500x500/auto')
And it does not work. I checked through the browser and I am able to see holder.js file correctly, but adding any parameters is causing that main page is displayed instead.
I am suspecting that static files handler thinks that there is no such file as holder/500x500/auto and redirects to main page. How can I fix that?
Here is a Runnable with Express and Jade with a couple of Holder placeholders: http://runnable.com/U6IlNqsTu-cR6ZT8/holder-js-in-express-using-jade-for-node-js-and-hello-world
The two placeholders use different themes, with one using the auto flag.
server.js:
var express = require('express')
var app = express();
app.set('view engine', 'jade')
app.get('/', function(req, res){
res.render('index')
})
var server = app.listen(80, function(){})
views/index.jade:
doctype html
html
body
script(src='//cdnjs.cloudflare.com/ajax/libs/holder/2.3.1/holder.min.js')
img(data-src='holder.js/200x200/lava/auto')
img(data-src='holder.js/200x200/sky')
Take the leading slash out of the data-src attribute: holder.js/500x500/auto.