Deploy to Netlify

Has anybody managed to deploy to Netlify?

I’ve published to Netlify in the past with a static site generator so I copied the netlify.toml file into my frontity root directory as follows:

[build]
  command = "npm run build"
  publish = "build"
  NODE_ENV = "10.16.0"

Netlify says the site built process completed fine but the site is not being served properly. I tried to publish build/server.js and Netlify said that it is not a directory.

Does server.js need to be index.js inside the build folder?

https://hopeful-shockley-0f012b.netlify.com/

1 Like

Hi @clayton.collie!

Frontity doesn’t work as a static site generator, it is a server that generates pages on demand using SSR, so I guess the configuration above wouldn’t work. We still have to investigate how the SSR would work using Netlify Functions.

Anyway, we are more used to Now than Netlify. If someone from the community that knows Netlify better wants to investigate and get it to work let us know!

Hey @clayton.collie!

Can you take a look to our “Deploy on now” guide and let us know if this solution fits your needs? If not, we would like to know why. Is static a requirement of your project?

I only tried Netlify because I already have account with them AND because of all the buzz around them. To me, the market and overall community is favoring netlify and gatsby. We are so early in the game that I would like to hedge my bet when it comes to learning something new.

But I can also see why frontity would be at the forefront of the WP space much like Genesis is a toolbox for creating themes. I see frontity in the same way. But now I have to rethink since the paradigms are a bit different. Node server with frontity versus static files with gatsby. Don’t get me wrong I loved how easy it was to create a frontity site and pull in my data. Took me about 10 minutes to start seeing something.

Could frontity ever compile to static files?

I am going to keep digging on netlify in the next few days. Will report back what I find.

1 Like

We don’t have any experience with Netlify whatsoever but they have something called “Netlify Functions” and I’ve always wondered if that could be configured to do SSR (with CDN on top).

It’d be awesome if we could integrate Frontity with Netlify! Thanks for exploring it Clayton.

As far as I know those Functions need a AWS handler (module.exports.handler). We are not yet exporting that handler but I have already looked how to do it and it’s pretty simple. If you need it let me know and we’ll add it.

Yes, absolutely. It’s already in the roadmap.

We started with SSR because it’s simpler to setup (it’s just a node app) and we have worked in the past with really big WP where static sites don’t make sense because they have tens of thousands of posts and publish news that need to be indexed by Google within a minute. Besides, if you go serverless it’s infinitely scalable and super cheap.

But hey, we know there’s a use case for static sites and Frontity will offer it too.

1 Like

Right now, with the node app, what happened when a new post or page is published in the admin? Does that action trigger a rebuild or is it somehow incrementally built and added to the frontend?

Thanks for all of the info. This is my first foray into react and the like. Probably like most people I would imagine.

It’s more similar to WP itself. It’s a normal server, so there’s nothing to trigger or rebuild like in the Gatsby case. When a new request gets to the server, it creates the HTML and returns it.

So if a new page or post is added in the dashboard and that URL is accessed, the Frontity server tries to get the data from the REST API, then generates a new HTML and finally it sends it back to the user.

You can try in localhost using npx frontity build && npx frontity serve. That’s the production server. Actually, it is just an optimized version of the development server.

1 Like

Any progress on this? I’ve tried to get up and running on Netlify and not had much luck. A really basic walkthrough on this would be great.

Thanks!

I’ve opened a topic in their community forum to see if Netlify supports server side rendering:

Until then, I recommend you to use Now, which is very simple to setup and has great support for Server Side Rendering: https://docs.frontity.org/installation-and-deploy/deploy-on-now

1 Like

I have created a simpler “SSR emulation repository” and I think I have managed to make it work :slight_smile: https://github.com/luisherranz/netlify-ssr-test

– This only means we may be able to make Frontity work on Netlify, but it is not working yet.

This is the live site: https://flamboyant-euclid-90b896.netlify.com/

This is the toml file:

[build]
  command = "npm run build"
  publish = "build/static"
  functions = "build"

[[redirects]]
  from = "/static/*"
  to = "/:splat"
  status = 200

[[redirects]]
  from = "/*"
  to = "/.netlify/functions/server"
  status = 200

The server.js lambda is taking care of all the urls with the /* redirection:
https://flamboyant-euclid-90b896.netlify.com/
https://flamboyant-euclid-90b896.netlify.com/some-blog-post
https://flamboyant-euclid-90b896.netlify.com/category/some-category

And the static files are properly served with the other /static/* redirection.
https://flamboyant-euclid-90b896.netlify.com/static/static.js

For some reason adding [[headers]] to /* doesn’t work for lambdas:

[[headers]]
  for = "/*"
  [headers.values]
    X-Custom-Toml = "Toml"

The _headers file is also not working for lamdbas:

/*
  X-Custom-Root: Root

Both of these work fine for the static file. I don’t know if I’m doing something wrong or that is a bug.

They only work if they are returned by the lambda:

exports.handler = (event, context, callback) => {
  setTimeout(() => {
    callback(null, {
      statusCode: 200,
      body: `Dynamic page. Path: ${event.path}. Random: ${Math.random()}`,
      headers: {
        "Cache-Control": "public, s-maxage=15, stale-while-revalidate=300"
      }
    });
  }, 3000);
};

This lambda simulates a SSR request with a setTimeout of 3 seconds.

The CDN works, and it is honoring the s-maxage directive. It serves the cached version for 15 seconds.

But the CDN is ignoring the state-while-revalidate directive. After 15 seconds, it doesn’t serve a the stale version of the cache, it serves a new asset, making the user wait 3 seconds again.


Things we need to add/modify in Frontity to make it work:

  • Add support for AWS lambdas.
  • Release a @frontity/cache-control package to add the proper headers.
  • Probably try to move /static/server.js to its own folder, so Netlify doesn’t think all the static js files are also lambdas.
1 Like

Thanks for the info! I have to wait on frontify as I am in the process of going all in on Gatsby/WP integration through netlify. I tried the NOW route as well, but honestly like the netlify much better. I’ll keep checkin in here though, as frontity really intrigues me. Thanks again

No problem. Thanks to you Tod for stopping by :slight_smile:

Let us know how it goes, and keep an eye on this post if you want to know when Frontity+Netlify is available. It shouldn’t take long.

1 Like

Bump this topic,

Going to start with Frontity and wonder the same, from last message seem the solution does not work 100%

Wonder if things improved since last message?
Anyone has experience with working with Frontity on Netlify?

1 Like

Hi @mulyoved,

Welcome to the community!
Didn’t you manage to deploy to Netlify with the help of this post?

Which specific problems did you find?

@mmczaplinski is trying to get an answer from Netlify regarding the serverless prerendering support: https://community.netlify.com/t/server-side-rendering-with-netlify-functions/2897

If Netlify supports invalidation of their CDN cache, I guess another solution would be to use/create a PHP plugin that purges/invalidates their cache each time a post is published or updated.