We built a web app using node, express and ejs. We want to deploy to CPanel. We copied the folders and the pages are not rendering. Do we need to change the routes to reflect the new folder structures and/or install node and all dependencies in the CPanel server? I did move things around and play with the routes a bit without much success. On my localhost I can see it perfectly, but once up it does not work.
So far my index.ejs is this:
<head>
<meta charset="UTF-8">
<title>Test de Zülliger</title>
<link rel="stylesheet" href="styles/style.css">
<link rel="shortcut icon" href="images/favicon.png">
</head>
the app.js is this:
const express = require('express');
const path = require('path');
const methodOverride = require('method-override');
const app = express();
const ejsMate = require('ejs-mate');
app.engine('ejs', ejsMate);
app.set('view engine', 'ejs');
app.set('views', path.join(__dirname, 'views'));
app.use(express.urlencoded({ extended: true }))
app.use(methodOverride('_method'));
app.use(express.static(path.join(__dirname, 'public')))
app.get('/', (req, res) => {
res.render('index')
});
app.get('/localizaciones', (req, res) => {
res.render('localizaciones/map')
});
app.get('/drawingpad', (req, res) => {
res.render('drawingpad/drawing-pad')
});
app.get('/finalizar', (req, res) => {
res.render('finalizar/finalizar')
});
const port = process.env.PORT || 3000;
app.listen(port, () => {
console.log(`Serving on port ${port}`)
});
my folder structure:
I did put index.ejs inside views and didn't make any difference, the CSS does not render and when on browser manually writing map.ejs it appears all the code, no render at all.
Deploying statically by just copying the files will only work for a static app, e.g. the build folder of a React application.
Node.js has to be installed and the server started in order for your application to work. This tutorial should help you when doing this in cpanel.
I am not sure how CPanel works, but for my knowledge (i do use MERN stack) you need all the code in one file. Therefore you need yarn run build or npm run build, which will make a build folder. Afterwards you upload just that folder and specify it in your hoster
Related
I am working to flesh out my portfolio site, and I am trying to add a link in a project block to a recent web project. I developed this side project in isolation from my portfolio site documents, but now that it's ready to show, I want to host it off of the same domain as my portfolio.
The problem I'm having is that the get request to the side project page won't show the index.ejs file. The format of the code at this moment represents just a simple test to get it to work at a basic level. This code works just fine on a local server, but when uploaded to run off my droplet, it shows the "Cannot GET /page" error.
Both my index.html and index.ejs files are hosted in a views folder. I have tried multiple variations of the filepath for the index.ejs file to no avail. Any help would be much appreciated!
server.js file
const express = require('express');
const app = express();
app.use(express.static('public'));
app.set('view engine', 'ejs');
app.get('/', function(req, res) {
res.sendFile(__dirname + '/index.html');
});
app.get('/page', function(req, res) {
res.render(__dirname + '/views/index.ejs');
});
const listener = app.listen(8080, function() {
console.log('Your app is listening on port ' + listener.address().port);
});
html file
<div class="project-tile">
<form action="/page" method="GET">
<button type="submit">Link</button>
</form>
</div>
The problem is, that when I'm deploying my website with FileZilla, I get a 403 forbidden. After a bit of searching for answers, it seems like it's because I don't have an index.html, but I'm using home.ejs instead. Can I set up my project, so it uses the home.ejs instead of an index.html?
I've made a one page website (which is going to be expanded to more pages), that works as a resume and I now need to deploy it to my domain.
It is the 2nd version of my website, as I've been making it alongside a web development course I've been taking. The first version was made from html, css and Bootstrap, as a static page. The new version includes JavaScript, node.js, express and ejs.
My file structure looks like this
Project:
node_modules
public
css
images
views:
partials
header.ejs
footer.ejs
home.ejs
app.js
package-lock.json
package.json
Everything works when I deploy it locally (localhost:3000). I am pretty new to the whole web development thing. Even though the course I took was really good, it didn't talk about deploying a website to your own domain name.
Here is the app.js file:
const express = require("express");
const bodyParser = require("body-parser");
const ejs = require("ejs");
var jsdom = require("jsdom");
const { JSDOM } = jsdom;
const { window } = new JSDOM();
const { document } = (new JSDOM('')).window;
global.document = document;
var $ = require("jquery")(window);
const app = express();
app.use(express.static("public"));
app.set('view engine', 'ejs');
app.use(bodyParser.urlencoded({
extended: true
}));
app.get("/", function(req, res){
res.render("home", {years: years, comp: comp, placing: placing});
});
app.listen("3000", function(){
console.log("Server started on port 3000");
});
EDIT:
I needed a webserver to install node.js on.
I am totally new to Expressjs (Nodejs) and I am using "Express application generator" here is a link. I am building simple website and using (Embedded JavaScript templating / EJS) and I want to add webpack to my app.
Here is my project structure.
Here is my app.js
var express = require('express');
var path = require('path');
var logger = require('morgan');
var index = require('./routes/index');
var app = express();
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');
// set path for static assets
app.use(express.static(path.join(__dirname, 'public')));
// routes
app.use('/', index);
// catch 404 and forward to error handler
app.use(function(req, res, next) {
var err = new Error('404 page.');
err.status = 404;
next(err);
});
// error handler
app.use(function(err, req, res, next) {
// render the error page
res.status(err.status || 500);
res.render('error', {status:err.status, message:err.message});
});
module.exports = app;
Does anyone have an idea how to do it, some example or anything that would help me?
Thanks everyone
Webpack is for single page application. There is only one index.html as the
hook, all the front-end contents will be generated by js files and bundled together by webpack then attached to the html hook.
If you use ejs or other template engine, you don't need webpack bundling your scripts, since you can split and load the scripts in your ejs files.
And your app.js and other Express things are backend things which run on your server, they don't need to be bundled or manipulated at all, you can do whatever you want, since those are on your server not users' browsers.
so just start to code your application.
I try to connect backend (NodeJS, Express) with Frontend (Angular 2), but have a problem.
When I start two servers separately, both client-side and server-side work fine.
In my situation:
localhost:4200 - Angular
localhost:3000 - NodeJS, Express
When I render any static html file in my VIEWS folder, it works correctly, but when I change the content of the html file to Angular Index.html, that uses components, it doesn’t work. I mean, it works, but doesn't load my components.
I suppose that problem is in the configuration, and my index.html doesn't know how to find and load components, but I don’t understand exactly where a mistake might be.
When I try to start both servers at the same port, my frontend part stops working.
I use Angular-CLI, NodeJS, Express and EJS.
My server.js code is:
var express = require('express');
var path = require('path');
var bodyParser = require('body-parser');
var index = require('./routes/index');
var tasks = require('./routes/tasks');
var port = 3000;
var app = express();
app.set('views', path.join(__dirname, 'views'));
app.set('view enjine', 'ejs');
app.engine('html', require('ejs').renderFile);
app.use(express.static(path.join(__dirname, 'views')));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false}));
app.use('/', index);
app.use('/api', tasks);
app.listen(port, function () {
console.log('Server started on port ' + port);
});
In the ROUTES folder my index.js code is:
var express = require('express');
var router = express.Router();
router.get('/', function(req, res, next) {
res.render('index.html');
});
module.exports = router;
My folders structure:
Picture of foldes
node_modules
routes
ruen-app
views
package.json
server.js
ruen-app is my client (Angular 2) folder.
So, my questions are:
How to connect these two parts?
Is it correct to start two servers at the same time - one for the frontend, another for the backend?
What is the best practice for MEAN applications to start from the scratch? I mean, what is the best way - two servers or one?
Spent 3 days, but found the solution.
On the stackoverflow:
Different ports for frontend and backend. How to make a request?
Angular-CLI proxy to backend doesn't work
I'm trying to access a static 'home.html' file from the public folder. The architecture of the app is:
public
home.html
routes
index.js
views
myapp.js
myapp.js:
var express = require('express');
var path = require('path');
var routes = require('./routes/index');
var app = express();
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');
app.use(express.static(path.join(__dirname, 'public')));
app.use('/', routes);
index.js:
var express = require('express');
var router = express.Router();
router.get('/', function(req, res, next) {
res.render('index', { title: 'Express' });
});
router.get('/about', function(req, res, next){
res.sendFile(__dirname + '/home.html');
});
module.exports = router;
The main problem I'm having is I'm unable to load the home.html file at '/about'. The "__dirname" in index.js is pointing to the routes folder, and I've tried concatenating '/../' to move up a directory, but I just get a 403 Forbidden Error. I suppose I could put the home.html file in the routes directory, but I really want to figure out how to solve the underlying problem. Of course, rendering the jade file from the views folder at '/' works perfectly fine. Thank you in advance for your help and expertise.
You are trying to use it in the wrong way. The reason that you get the forbidden error is that the clients shouldn't be able to access folders outside the static folder that you have selected.
What you can do is to select multiple static directories, like Setting up two different static directories in node.js Express framework
Though I recommend that you just place all your publically available files in the same directory.