How do I deploy Angular app on node.js server - html

I'm pretty new in Angular. This question seems silly bu Basicaly I created user management app using youtube tutorial. I've installed it globaly.
I just need to send it to someone but I don't know how because when I open it on browser it's not showing me what was shown on localhost:4200. So what am I doing wrong how do I send it to someone?

if you want to deploy your code first run
ng build --prod this will generate a build file under /dist.
then copy this file to your nodejs server.
now we have to server the stuff inside the folder, to server static files you will need to install express to your nodejs by nmp i express
then your index.js or server.js will have to look like this.
const express = require('express');
const app = express();
app.use(express.static(__dirname + '/dist'));
app.get('/*', function(req, res) {
res.sendFile(__dirname + '/dist/index.html');
});
app.listen(8080);
also if you do get CORS error just install npm i cors and add this app.use(cors())
hope this helps

Related

How to install puppeteer without using npm?

I was trying to install puppeteer using npm -i puppeteer. But i'm geeting error as i dont have admin rights.
Is there any way to download the package folder and paste it into my project folder?
I downloaded the files from puppeteer GitHub page, but I'm getting errors and there are many folders.
What should be the path?
These doesn't seem to work.
const puppeteer = require('./puppeteer');
const puppeteer = require('./puppeteer/packages/puppeteer');
Image: Files downloaded from github(these files are under the folder named puppeteer)

Why does my website download instead of open?

So I just started a new project and the file keeps downloading when I try to open localhost. There is barely anything in this project this is my whole server:
// initialize server
const express = require("express");
const app = express();
app.engine(".ejs", require("ejs").__express);
app.set("view engine", "ejs");
app.use(express.static(__dirname+"views"));
app.use(express.static(__dirname+"public"));
// start server
app.listen(3000, function(){
console.log("listening on port 3000")
});
// get html
app.get("/start", function(req, res){
res.sendFile(__dirname+"/views/homepage.ejs")
});
I also have the homepage.ejs with only a text "hello" and empty folders views and public>css. When I set it up I could open the homepage after I wrote the server code and created the folders (it showed the text, everything worked) but when I tried to create a stylesheet and color the background of my homepage it downloaded. I then deleted the css sheet and restarted the server, it keeps downloading. I'm working on bigger projects via github and I never had that problem it just happens when I'm on my own projects. I tried copying some older small projects of mine which always worked but as soon as I change a few things (doesn't matter what) it downloads again. I have the folders in my OneDrive so I opened them on my laptop, same problem. I opened them in other browsers (Chrome, Explorer, Firefox) same problem. Does anyone know how to fix it pls?
Edit: javascript project in vs code if that helps

.scss file not found when deploy to heroku

I am trying to deploy to heroku a MERN app that uses mdc-react component library. But i get an error that a file cannot be found.But the file exists.
Running the build locally from nodejs server, app runs but overidded styles are not working. It works as expected if run from the client folder.
I suspect it has to do with folder structure or import path. Images below show project folder structure, error and code on nodejs server. How can i resolve this. Thanks in advance
app.use(express.static('./client/build'))
app.get('*', (req, res)=> {
res.sendFile(path.join(__dirname, 'client', 'build', 'index.html'))
})
I expect all styles should be imported

Google assistant action, no function URL

i would like to create an action project. I have an issue when i run firebase deploy --only functions.
Before i run: npm install -g firebase-tools, firebase login, firebase init, npm install actions-on-google, npm install
Everything is working and it says: Deploy complete. But it doesnt deliver me the function URL in the CMD. Also when i look it up over here : https://console.firebase.google.com/.../functions/list it doesnt show me the URL.
Do you have any idea what i am doing wrong?
That is the Tutorial i am doing:
https://developers.google.com/actions/tools/fulfillment-hosting
Best regards
Luca
You need to export a function otherwise Firebase cannot run/deploy it. You can view some great code examples on how to make Actions on the Google Assistant with Firebase here.
The following code should help you get started.
const {dialogflow} = require('actions-on-google');
const functions = require('firebase-functions');
const app = dialogflow({debug: true});
exports.myFunction = functions.https.onRequest(app);

Nodejs Index.html Loads but Links & Scripts 404

I have a nodejs server running with the client side encapsulated in a client folder to make managing the folder structure for index.html easy. Then the links and scripts should load no problem.
client folder
/index.html
/style.css
/script.js
closer folder
/closure
/etc.
app.js
package.json
utility.js
In my app.js file I have a normal
app.get ('/', function (req,res) {
res.render('index.html');
});
and when I run and go to the local host port the file loads, but when I open the chrome console, I see that the index.html file failed to load any of the scripts with a 404 error not found. I notice that in a lot of express apps there seems to be a common pattern of something along the lines of
this app.set('views', __dirname + '/client');
this app.use(express.static(__dirname + "./client"));
this app.use('client', express.directory('client'));
but I don't see an explanation on the difference between app.use and app.set, nor a good explanation, the best the I could find was
app.set('views', __dirname + '/views'): Use ./views as the default
path for the client-side templates
from Alex Young's article but even this was a little sparse and dry for me, I'm hoping for a bit deeper of an explanation as to why the index file might be unable to load a link on the same directory level as it.
<link rel="stylesheet" type="text/css" href="style.css" />
I look at this and I can't find the problem.
From the answer Express-js can't GET my static files, why? I'd suggest:
app.use("/client", express.static(__dirname + '/client'));
This is needed because your:
app.get ('/', function (req,res) {
res.render('index.html');
});
is only addressing what happens when someone goes to / and saying that index.html should be served. That alone doesn't serve anything else.
just run your server from root directory of your project.
that will fix the problem because you used relative addressing.