How to organize mixed HTTP server + web client Dart project files?

13
votes

I'm planning to create a pure Dart application where both the HTTP server and the web client side is written in Dart. Coming from Java and Eclipse the ultimate would be that i can open the whole project hierarchy in Dart Editor and be able to run the server which serves the client files and debug both sides of the app (server side with the DartVM and client side with Dartium).

I've fired up Dart Editor and after creating a simple Command-line application as the basis for the server side i got confused with the project layout.

The direct server side code files (web server boostrap class, handler and filter classes) are definietly going into the projects bin/ folder. Server side dependencies are going into the project's pubspec.yaml file.

The problem arrises when the server have to access the client application files (.dart files, static page source, etc.) in order to serve them to the browser. The easiest solution would be to create a web folder inside the server project and put client web files there, but this way (as far as i understood) server side dependencies are inherited into the client because we are still in the same pubspec scope. I don't want this.

I thought about creating a client library in the projects lib/ folder and put web files there but i don't know how good practice is to put a complete web application into there. I guess i have to put HTML and other client static files into the asset/ subfolder of the lib. I'm affraid that i'm loosing web application assist from the IDE this way.

What i might also be able to do is to put the client into a separate project, organize it like a Dart webapp project with it's very own pubspec.yaml and then make this the dependency of the server application somehow. I don't know if this way the server could access web files in the other project for serving. Probably this is the best way of doing it because it provides a clean separation of the client and server files.

Can somebody enlighten me what's the correct way of doing this?

Some more explanation. Say i'm going with the separate project approach as others already suggesting in the answers but i still like to run the server which is able to serve the client in the development phase without any fancy hack. The server has to access the client files in the other project. It doesn't matter if its Javascript or Dart, the static files are there anyway. And during development i wish to serve the dart files since Dartium speeds up development with it's direct Dart running capability significantly.

With Java and Maven i can make the client package a runtime dependency of the server and i can simply serve the client files from the classpath. Does Dart support accessing a pub dependency's internal files the similar way or the only way for this is to put everything into the asset folder of the client or going with the relative path hack?

3
projectdart
May I ask why you don't like having server side dependencies in the client? The pubspec.yaml only defines which packages should be made available in the packages directory. If you don't import anything into your clients Dart source files this has AFAIK no effect. My second question is: Normally one would serve the build directory instead of the web directory. Is there a reason for using the web directory (beside while developing)? – Günter Zöchbauer
In the scope of the webapplication it makes no sense to include server side only dependencies (like File I/O). It's also errorprone since i may accidentally import into a client source code something which seems correct but will not run in the browser environment. I think doing a clean isolation of these layers would be the best. You're right, i should serve the build/ directory. But files there are generated from web/ anyway and it's intended for web applications only so the problem stays. – NagyI

3 Answers

3
votes

This is work in progress:

To improve the development experience you may use a symlink as a workaround so that you have the client files available in a directory of the server package.

I suggest creating a feature request at http://www.dartbug.com/new for better support.

2
votes

I would go for two separate projects.
You won't need to make the client package a dependency on the server package.
The server only needs to know where the directory with the build output of the client package is.
Which files to serve is usually requested by the client. The client requests e.g. index.html and all further dependencies (.dart, .hmtl, .js, .img, .css, ...) are hard-coded in this file and therefore the server should not need to know any further details beforehand.

1
votes

I'd suggest organising two separate projects. There are a few things that you might profit from if you use this approach. The most obvious there's no coupling between client and server, you get a very clear separation. The other one is that your server can evolve independently of the client. Dart applications will need to be compiled to javascript. In the end you will have a dart server app serving javascript files (+ maybe dart files if you decide to do so). Some of the packages that you use on the server side are not available in dartium - you don't want to have to deal with this dependency mess. Your server might consist of more then just one app, maybe your server will have a module in java or some other language. Keeping this two project separately gives you a lot more flexibility.