Hello World

Creating a Hello World using Weblabs

The first thing any developer does when learning a new piece of technology is to greet the world, and Weblabs is no exception.

From the previous page, I assume you have learned to create a Weblabs Project. Let's create a new project called hello-world

$ npm create vite@latest
    ? Project name: > hello-world
    ? Select a framework: >
    >    Vanilla
    ? Select a variant: >
    >    Typescript
$ cd hello-world
$ npm i
$ npm i @weblabsjs/core

Now, you will see a main.ts file. Open the file, and delete all the code inside that file, and write the code given below:

//in main.ts
import { render } from '@weblabsjs/core'
import { p } from '@weblabsjs/core/components'

function HelloWorld() {
    return p("Hello World")
}

render("app", HelloWorld())

Now you will also see a index.html file. Open that file and add the code given below

<!--index.html-->
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Hello World</title>
    </head>
    <body>
        <div id="app">
        </div>
        <script type="module" src="/main.ts"></script>
    </body>
</html>

Now you are ready to test your app for the first time! Run the following command to start the server

$ npm run dev

Now open the browser to the URL it points to. usually it is http://localhost:5173

When you open the browser, it should show something like this

Congrats on creating your app! Now you can go ahead and learn exactly how the framework works and how you can use different functions and methods to create amazing apps!

Also if you need to refer the functions, you can always go to the API Reference section of the Weblabs Architecture group.

PreviousInstalling Weblabs NextDeveloper Mode

Last updated 2 years ago