How can i get Express.js to serve after being Webpacked? - javascript

I'm trying to get a system together for transpiling my Node server (Express in this case) down, much in the same way as my client side scripts - with webpack.
The Express server is pretty basic. I import some node_modules and some local, relative files. Webpack seems to have no trouble parsing everything, importing the relative files and simply require()'ing node_modules (thanks to externals).
However, when I run the server (with node server.js) after webpacking, it get an error trying to access my index.html.
Error: ENOENT: no such file or directory, stat '/public/index.html'
at Error (native)
The server reports it is listening on 3000, but every attempted access logs this error and displays it in browser. I'm sending a premade HTML file with the following:
res.sendFile(path.resolve(__dirname, 'public', 'index.html'));
I've searched and discovered people using the babel-cli for just using Babel (and presets) alone to just run that on designated Node code, but then I cannot resolve any of the module paths.
Has anyone else successfully transpiled a Node server application and gotten it to actually serve? Should I use a different function to serving my client-side? Should I be going about this in a different way rather than Webpack?

I had the same problem with webpacked Express and this fixed it:
response.sendFile(path.resolve('./public/index.html'), err => err && next(err));
In my case the server.js and server.bundle.js files are in the root folder of my project.
If that's different in your case you can try:
response.sendFile(path.resolve('./public/index.html'), { root: __dirname }, err => err && next(err));

Related

Autodesk Forge web application - from visual studio code to close .exe file

I have a working forge application ( bim360 hub sidebar with forge viewer and some charts).
It is currently running from Visual Studio Code IDE only. I want to build the app into an .exe file in order to be able to send it to a user, upload it to a server with IIS, etc..
General details:
I used Petr Broz tutorial to set up the backend of the viewer and hub
(Forge online training - view your models https://www.youtube.com/watch?v=-O1e3gXCOEQ&t=8986s )
The app is running on Node.js
I tried to use 'nexe' module and build executable file. With this method, I need to specify index.js file ("an entry point") and define a 'nexe.config.js' file. I used the entry point start.js.
Eventually, I managed to create an exe file - and when I run it from the command line, I get an error
Missing FORGE_CLIENT_ID or FORGE_CLIENT_SECRET env. variables.
although I have them in the config.js
Main questions:
Is there another way to build a close exe file from visual studio code - for a forge web application?
Am i doing something wrong with the processes I mention above?
Is it even possible to deploy a web application to IIS using an exe file?? all of the documentation points toward Azur, AWS and heroku..
Relevant files:
1) start.js:
const path = require('path');//bringing in built in node js modeules ( to resulve file system path )
const express = require('express');//module to create the express server
const cookieSession = require('cookie-session');
//any piece of code would have an opportunity to handle the request
const PORT = process.env.PORT || 3000;
const config = require('./config.js');
if (config.credentials.client_id == null || config.credentials.client_secret == null) {
console.error('Missing FORGE_CLIENT_ID or FORGE_CLIENT_SECRET env. variables.');
return;
}
let app = express();
//static middlewere to check for the front end files (html,js,css)
app.use(express.static(path.join(__dirname, 'public')));//method inside express module: a middlewere for serving static files this line will check in 'public' folder if the request
//that is sent (specific file) is in there. if so - it will ignore the rest of the stack(the rest of the code)
app.use(cookieSession({
// create 2 cookies that stores the name and encripted key
name: 'forge_session',
keys: ['forge_secure_key'],//takes cater of decipher the encription for the forge key for us
maxAge: 14 * 24 * 60 * 60 * 1000 // 14 days, same as refresh token
}));
app.use(express.json({ limit: '50mb' }));//middlewere that looks at the title of the request - and if its .json it will look at the body of the request and parese it to javascript object
app.use('/api/forge', require('./routes/oauth.js'));//adding our custom express routers that will handle the different endpoints.
app.use('/api/forge', require('./routes/datamanagement.js'));
app.use('/api/forge', require('./routes/user.js'));
app.use((err, req, res, next) => {
console.error(err);
res.status(err.statusCode).json(err);
});
app.listen(PORT, () => { console.log(`Server listening on port ${PORT}`); });
2) config.js:
// Autodesk Forge configuration
module.exports = {
// Set environment variables or hard-code here
credentials: {
client_id: process.env.FORGE_CLIENT_ID,
client_secret: process.env.FORGE_CLIENT_SECRET,
callback_url: process.env.FORGE_CALLBACK_URL
},
scopes: {
// Required scopes for the server-side application-->privliges for our internal opperation in the server side ("back end")
internal: ['bucket:create', 'bucket:read', 'data:read', 'data:create', 'data:write'],
// Required scope for the client-side viewer-->priveliges for the client ("front end")
public: ['viewables:read']
}
};
Author of the tutorial here :)
I'm not sure how nexe works exactly but please note that the sample app expects input parameters such as FORGE_CLIENT_ID or FORGE_CLIENT_SECRET to be provided as environment variables.
As a first step, try running your *.exe file after setting the env. variables in your command prompt.
If that doesn't work, try hard-coding the input parameters directly into the config.js file (replacing any of the process.env.* references), and then bundle everything into an *.exe file. This is just for debugging purposes, though! You shouldn't share your credentials with anyone, not even inside an *.exe file. So as an alternative I'd suggest that you update the sample app to read the input parameters from somewhere else, perhaps from a local file.
after trying a lot of solutions, i got to the conclusion that the reason that nothing happened was that the oathantication files ( with the clint_id and clint_password) was not embedded in the .exe file.
the way to include those files with the nexe module is to use the flag -r "Foldername/subfoldername/filename.js".
first, crate a nexe.config.js file that would contain the entry point file name to the app. ( in my case, the file name is " start.js")
second, write the following commands in the command line:
cd C:\Projects\MyAppFolder
npm install -g nexe
// specify all the files you want to include inside the exe file
nexe start.js -r "config.js" -r "nexe.config.js" -r "routes/common/oauth.js" -r "routes/*.js" -r "public//." -r ".vscode/**/." -r "package-lock.json" -r "package.json" --build --output "AppName.exe"

typescript, javascript, angular, nginx, alpine, docker communications in the network via nginx i think i missed something. looking for a review

once i migrated to docker to have a virtual network to simulate an atual network (bridge type with dns which works . the fqdn is resolved correctly to referrring ip) the following errors appeared in the console.log AND no data is displayed on the frontend website.
ERROR Error: NG0901
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://backend:4000/crafts. (Reason: CORS request did not succeed). Status code: (null).
ERROR
Object { headers: {…}, status: 0, statusText: "Unknown Error", url: "http://backend:4000/crafts", ok: false, name: "HttpErrorResponse", message: "Http failure response for http://backend:4000/crafts: 0 Unknown Error", error: error }
thats the browser's (firefox) console.log
i think nginx is doing things with the headers and or the body is empty due to serversides configs with nginx
on local host everything worked out fine
so im on the config of gninx but so far without any success.. i read about similar problems but couldnt find a solution myself OR the answers read didnt work with my setup.
i tries to change the ip to 0.0.0.0 to make it accessable in the network
oh AND im using nodejs expressjs
app.listen(port,ip)
I use a Dockerfile and docker-compose.yml to make the images, i use a powershell script to compose the images
what i suspect to cause the problem is:
backend:
index.js is run anbd looks like that
"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const express_1 = __importDefault(require("express"));
const Routes_1 = __importDefault(require("./Routes"));
const app = (0, express_1.default)();
app.use(function (req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "*");
res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");
next();
});
// middleswares
app.use(express_1.default.json());
app.use(express_1.default.urlencoded({ extended: false })); //changed to see wheater it would effect the package isssue- should allow
app.use(Routes_1.default);
app.listen(4000,'0.0.0.0'); // or fqdn 'frontend'
console.log('server on port', 4000);
this is generated from index.ts and a build command
the referrring dockerfile:
FROM node:alpine as builder
WORKDIR /app/
COPY . /app/
COPY package.json /app/
COPY package-lock.json /app/
RUN cd /app/
RUN npm install -g
RUN npm update express
RUN npm install pg
FROM nginx:alpine
COPY --from=builder ./app/dist ./usr/share/nginx/html/
EXPOSE 3999-6001
CMD ["nginx", "-g", "daemon off;"]
RUN apk add --update nodejs
RUN apk add --update npm
after the image runs i open the terminal and run in the usr/share/gninx/html directory :
npm i express
npm i pg
node index.js
then I install vim
and edit the nginx.config like that
vi /etc/nginx/nginx.conf
i add a server directory, make it listen to the fqdn 'frontend' or its referring IP and the port 4000
listen ip:port kind of syntax
i add error and access logs earlier on and it doesn't return problems besides sometimes it says that IP are not available. im lacking on the understanding on how to interpret that
the PostgreSQL is also running in a docker container by the default port 5432 and the fqdn database which is also properly resolvable
same as the backend's fqdn
there is so much more stuff that links the short pieces of code that i have.. feel free to request more if interested or if u think it'd be required to find out whats going wrong.
I learnt my lesson..
servers listen to their own IPs, or at their localhost.
so i had a misconception there. though thanks to the pple taking a look inside here.
also a nodejs expressjs server doesn't necessarily need nginx to run on.. node is enough.. for the purpose..
fixing these two things led functionality as designed :)
so this can be closed or used as reminder on these two things:
understanding the conceptional idea of how networks work
AND
understanding the tech-stack being used and how it works
else
/closed

vue.config.js (devServer) not used in npm run serve

I'm trying to set up a reverse proxy on the development server for my VUE js webapp to get around the CORS issue that I was getting when I was trying to use my flask HTTP APIs with the vue js webapp.
I did this by creating a vue.config.js file in the root of the project directory:
module.exports = {
devServer: {
proxy: 'http://localhost:5001/'
}
}
when I run npm run serve, and try to use a REST API defined on port 5001 - I don't see the request going to port 5001, it uses the same port as the web app.
And there are no useful logs being written to stdout either to help me debug this.
Has anyone come across this issue before ?
I had a similar issue and found that the port was already in use by another application and hence it was not going to the correct port. Once i shutdown the other app, it started working as expected.

Set up proxy server for create react app

I have started a react application using create-react-app and ran the npm run eject script to gain access to all files. I afterwards installed express and created server.js file that sits on same level as package.json file
these are server.js file contents:
const express = require('express');
const app = express;
app.set('port', 3031);
if(process.env.NODE_ENV === 'production') {
app.use(express.static('build'));
}
app.listen(app.get('port'), () => {
console.log(`Server started at: http://localhost:${app.get('port')}/`);
})
Nothing crazy here, just setting up for future api proxies where I need to use secrets and as I don't want to expose my api.
after this I added a "proxy": "http://localhost:3001/" to my package.json file. I am now stuck as I need to figure out how to start my server correctly and use this server.js file in development mode and afterwards in production.
Ideally It would also be good if we could use more that one proxy i.e. /api and /api2
You didn't have to eject to run your server.js. You can just run it with node server.js together with create-react-app.
You can still do npm start even after ejecting to start your dev server.
To run /api1 and /api2, you just have to handle it in your server.js file and it should work just fine. You need to match the port in your server.js and the one in proxy settings inside package.json - in this case, it should be "proxy": "http://localhost:3031"

Serving static files in node.js - 500 internal server error

I'm having a weird issue where our staging server is throwing a 500 error when trying to retrieve css or js assets. We are using broccoli to compile the assets to a distribution directory, so I have ~/dist/assets/app.css (as well as app.js and an img directory). Images seem to be served fine! Only the app.js and app.css files are throwing the 500 error. I've ensured the files definitely exist in their proper places.
We're using express.js and the serve-static module. Code is simply:
serveStatic = require('serve-static');
app.use(serveStatic('dist/assets'));
Then hitting 'http://url.com/assets/app.css' throws the 500.
Hitting 'http://url.com/app.css' WORKS. This seems like it would be okay (since I'm serving dist/assets so the request should be relative to /assets), but this was all working with the /assets prefix on the request a few days ago.
There is no error output produced in the logs anywhere. Stumped on this one.
I just want to make sure I'm not doing anything too dumb.
Have you tried this:
serveStatic = require('serve-static');
app.use(serveStatic('dist'));
serveStatic(root, options)
Create a new middleware function to serve files from within a given
root directory.
Based on that statement, you should expect that using "serveStatic('dist/assets')" will serve the app.css from http://url.com/app.css

Categories

Resources