Scully VS http-server

In recent years, projects like Vercel's NextJS and Gatsby have garnered acclaim and higher and higher usage numbers. Not only that, but their core concepts of Server Side Rendering (SSR) and Static Site Generation (SSG) have been seen in other projects and frameworks such as Angular Universal, ScullyIO, and NuxtJS. Why is that? What is SSR and SSG? How can I use these concepts in my applications?

I just spent like 4 hours trying to resolve some dependencies in my angular project so I can install skully - a static site generator in my angular project. And I am exhausted.

There are several solutions to get around the routing issue. One is to use MPA's (multi page applications). Both Angular (Angular Universal, Scully, and more recently released Analog) and React (NextJs and Remix) have meta-frameworks that provide a server side rendered solution.

Unfortunately, there are no options that I know of. There is a new meta-framework for Angular called Analog but it is not yet ready for SSR. If you need SSG, there is Scully. Other than that, you will have to wait for the Angular Team to fix their Universal project or switch to one of the meta-frameworks :)

Make sure to checkout the Scully Docs.

As for Angular, there's the official @angular/universal package, but I wasn't a fan of it the last time I used it. I've used Scully before and it worked great, plus it requires no changes to your code, unlike Universal.

Scully, static site generation

Take a look at Scully. It’s a static site generator for Angular apps.

Maybe take a look at this: https://scully.io/

Do you run a Webserver during development, even if it is a simple dev-server like https://www.npmjs.com/package/http-server ?

I mean, there are ones, like https://github.com/http-party/http-server you can inspect that code, but basically, it’s a job an nginx can do without any JS.

Does the website work correctly when run locally without a server? If so, then it should be fine to be compiled and deployed. You can always check ahead of time by building your website and then running it with a CLI like http-server to replicate what S3 will do.

You can use https://www.npmjs.com/package/http-server but you need to build your app before with ng build then serve the generated bundle (be careful to environment file replacement in angular.json)

You probably need a few hundred lines of code and some external modules to be able to build what https://www.npmjs.com/package/http-server has. ``` Available Options: Command Description Defaults -p or --port Port to use. Use -p 0 to look for an open port, starting at 8080. It will also read from process.env.PORT. 8080 -a Address to use 0.0.0.0 -d Show directory listings true -i Display autoIndex true -g or --gzip When enabled it will serve ./public/some-file.js.gz in place of ./public/some-file.js when a gzipped version of the file exists and the request accepts gzip encoding. If brotli is also enabled, it will try to serve brotli first. false -b or --brotli When enabled it will serve ./public/some-file.js.br in place of ./public/some-file.js when a brotli compressed version of the file exists and the request accepts br encoding. If gzip is also enabled, it will try to serve brotli first. false -e or --ext Default file extension if none supplied html -s or --silent Suppress log messages from output --cors Enable CORS via the Access-Control-Allow-Origin header -o [path] Open browser window after starting the server. Optionally provide a URL path to open. e.g.: -o /other/dir/ -c Set cache time (in seconds) for cache-control max-age header, e.g. -c10 for 10 seconds. To disable caching, use -c-1. 3600 -U or --utc Use UTC time format in log messages. --log-ip Enable logging of the client's IP address false -P or --proxy Proxies all requests which can't be resolved locally to the given url. e.g.: -P http://someurl.com --proxy-options Pass proxy options using nested dotted objects. e.g.: --proxy-options.secure false --username Username for basic authentication --password Password for basic authentication -S, --tls or --ssl Enable secure request serving with TLS/SSL (HTTPS) false -C or --cert Path to ssl cert file cert.pem -K or --key Path to ssl key file key.pem -r or --robots Automatically provide a /robots.txt (The content of which defaults to User-agent: *\nDisallow: /) false --no-dotfiles Do not show dotfiles --mimetypes Path to a .types file for custom mimetype definition -h or --help Print this list and exit. -v or --version Print the version and exit. Magic Files index.html will be served as the default file to any directory requests. 404.html will be served if a file is not found. This can be used for Single-Page App (SPA) hosting to serve the entry page. Catch-all redirect To implement a catch-all redirect, use the index page itself as the proxy with:

Alternatively, a package like http-server is fast and easy to setup.

Set yourself inside the index folder and let's use http-server package to start a local server executing this:

Let’s go ahead and setup our http-server, for this we will be using http-server npm package to help us with this, this is useful for static sites where we do not want to setup a node server manually.

Whenever your server is doing something, your local environment should do it too. That means you can no longer just open an HTML file in your browser but need to run a local server which mirrors all of the same features that your browser has. For example, http-server is a simple command-line server tool which has an option for "default file extension if none supplied".