There is a UI5 sample app:
https://github.com/SAP/openui5-sample-app
and it can be easily hosted with:
UI5 serve -o index.html
or with npm run serve-dist after building
But, how do i host it with express?
Strictly speaking, you ARE using an express app, when using the UI5 server via the command UI5 serve -o index.html. This code initializes the express app.
If you want to do it by your own, you can use the following code in an app.js file and start it via node app.js:
'use strict';
const express = require('express');
const app = express();
app.use(express.static('webapp'));
app.listen(8080, () => {*
console.log(`App listening at http://localhost:8080`)
})
This app basically does nothing else than serving files from the webapp folder. One disadvantage over using the UI5 Server is that you need to provide the resources in some way. You can reference the ui5 resources from a Content Delivery Network if you change the bootstrap script in you index.html file as show here:
<script id="sap-ui-bootstrap"
src="https://openui5.hana.ondemand.com/1.84.0/resources/sap-ui-core.js"
data-sap-ui-libs="sap.m"
...
This would serve the example app from your self-coded UI5 app.
Related
I have a node express app with middleware that's intercepting all calls before it serves static content:
app.use((req, res, next) => {
console.log(`Request: ${req.url}`)
next()
})
app.use('/', express.static('public'))
The public directory serves up a static website.
I get the initial document request logged when loading the site for the first time, but when I click a link on the site the static HTML content IS loaded, BUT
the chrome dev tools don't show any network request
the express middleware doesn't log any request
I'm trying to debug this middleware (there's additional logic to add), but Chrome isn't even making the request to the localhost express server and seemingly just loads the content direct from disk.
How can I get Chrome to send all localhost requests to the express server?
I have developed a sveltekit app. During a development phase, I use a Vote configuration to proxy my api to a backend on same domain but different port. It works perfectly but when I compile for deployment the proxy stopped working. I saw that vite provides proxy only during development. How can I have a proxy also in production? Do I need an express project to host my compiled sveltekit app and proxy routes to the backend?
Ok I think I got it.
As mentioned in the official sveltekit node adapter
https://github.com/sveltejs/kit/tree/master/packages/adapter-node
I need to create a custom server for example using expressjs. From there using the http proxy I'm able to forward all the routes /api to the backend on port 3001
import { handler } from './build/handler.js';
import express from 'express';
import proxy from 'express-http-proxy';
const app = express();
const port = 3000;
const backend = 3001;
app.use('/api', proxy(`http://localhost:${backend}`));
app.use(handler);
app.listen(port, () => {
console.log(`Wine Diagnostic Frontend listening on port ${port}`);
console.log(`Reverse proxy forwarding to port ${backend}`);
});
As the guide says, the important thing to do after the sveltekit project is compiled, is to use the handler.js and not app.js in order to use a custom server.
I have files that are not stored in a CDN and would like to serve them with Next.js. These files are not intended to be integrated into Next.js and should not be placed in the public folder. More files will be added and I want to avoid using a custom Next.js server to do simple file serving for images that are not available during building. Additionally, this application will only be deployed locally and using a CDN is overkill for this situation.
Currently, I use Express.js and a Next.js custom server to use express.static to serve files, but this ends up slowing down Next.js and adds lots of unnecessary complexity to my stack. I'd rather just use the Next.js CLI to run my app instead of reinventing the wheel.
Is there a simple way I can serve static files within Next.js and outside the public directory?
I posted this question and my own answer here on StackOverflow because I was unable to find a good tutorial on how to do this. Nearly every google search says to use a custom server or to just put your files in the public folder, which is not what I was looking for. Hopefully, others who are looking for the same thing may find it here.
Disclaimer: I do not use Vercel to publish my applications, and I do not know if this answer will be applicable to Next.js on Vercel.
Next.js allows API routes to be customized to support Node.js HTTP handlers, which means express can also be used within Next.js API routes.
Here is some code to utilize express.static on a Next.js API route.
// pages/api/images/[name].js
// Tell Next.js to pass in Node.js HTTP
export const config = {
api: { externalResolver: true }
}
import express from 'express';
const handler = express();
const serveFiles = express.static('./path/to/files');
handler.use(['/api/images', '/images'], serveFiles);
// ^ ^
// Multiple endpoints are passed. The first one is used when visiting /api/images.
// The second one is used when visiting /images using the middleware rewrite I mention below.
// express is just a function that takes (http.IncomingMessage, http.ServerResponse),
// which Next.js supports when externalResolver is enabled.
export default handler;
However to get around visiting this endpoint via /api/images/filename, you can use Next.js's new middleware to rewrite the request!
// pages/images/_middleware.js
import { NextResponse } from 'next/server';
export function middleware(req) {
// Rewrite /images/... to /api/images/...
return NextResponse.rewrite('/api' + req.nextUrl.pathname);
}
With both these in use, visiting /images/photo.png will internally rewrite to /api/images/photo.png and in turn be handled by express.static, allowing you to serve files outside an API route and without using a custom server!
This code can surely be simplified and get rid of the need of initializing a express.js app just to handle a request, but its incredibly simple to integrate express.js into next.js without using a custom server!
I posted this question and my own answer here on StackOverflow because I was unable to find a good tutorial on how to do this. Nearly every google search says to use a custom server or to just put your files in the public folder, which is not what I was looking for. Hopefully, others who are looking for the same thing may find it here.
The public folder can only serve those files that were included at build time.
But we can do some workaround that can serve files that were not included at build time.
Solution starts here
We can create an api endpoint. For example /api/images-endpoint/[...slug].js
import fs from "fs";
import path from "path";
export default function handler(req, res) {
const imagePath = req.query.slug.join("/");
const filePath = path.resolve(".", `images-directory/${imagePath}`);
const imageBuffer = fs.readFileSync(filePath);
res.setHeader("Content-Type", "image/jpg");
return res.send(imageBuffer);
}
By this, our endpoint will read the image from the image directory and send it as a response.
Benifit/Note: This solution works for images that were added after Next project is build i-e npm run build or next build
Drawback: Using this, We can not build optimized images in Next JS Image component i-e next/image
I have an angular app hosted on Parse.com using their Javascript SDK. I want to force the users to access via SSL.
I have no actual cloud code other than the documentation suggested code to redirect to SSL.
cloud/main.js
require('cloud/app.js');
cloud/app.js
var express = require('express');
var app = express();
var parseExpressHttpsRedirect = require('parse-express-https-redirect');
app.use(parseExpressHttpsRedirect());
app.listen();
When I nav to http://myapp.parseapp.com index.html is delivered and no redirect is made.
I could write some javascript to redirect but users could opt out of it so its not really a solution.
Any help will be greatly appreciated.
What's happening here is that public/index.html exists and is served statically by the web server. Your express code isn't being run because this file exists on the file system.
If you go to http://myapp.parseapp.com/some-page-doesnt-exist.html however then you'll be redirected to HTTPS because the request is passed to your express code.
The solution is to delete public/index.html and to have all HTTP requests go through express. Then you can serve index.html using express.
https://parse.com/docs/hosting_guide#webapp
I'm developing a small web app using express framework and I'm having a tough time with static content configuration.
In my app I have several custom middleware functions and I don't want the static files (css, js, images,...) to be processed by them. I tried to put static configuration as the first middleware but it doesn't fix anything.
My code is something like this:
var app = express();
app.configure(function() {
app.set('port', 3000);
app.set('views', __dirname + '/views');
app.use(express.static(path.join(__dirname, 'public')));
app.use(myCustomMiddleware());
});
I log the requests that reach my custom middleware and I can see requests to css and js (files inside public folder) getting there.
My goal is to return as soon as possible when receiving a static file request.
Any tips on this?
Thanks.
I'm closing this question as the problem is my own code.
Trying to isolate the components I found that I was modifying incoming request URL unintentionally.