3.9 KiB
Bootstrapped with imba-vite-template.
Welcome to the Imba Vite template! Let's get you set up and ready to code!
Deploy examples
To see what it looks like when you use this template and deploy it, check out the following examples:
Code structure
main.imba
In src/main.imba you see how Imba styles work. CSS is clearly scoped in Imba, so you can see global CSS, tag level, and element level.
Both assets and components are imported and used. Finally, the web application is started by mounting the tag.
counter.imba
In src/components/counter.imba you see more about how tags, props, 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, 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, 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. 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.
- Imba extension - 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 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
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 or check out Vite's backend integration guide
- There is a temporary
src/main.jsfile 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.