[Tutorial] Setup

Lets start by creating a folder dedicated to our project. Start by opening a terminal and navigating to where you store all your projects. After that run

mkdir htx-hello-world
cd htx-hello-world

You can of course also use another folder name.

Now that we are inside the root folder of our project we can run

htx init

To create a configuration file. We don't have to change anything, but just for fun let's change the output folder to dist. You should now have something like this.

{
  "environment": "dev",
  "extension": {
    "src": "htx",
    "out": "php"
  },
  "directory": {
    "src": "./src/pages",
    "out": "./dist"
  },
  "constant": {
    "variable": "htx_<component>_<uid>_<variable>",
    "props": "props"
  }
}

Later we'll take a better look at this file, but for now let's create the missing src directory and also create an empty index page. Inside the root of your project run.

mkdir src/pages
cd src/pages
touch index.htx # only works for mac and linux, but for windows users you can you can create a file called `index.htx` manually or open a powershell and run `new-item index.htx`

TIP

If you want some syntax highlighting you can use regular php syntax highlighting. In vscode this can be done by pressing on the Select Language Mode item in the bottom right corner and select Configure File Association for '.htx' and then search for (and select) php

Now that we have an index file we can (for the time being) make a simple little page. Put the following contents into index.htx

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Htx Tutorial</title>
</head>
<body>
    Just a small page
</body>
</html>

Lets now quickly convert the file to regular php (even tough there is no php yet). First go to the root folder. If you followed allong you can use

cd ../../

and then convert it using

htx # or htx run

You should now have a file in the dist folder (with index.php) right next to the src folder.

# [Tutorial] Setup

[Tutorial] Setup