You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
75 lines
3.9 KiB
75 lines
3.9 KiB
2 years ago
|
[](https://app.netlify.com/sites/vite-imba/deploys)
|
||
|
|
|
||
|
|
_Bootstrapped with [imba-vite-template](https://github.com/imba/imba-vite-template)._
|
||
|
|
|
||
|
|
Welcome to the Imba Vite template! Let's get you set up and ready to code!
|
||
|
|
|
||
|
|
[](https://app.netlify.com/start/deploy?repository=https://github.com/imba/imba-vite-template)
|
||
|
|
|
||
|
|
[](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fimba%2Fimba-vite-template)
|
||
|
|
|
||
|
|
## Deploy examples
|
||
|
|
|
||
|
|
To see what it looks like when you use this template and deploy it, check out the following examples:
|
||
|
|
|
||
|
|
- [Netlify](https://github.com/codeluggage/imba-on-netlify)
|
||
|
|
- [GitHub Pages](https://codeluggage.github.io/imba-on-github-pages/)
|
||
|
|
|
||
|
|
## Code structure
|
||
|
|
|
||
|
|
### `main.imba`
|
||
|
|
|
||
|
|
In `src/main.imba` you see how [Imba styles](https://imba.io/docs/css) work. CSS is clearly scoped in Imba, so you can see [global CSS](https://imba.io/docs/css/syntax#selectors-global-selectors), tag level, and element level.
|
||
|
|
|
||
|
|
Both [assets](https://imba.io/docs/assets) and [components](https://imba.io/docs/components/) are imported and used. Finally, the web application is started by [mounting the tag](https://imba.io/docs/tags/mounting).
|
||
|
|
|
||
|
|
### `counter.imba`
|
||
|
|
|
||
|
|
In `src/components/counter.imba` you see more about how [tags](https://imba.io/docs/tags), [props](https://imba.io/docs/tags#setting-properties), [state management](https://imba.io/docs/state-management) (which is usually a big, complex topic - but is very lightweight in Imba), and inheriting from the web itself (in this case, the HTML button). There's also a [Vitest in-source component test](https://vitest.dev/guide/in-source.html), showing you how this tag is meant to be used.
|
||
|
|
|
||
|
|
### `app.css`
|
||
|
|
|
||
|
|
You don't need to use CSS files, because of the powerful scoping of [Imba styles](https://imba.io/docs/css), but this file shows how you can get the best of both worlds. It is imported and used in `src/main.imba`.
|
||
|
|
|
||
|
|
### `utils.imba`
|
||
|
|
|
||
|
|
To showcase logic without any front end interactions, there's a simple example `src/utils.imba` has in-source testing and
|
||
|
|
|
||
|
|
### `tests/`
|
||
|
|
|
||
|
|
In `test/basic.test.imba` you see how terse and succinct the testing syntax is with Imba, using [Vitest](https://vitest.dev/). This test is in its own file with the `.test.imba` filename ending, but you can also use inline tests like in `src/components/counter.imba`.
|
||
|
|
|
||
|
|
## Recommended IDE
|
||
|
|
|
||
|
|
- [VS Code](https://code.visualstudio.com/).
|
||
|
|
- [Imba extension](https://marketplace.visualstudio.com/items?itemName=scrimba.vsimba) - which is automatically recommended if you open this repository in VSCode.
|
||
|
|
|
||
|
|
## Available Scripts
|
||
|
|
|
||
|
|
In the project directory, you can run:
|
||
|
|
|
||
|
|
### `npm dev`
|
||
|
|
|
||
|
|
Runs in development mode on `http://localhost:3000` with hot reloading, linting and detailed error output in the console, and source maps.
|
||
|
|
|
||
|
|
### `npm run build`
|
||
|
|
|
||
|
|
Builds the app for production to the `dist` folder. From here you can [deploy your app](https://imba.io/guides/deployment) to static hosting.
|
||
|
|
|
||
|
|
### `npm run preview`
|
||
|
|
|
||
|
|
_NOTE: Requires `npm run build` to have been run first._
|
||
|
|
|
||
|
|
Preview the production application from the `dist/` folder, just as it will be running on static hosting.
|
||
|
|
|
||
|
|
### `npm test`
|
||
|
|
|
||
|
|
Run and watch the tests.
|
||
|
|
|
||
|
|
### `npm run test:ui`
|
||
|
|
|
||
|
|
Run and watch the tests - and open the [Vitest UI](https://vitest.dev/guide/ui.html)
|
||
|
|
|
||
|
|
## Notes
|
||
|
|
- This app doesn't have a server. If you need a full stack web application with server logic you can use [imba base template](https://github.com/imba/imba-base-template) or check out [Vite's backend integration guide](https://vitejs.dev/guide/backend-integration.html)
|
||
|
|
- There is a temporary `src/main.js` file that is still necessary for Vite to work correctly. You don't have to do anything with this file. And this will probably be fixed in a future version of Vite.
|