Suggestion for npx makes

vNext
1

Hi all,

Suggestion for npx makes:

  1. (i think it is already scheduled): add vite support. With webpack the package.json and webpack.config.js are frightening.

  2. ask if @aurelia/fetch-client should be added as a dependency.

  3. ask if tailwindcss should be added to the project. If yes, add the dependencies, index.css, postcss.config.json and tailwindcss.config.json

  4. in main.ts: register routing and logger. For example:

.register(RouterConfiguration.customize({ useUrlFragmentHash: false }))
.register(LoggerConfiguration.create({ level: LogLevel.debug, sinks: [ConsoleSink] }))

  1. Add more elements in the generated project. I suggest two routes (defined in my-app.ts with links in a small navbar in my-app.html):

    • the first route show a component that uses the HTTP client: a button “make http request” that triggers a call on https://httpbin.dev/json and show the properties of the response (with use of if.bind and repeat.for) or an error message if the request failed. A converter (UppercaseConverter for instance) could also be used.
    • the second route shows a view which embed is a custom element (clock for instance).

  2. Maybe a property whose value comes from .env.local:

    VITE_MY_PROPERTY=my value

    In main.ts:

    export const settings = {
    myProperty: import.meta.env.VITE_MY_PROPERTY,
}

    in my-app.ts: injection of ILogger and logger.info(settings.myProperty);

With a few comments here and there, it would help a new developer to understand how to use the basic features (injection, logging, API requests, data binding, routing, properties) without even reading the doc.

The welcome page of aurelia could show something like:

$ npx makes aurelia
// answer a few questions
$ npm run dev
// you have a ready to use SPA with routing, API fetching, properties, data binding, logging and dependency injection enabled.

I don’t know if npm create vite@latest with an aurelia template offers the same flexibility for point 2 and 3.

4 Likes
2

vote for vite support