Hello World

Learn how to build the most basic PillarX experience

Let's build our first PillarX app. We're going to build a simple Hello World experience where we provide the bare minimum to PillarX to get an app showing. Before we continue, please ensure that you have completed the steps in Getting started first.

Stop running PillarX

At the same place where you ran npm start - stop the running of PillarX by pressing CTRL-C or CMD-C. We will run npm start again later after we have set up "My First App".

Set up "My First App"

Open the .env file we renamed in the Getting started page and change the value of REACT_APP_PX_DEVELOPMENT_ID to my-first-app. The value my-first-app is your PillarX App ID going forward and is unique to your application. It also forms the URL to access your app: http://localhost:3000/my-first-app.

Your development URL may be different to what is shown above. Check your terminal console where you oringinally ran npm start for the URL.

Bootstrap & Manifest

Create your app directory of the same name as your App ID in the src/apps folder. The full directory in this example will be src/apps/my-first-app - where my-first-app is your App ID.

Next, in the my-first-app directory, create a manifest.json file. This is your app manifest, which provides essential information to PillarX such as the app name and description. Copy and paste the following into the newly created manifest.json file:

{
  "title": "My Px App",
  "description": "This is my amazing PillarX experience"
}

Make an icon

Launch Icon Kitchen and make yourself a lovely icon. Don't have the time? Here's one we made earlier. When you're happy with your creation, hit the download button in the top right. This will download a ZIP file to your device.

Open the ZIP file and browse to the "web" directory. Copy icon-512.png to your PillarX my-first-app directory that we created above - and rename it to just icon.png.

Add the entrypoint file

In your my-first-app directory, create a new file called index.tsx.

Open index.tsx file in your editor and copy and paste the following:

const App = () => {
  return <p>Your PillarX experience!</p>;
};

export default App;

Launch PillarX

In the root of the PillarX project directory, run npm start again. When PillarX launches (as a reminder - it will launch not on pillarx.app, but at a localhost website on your browser), you will find your app wired up and ready to develop on in the apps drawer of the Action Bar.

When making changes to your app, it will auto-reload.

You've done it!

That's all there was to it! You can now continue to develop your perfect PillarX experience. Remember to get in touch with us if you need any help. Check out the "next" block below.