Does does netlify in the free plan supports Angular Universal meanwhile? if yes: since when?
Hi, @tim-ndrt. Netlify is designed for the Jamstack:
It is possible to do server-side rendering (SSR) with Functions but there isn’t an standard solution for this for all static site generators (SSGs) so we don’t have a way to offer good advice which will work for everyone.
If you are interested in getting SSR working with Angular Universal that may be possible but you will likely need to chart this course yourself.
We do have some blog posts about doing SSR with other SSGs here:
and here:
If there are other questions about this, please let us know.
Hi,
I was able to deploy by doing this:
0- Angular setting
package.json
package.json
“build:ssr”: “ng build --prod --build-optimizer && ng run ana-cabrera-ayala:server:production”,
angular.json
“outputPath”: “dist/ana-cabrera-ayala/browser”,
enviroment
production: false,
apiUrl: 'http://localhost:4200/'
enviroment.prod
production: true,
apiUrl: 'https://encarnaviva.netlify.app/'
1- Netlify. Build settings
Base directory: "/"
Build command: "npm run build:ssr"
Publish directory:"/dist/ana-cabrera-ayala/browser"
2-Netlify. TOML file
[build]
base = "/"
command = "npm run build:ssr"
#command = "npm run prerender"
#functions = "functions"
public = "/dist/ana-cabrera-ayala/browser"
# The following redirect is intended for use with most SPAs that handle
# routing internally.
[[redirects]]
from = "/*"
status = 200
to = "index.html"
[[headers]]
# Define which paths this specific [[headers]] block will cover.
for = "/*"
[headers.values]
Access-Control-Allow-Headers = "*"
Access-Control-Allow-Origin = "*"
Everything works fine except accessing an express router with an API code (DDBB CRUD)
Test:
a) Running ng run ana-cabrera-ayala:serve-ssr
Node Express server listening on http://localhost:4200 (with sitemap endpoint)
GET localhost:4200: OK
GET localhost:4200/routes OK
POST localhost:4200/authenticate OK
b) Running netlify dev
Node Express server listening on http://localhost:4000 (with sitemap endpoint)
GET localhost:4000: OK
GET localhost:4000/routes NOK
POST localhost:4000/authenticate NOK
curl http://localhost:4000/routes OK
c) Running netlify deploy
The same…
POST Blog Ana Cabrera Ayala 404
What is the best way to access express routing?
Thanks in advance
Hi, @joseAndresGomezTovar. There is a blog post about this here:
Would you please take a look at that post and let us know if there are other questions after reading it?
1 Like
Hi @luke I have still issues with SSR and Express.js after carefully reading the articles above. I feel that I just miss a tiny netlify tweak to make that work.
This is the folder structure of my project in VSCode:
The content of the netlify.toml is the following:
[build]
functions = "./functions"
[[redirects]]
from = "/*"
to = "/index.html"
status = 200
Finally I just have one server.js express app transformed as a Netlify Function which do the easy server side rendering based on the new Angular Clover approach.
server.js content:
const express = require('express');
const { Engine } = require('@nguniversal/common/clover/server');
const { join } = require('path');
const { format } = require('url');
const serverless = require('serverless-http');
// const PORT = 8080;
const DIST = join(__dirname, '..', 'dist', 'apps', 'web');
const app = express();
app.set('views', DIST);
app.get(
'*.*',
express.static(DIST, {
maxAge: '1y',
fallthrough: false,
})
);
// Redirect to default locale
// app.get(/^(\/|\/favicon\.ico)$/, (req, res) => {
// res.redirect(301, `/en-US${req.originalUrl}`);
// });
const ssr = new Engine();
app.get('*', (req, res, next) => {
ssr
.render({
publicPath: DIST,
url: format({
protocol: req.protocol,
host: `angular-ssr-test.netlify.app`,
// host: `localhost:${PORT}`,
pathname: req.path,
query: req.query,
}),
headers: req.headers,
})
.then(html => res.send(html))
.catch(err => next(err));
});
// app.listen(PORT, () => {
// console.log(`>>> Node Express server listening on http://localhost:${PORT}`);
// });
// Blog: https://www.netlify.com/blog/2018/09/13/how-to-run-express.js-apps-with-netlify-functions/
// Netlify + Express Apps: https://github.com/netlify-labs/netlify-functions-express
// Source: https://github.com/neverendingqs/netlify-express/blob/0780127cd575704e2a2a00a1a648ba5a5a66c388/express/server.js
app.use('/.netlify/functions/server', express.Router()); // path must route to lambda
module.exports = app;
module.exports.handler = serverless(app);
After deployment and calling the function url, the clover server which run locally well somehow messed up with the /.netlify/functions/server path.
I got the following error after calling this url: https://angular-ssr-test.netlify.app/.netlify/functions/server
Error: ENOENT: no such file or directory, stat '/var/task/dist/apps/web/.netlify/functions/server'
I hope we can ellaborate on this. The localhost version of server.js working well on my machine, I feel that it should also work with Netlify + Express.
Let me now if you have any tips what should I modify above to be compatible with the netlify routing.
Thanks in advance, Attila
I created a new topic as well to track this issue.