Steller Web Player

This is a prototype of a new Steller web player built using next.js. The goals of this new approach are as follows:

Leverage Next.js for routing, server-rendering, and other UI infrastructure rather than rolling our own
Utilize a model where each device category (desktop, phone, TV??) essentially has it's own app rather than relying primarily on CSS media queries. It's still one Node app on the server, but there is a dedicated webpack bundle for each device category. We can still have common components that are shared across devices.

Demo site: https://nextjs-typescript-starter-eeqqbhtssb.now.sh

Approach

Rather than utilizing babel to compile the TypeScript, we instead configure Next.js to only know about the build output generated by the TypeScript compiler tsc. Since Next.js is working with compiled sources, we don't need any babel plugins or presets, so these are cleared out in the .babelrc. The npm dev command runs two processes in parallel: tsc with the --watch option to continuously re-compile TypeScript source files, and node server.js where server.js is a built file.

Debugging

Sourcemaps

We effectively have a two step build process, first

https://github.com/Microsoft/vscode-recipes/tree/master/Next-js

References

nextgram - sample app that has the same basic navigation pattern as Steller.
SSR and Server Only Modules
Using Glamorous with Next

Module Resolution

Webpack aliases are used to substitute a different module implementation on the server side. For example, the lib/api used on the client is aliased to server/api for the server webpack bundle. Because lib/api could be imported from different levels in the directory structure, we want to have one standard absolute path that is valid everywhere. Three steps need to be taken to accomplish this:

In the tsconfig.json the baseUrl is set to src
In the next.config.js webpack customization, the following global aliases are set:

Object.assign(config.resolve.alias, {
  components: __dirname + "/components",
  lib: __dirname + "/lib"
});