how to get Express routes to angularjs files working

Question

background

I am trying to use the file uploads using angularjs and trying to save it with nodejs in the file. This whole setup I am trying to do it in my local server.

My index file to angular js part lies inside a folder called portal/standards.html

I am trying to start the server using express with a file in root directory server.js, below is the redirect that I am trying to do.

Server.js

app.get('/', function(req, res) {
  res.sendFile('portal/standards.html' , { root : __dirname});
});

Problem

The standards.html which works fine when I do a live-server doesn't work fine when I use the above redirect from the express server.

I am new to nodejs server side. below are my errors, the path to my css and js files are broken for some reason(though it works fine when I load it directly)

my html

 <link href="../libraries/common/bootstrap.css" rel="stylesheet">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="../libraries/common/normalize.css" />
  <link rel="stylesheet" href="../libraries/floating-label/floating-label.css" />
  <link rel="stylesheet" href="../libraries/top-menu/yamm.css">
  <link href="momtest/portal/css/portal.css" rel="stylesheet">
  <link href="css/template-wizard.css" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.3/styles/github.min.css">

Answer 1

You can point express at your static files directory:

app.use(express.static('./portal/'));
// Optional any deep link calls should return index.html
app.use('/*', express.static('index.html'));

You should only put static assets in the directory you want to serve those assets from - do not include the php files you are currently including so that you are dividing your directory structure up logically.

Dividing it up logically meaning you have one directory (and any subdirectories you need) for static files (ie code that runs in the browser) and server files. A common app structure is (filenames are just examples):

myApp
--src
--client
--app
--angular-module1
--angular-module2
--etc...
--server
app.js
etc...

This is just an example. There are divided opinions on how to structure express and angular apps that you can research and then decide which approach is best for your project.