analog icon indicating copy to clipboard operation
analog copied to clipboard

[FEAT]: Add support for API routes

Open brandonroberts opened this issue 2 years ago • 6 comments

Initial Requirements

  • API routes are defined as TypeScript files as part of the source code that is only executed on the server.
  • They could live under src/pages/api with a predefined definition such as .server.ts
  • This will result in a server build of the application

brandonroberts avatar Jul 14 '22 11:07 brandonroberts

Could also explore integrating Nitro, the server engine that powers Nuxt.

  • Works with Vite
  • Already battle tested
  • Needs configuration and wiring

https://github.com/unjs/nitro

brandonroberts avatar Aug 23 '22 02:08 brandonroberts

Hey @brandonroberts I could give this a try.

I have slowly started working on it. Perhaps I could push a draft PR and optimize it on the go

profanis avatar Oct 15 '22 19:10 profanis

Hey @profanis, cool. Before you open up a PR, will you share which path you started down? Want to make the most use of your time if possible.

brandonroberts avatar Oct 15 '22 19:10 brandonroberts

As you said in your second comment, the API routes could be based on an integration with Nitro. To start with Nitro is fairly easy. All it needs is the routes (file-based) and the nitro.config.ts. Having such a configuration in Analog, I believe could work but I am afraid that this would make a tight dependency and this wouldn't be the desired approach. 🤔

A Vite plugin could do the trick where on the load hook will start the server. The port of the server (along with the rest of the settings) can be configured in the application's vite.config.ts.

Please let me know what you think

profanis avatar Oct 16 '22 11:10 profanis

That's on the path where I was thinking. I was thinking of a more integrated approach.

Nitro provides an integration that can hook into the Vite Dev Server, so we can create a Nitro dev server as part of the initial build, add it to Vite's middleware during development, and then create the Nitro build as part of the production build process.

The separate Nitro config could only be needed for advanced configuration.

This would put into a separate package/plugin from the Angular Vite Plugin as it's just focused on Angular compilation. A package tentatively called @analogjs/platform.

Interested in your thoughts

brandonroberts avatar Oct 16 '22 18:10 brandonroberts

I checked the CLI code of Nitropack to understand what are the steps it follows to create the dev server, and what are the steps for the production build. I am not sure if there is a more targeted API that can hook into the Vite dev server. Please share a link so that I can check this out.

The package name @analogjs/platform is confusing me a bit and I feel that I am a bit derailed, so let me provide some more insights to gauge if I am on the same page. I'll do so based on an imaginary feature requirement;

Say that a developer requires to create a feature for a TODO list. The developer will create the required UI code (component, services, etc) under src/app, and since this app requires also to have access to an API endpoint, will also create the needed files in the src/server/.

To start the dev server the developer will run the command npm run dev and this will result in two URLs. One for the UI and the other for the API To start the production build process the developer will run the command npm run build and this will generate a dist directory with the production code of the UI and the server API as well.

If the above is what you have in mind then we are on the same page. If not, I'll start scratching my head 😄

profanis avatar Oct 17 '22 18:10 profanis