codeluggage / imba-on-netlify Goto Github PK

Bootstrapped with imba-vite-template.

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

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

Search for this repo that you want to deploy:

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

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

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.

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.

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.

To showcase logic without any front end interactions, there's a simple example src/utils.imba has in-source testing and

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.

• VS Code.
• Imba extension - which is automatically recommended if you open this repository in VSCode.

In the project directory, you can run:

Runs in development mode on http://localhost:3000 with hot reloading, linting and detailed error output in the console, and source maps.

Builds the app for production to the dist folder. From here you can deploy your app to static hosting.

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.

Run and watch the tests.

Run and watch the tests - and open the Vitest UI

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