Getting started with Nostalgie

This tutorial will teach you how to build your first "Hello World" project with Nostalgie.

Steps

1. Scaffolding your project

To scaffold a Nostalgie app, you can use the create-nostalgie-app module using npx (or npm init):

npx create-nostalgie-app my-app

Your app will be scaffoldedin the my-app directory and is ready to go.

2. Run your project in development mode

Running your project in development mode will build your app in development mode and serve it on http://localhost:8080 (by default). Your app will automatically reload when you change the code.

# Make sure you're in the directory you just scaffolded
cd my-app
npm run dev

Your app will now be started and can be seen at loalhost:8080. You should see something like this:

3. Make changes to your app

The main entrypoint to your app is in the ./src/App.tsx file.

By default Nostalgie scaffolds a TypesScript project. This file can easily be renamed to App.jsx if you prefer to work in JavaScript.

Open ./src/App.tsx in your editor of choice and make some changes. Make sure that you're still running npm run dev from the previous step. You should see log output showing that your project has been rebuilt. If you're watching closely, you should also see that your app has refreshed in the browser, reflecting the changes you made.

4. Build your app

Building your app will produce a stand-alone artifact that you can deploy to your hosting provider of choice.

npm run build

A production build of your Nostalgie app is now available in ./build.

Recap

In this tutorial, you were introduced to create-nostalgie-app as an easy way to scaffold a new project. You were also exposed to the common development gestures required to develop and build your Nostalgie App.