I developed a small application with electron and expressjs. In development mode, the app works fine. But after packaging the app for the production mode I got the error that the home view is not found. Here are some details:
The main route in app.js
router.get('/', async (req,res) => {
res.render('home');
});
My file structure is:
In order to solve the problem I tried the following:
router.get('/', async (req,res) => {
var path = require('path');
res.render(path.join(__dirname+'/views/home.ejs'));
});
Now the view is loaded, but all the css and js files within home.ejs are not loaded
All css and js files are located under the public folder and within home.ejs, i refer to these files as follows:
<script src="/js/vendor/jquery-3.6.0.min.js"></script>
<script src="/js/vendor/bootstrap.bundle.min.js"></script>
<script src="/js/home.js"></script>
I tried both electron packagers, electron-forge and electron-builder and had the same error. Can you please help??
You need an express.static(...) statement somewhere in your app to serve the css and js files. How does that look? The following should work:
app.use("/js", express.static(__dirname + "/public/js"));
app.use("/css", express.static(__dirname + "/public/css"));
Related
Scenario:
I am making a basic web app using Vite & Tailwind. I set up my app as normal installing Vite, and Tailwind, and got everything running fine by testing for Tailwind css on localhost:5500.
Problem:
Once I added an Express server to the mix, and it sends the index.html in response to a 'GET' request # '/', I no longer get the compiled CSS from tailwind.
Is this an uncommon setup that should be troublesome?
You could possibly use a middleware like express.static
Example:
const express = require('express')
const app = express()
app.use(express.static(__dirname + '/public'))
app.get('/', (req, res) => {
res.sendFile(__dirname + '/index.html')
})
In this example, the express.static middleware is used to serve the public directory, which is where the compiled CSS files from Tailwind will be located. Then the express server will send the index.html file in response to a GET request at the root '/' path.
Extra: Alternatively you can also use Webpack or Parcel , which can automatically handle the process of bundling and serving your CSS files
I'm working on a express + vue project with the following structure (see below), and I have trouble accessing subroutes of the vue app directly in production (hosted on Heroku). For instance, I can go to www.example.com and can access subroutes from the index page, but typing www.example.com/subpage directly gives the following errors.
More context: I currently manually copy the built files from frontend/dist to public. To get it to work, I am using publicPath ./ in vue.config.js. In development if I change the publicPath to /, I don't get the above problem.
Uncaught SyntaxError: Unexpected token '<' (at chunk-vendors.25f4b4fa.js:1:1)
app.c661c8f0.js:1
Uncaught SyntaxError: Unexpected token '<' (at app.c661c8f0.js:1:1)
manifest.json:1
Manifest: Line: 1, column: 1, Syntax error.
Folder Structure
mainfolder
--> frontend (vue development files)
---> dist
--> src (express backend)
--> public (where I copy the built vue files)
---> js
---> css
---> img
---> index.html
express app.js file
app.use(express.static('public'));
app.use('*', function(req, res, next) {
res.sendFile(path.resolve(__dirname, '../public/index.html'));
});
app.use(require('connect-history-api-fallback')());
You are not serving static files properly. Let Node.Js ecosystems take care of returning your UI file.
// app.use(express.static('public'));
// app.use('*', function(req, res, next) {
// res.sendFile(path.resolve(__dirname, '../public/index.html'));
// });
app.use('/', express.static(path.join(__dirname, '../public')));
app.use(require('connect-history-api-fallback')());
If the index.htm does not load its JavaScript dependencies, you need to rebuild the UI taking care of subdomains.
To serve your static files in a better way, please look at this link.
I have a pug template inside my views folder under views/administration/assets/fixed-assets.pug
My default.pug which the fixed-assets.pug extends from is in my root views folder.
When I try to render the fixed-assets.pug view it looks for the default.pug inside the views/administration/assets/ directory rather than the views directory itself
Everything works fine if I take the fixed-assets.pug and place it in the views directory instead of the views/administration/assets/ directory and update the route accordingly.
How can I tell express to look for the default.pug in the views directory and the fixed-assets.pug in the views/administration/assets/ directory?
Here is my route
var express = require('express');
var secured = require('../lib/middleware/secured');
var router = express.Router();
/* GET fixed-assets page. */
router.get('/administration/fixed-assets', secured(), function(req, res, next) {
res.render('administration/assets/fixed-assets', {
title: 'Fixed Assets'
});
});
module.exports = router;
Here is my views/administration/assets/fixed-assets.pug
extends default.pug
block scripts
if !starter
script(src='/js/main.js')
block view
.animated.fadeIn
h1 Fixed Assets
and this is the error I'm getting
ENOENT: no such file or directory, open
'/usr/src/app/views/administration/assets/default.pug' at
/usr/src/app/views/administration/assets/fixed-assets.pug line 1
Thanks for your help!
In the docs for Includes it says:
If the path is absolute (e.g., include /root.pug), it is resolved by
prepending options.basedir. Otherwise, paths are resolved relative to
the current file being compiled.
The explanation for that is in the API Reference:
basedir: string The root directory of all absolute inclusion.
You can implement basedir globally like this in your main app.js/server.js file:
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'pug');
app.locals.basedir = path.join(__dirname, 'views');
Hi I am a newbie and started to learn about node recently. I took an Heroku tutorial on websockets (https://devcenter.heroku.com/articles/node-websockets) and adapted it for a specific project I was working on. In the example code there was a single index.html file with some embedded javascript. I moved this script out to a separate file and referenced it in the HTML. Everything worked fine locally but doesn't work when i deploy to Heroko. I chatted with the very helpful team at Heroku who informed me that my server side code is serving up all files as HTML and I need to change the code. They gave me some pointers and I tried as many things as I could over several days but to no avail. In the end they recommended coming to this forum as a way to solve the problem as it is beyond their scope. The existing code that serves up the index.html file is as follows:
const express = require('express');
const SocketServer = require('ws').Server;
const path = require('path');
const PORT = process.env.PORT || 3000;
const INDEX = path.join(__dirname, 'index.html');
const server = express()
.use((req, res) => res.sendFile(INDEX) )
.listen(PORT, () => console.log(Listening on ${ PORT }));
At first i edited this to include the line:
app.use(express.static('public'))
but this didn't work. I then amended as follows and it still doesn't work:
const INDEX = path.join(__dirname, 'index.html');
const JS = path.join(__dirname, 'client.js');
const server = express()
.use((req, res) => {
res.sendFile(INDEX);
res.sendFile(JS);
I have looked at other tutorials that work when i run them in isolation but when I try to adapt my above code it simply doesn't work. I would really appreciate if someone out there could point me in the right direction.
BTW this is what Heroku told me:
"To explain a bit further this error Uncaught SyntaxError: Unexpected token < is because the URL for http://thawing-journey-33085.herokuapp.com/client.js isn't serving a javascript file but is instead trying to serve the HTML for the homepage. This suggests you have an issue with the routing in your application which you'll need to review. This is probably because your server.js file doesn't check for any particular URL before sending the index.html file."
Thanks
I serve my static files like this:
// define the folder that will be used for static assets
app.use(Express.static(path.join(__dirname, '../public')));
// handle every other route with index.html, which will contain
// a script tag to your application's JavaScript file(s).
app.get('*', function (request, response){
response.sendFile(path.resolve(__dirname, '../public', 'index.html'));
});
This way i set the static folder in the express.static middleware so i can serve the files. And then i redirect all url request to the index.html
To know more: express static
Express isn't letting my web application load up AngularJS. My web application has a directory structure that basically looks like this:
\root
server.js
\angularApplication
index.html
\assets
angular.js
My server.js looks like this:
var express = require('express');
var app = express();
app.get("/", function(req, res) {
res.sendFile(__dirname + '/angularApplication/index.html');
});
app.use("/angularScripts", express.static(__dirname + '/angularApplication/assets'));
index.html loads fine, but the script doesn't load. I get this 404 error:
GET http://localhost:8000/angularScripts/angular.js
If I reference AngularJS in my HTML normally:
<script src="/relative-path-to/angular.js"></script>
then Express still won't get the files. What am I doing incorrectly, and why does Express refuse to serve up any my scripts?
The following worked for me:
app.use("/angularJS", express.static(__dirname + '/angularApplication/assets'));
But only if I reference the script in the HTML like this:
<script src="angularJS/angular.js"></script>
Obviously this isn't how app.use is meant to be used. The better solution I've found is this:
app.use(express.static(__dirname + '/angularApplication/assets'));
// app.use(express.static(__dirname + '/angularApplication/etc'));
These will serve up all of the files in the directory, and thus the scripts and stylesheets can be referenced like this instead on the front-end:
<script src="angular.js"></script>