Bootstrapped with imba-vite-template.

What steps did I follow to deploy this to Netlify?

1) Click "Add new site"

Or go directly to https://app.netlify.com/start

2) Pick "Github" (or the git provider you use)

Or, once your git provider is authorized, you can go directly to https://app.netlify.com/start/repos

3) Pick the repository

Search for this repo that you want to deploy:

4) Click "Deploy site"!

The default settings are perfect. We want to run npm run build ✔️ and we want to publish the dist/ directory ✔️.

5) Update your Netlify badge

To make the Netlify badge in this README.md file represent your site, click into the Site settings -> General -> Status badges and click the copy button.

Then replace the first line of the README.md file with your own status badge

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.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.