Skip to content
LightNet LightNet LightNet

Getting started

Welcome to the LightNet developer documentation. This guide walks you through creating your first LightNet project. Not sure what LightNet is all about? Visit the LightNet homepage.

Requirements

Section titled “Requirements”

Before you start, make sure the following tools are installed on your machine:

To verify your installations, run the following commands in your terminal:

Terminal window
node --version
git --version

If these commands return version numbers, you’re ready to go!

1. Set up the example template

Section titled “1. Set up the example template”

We recommend starting with the example-template, a prebuilt template that showcases LightNet’s features for a fictional skateboard ministry. It is a great starting point for learning how to structure your media library.

To create a local copy of the project, navigate to the folder where you want to create it and run:

Terminal window
npm create astro@latest -- --template LightNetDev/example-template

This starts Astro’s create astro command, which lets you:

  • Choose a location for your project. This creates the project folder and sets its name.
  • Install its dependencies (Yes).
  • Initialize a Git repository (Yes).

Once finished, navigate into your project folder:

Terminal window
cd your-project-folder

2. Run the development server

Section titled “2. Run the development server”

Now that your project is set up, start the development server to see your site in action. The development server lets you preview your media site in your browser without publishing it online.

Terminal window
npm run dev

Your site is available at localhost:4321. Open it in your browser to preview the example site. You will need the development server for the next steps, so keep it running.

3. Make your first modification

Section titled “3. Make your first modification”

As your first modification, let’s change the site title:

  1. Open the project folder in VS Code (or your preferred text editor).
  2. In VS Code, open src/translations/en.yml.
  3. Modify the site.title by changing the value from “SkateNet” to your desired site name.
  4. Save the file. While npm run dev is still running, your browser automatically refreshes to show the updated title. You can see it in front of the large image.

Optional: make another change using the Administration UI

Section titled “Optional: make another change using the Administration UI”

You can also update content with the experimental Administration User Interface (Administration UI). The Administration UI is a graphical editor for managing your media site’s content without editing the source code directly. Follow these steps to open it locally:

  1. Make sure npm run dev is still running in your terminal.
  2. Open Chrome or another Chromium-based browser and go to localhost:4321/admin.
  3. Click the “Work with Local Repository” button.
  4. When your browser prompts you, select the local folder of your new project and grant access.
  5. In the Administration UI, open Media Items and select How to 360 flip. Change the title to “How to Do a 360 Flip”.
  6. Click the “Save” button in the header bar.

This action updates a JSON content file stored inside your project folder.

Inspect the changes you just made:

  1. Check the updated content file: Open the file located at src/content/media/how-to-360-flip--en.json. The title attribute should reflect your changes.
  2. View the updated website: In your browser, go to localhost:4321/en/media/how-to-360-flip—en. You should see the updated title displayed below the video.

Feel free to experiment further by adding new media items through the Administration UI or by creating additional JSON files.

What’s next?

Section titled “What’s next?”

Great job! 🎉 You’ve successfully created, run, and modified a local copy of the example template. Now you can dive deeper into how LightNet works and explore more advanced customization options.