microsoft / WebTemplateStudio

Microsoft Web Template Studio quickly builds web applications using a wizard-based UI to turn your needs into a foundation of best patterns and practices
https://aka.ms/webtsinstall
MIT License
2.02k stars 203 forks source link

Add support for MEAN stack #609

Open hfournier opened 5 years ago

hfournier commented 5 years ago

With support for Node and Angular already, why not go all the way and add in support for the MEAN stack? MongoDB, Express, Angular and NodeJS.

SahilTara commented 5 years ago

Hmm, mongo is supported already through cosmos. The backend contains express. Do you mean adding support for a local MongoDB?

crutkas commented 5 years ago

@hfournier like @SahilTara stated. in an ideal world, can you help us better understand the features and generated output you want. The more detail, the better.

hfournier commented 5 years ago

@SahilTara I've looked at using MongoDB on Azure already, but since the price is based on number of Collections, I found it to be a non-option. I currently use local MongoDB for dev and MongoDB Atlas for production. Does the backend also use Mongoose?

@crutkas I imagine a lot of people building a MEAN stack app will clone a seed project to start with, rather than build everything from scratch. In doing so, you're stuck with whatever decisions the seed builder made. I see WebTS as a way to improve on that process by allowing the developer to choose various options in generating that seed themselves. In an ideal world, I would be able to use WebTS to choose a MEAN stack app as my target and the generated code would be a completely functioning app, including dev and prod connection strings in a config file (pulled form environment variables), built to use HTTPS (i.e. production ready), routes and controllers with basic CRUD code, as well as sample Mongoose Schemas in model files. The developer would just have to change the properties in the schema (or better yet, include the JSON schema in the build process) and have a working backend. On the front end, choosing from templates, like Master-Detail, Lists, etc would generate the Angular Components (list, add, edit, delete, validate), Services and Models (again using the supplied JSON schema) to work with the backend and middleware. Install, build and you've got a working app.

Including my other feature request #608 to have auth components, as almost any app will require register/login/logout/forgot password functionality.

The end result is a production ready app with all the boring boilerplate code already written for you (following best practices), so you can just jump right in to customizing the business logic and be immediately productive. No need to find and alter a suitable seed project, no need to bring in a bunch of code snippets, just run the wizard and start coding... in an ideal world.

SahilTara commented 5 years ago

@hfournier Yup we use mongoose! Only with the list page though that too if you select cosmos. A possible solution to having the mongoose stuff loaded in for the list would be a local db, and when you want to switch to prod just change the environment variables for the connection string. Mongoose isn't heavily used yet though with our current page options. This could be improved through additional pages /options that communicate with a database of some kind. Also, for now we do not use a models file since the model provided is very very primitive (just a string right now).

Also,

The end result is a production ready app with all the boring boilerplate code already written for you

this is exactly what I imagine the end result of our generated templates to be when our project is more developed.

hfournier commented 5 years ago

@SahilTara exactly. Actually, a typical config would look like: config.connectionString = DB_PROD_CONNECTION_STRING || 'my dev connection string'; so no changes required. In production it uses the environment variable and dev it uses your local connection string.

It would be great to be able to paste or upload a JSON schema and have WebTS generate both the Mongoose Schema and the Angular model.