Table of Contents

Local installation

This guide will walk you through the steps to install the Stride website on your local machine for development purposes. Although we use the Windows operating system for development, the steps should be similar for other operating systems.

Minor updates can be made directly on GitHub. However, for more significant updates that affect multiple pages, we recommend using a local development environment so you can see the impact of your changes beforehand. This is because we use the Eleventy static site generator, and in some cases, all pages need to be regenerated. This approach helps you assess your changes before submitting a pull request.

This guide assumes you have a basic understanding of the technologies used in the Stride website.

Prerequisites

Before updating the Stride website, ensure you are familiar with the following prerequisites:

  1. Familiarity with the command line
  2. .NET SDK 8.0 or higher: You can download the installer from the .NET SDK website
    • If .NET SDK is already installed, ensure you have version 8.0 or higher. You can check your version by running dotnet --info in a terminal.
  3. Git installed: You will need Git for version control. If you don't have Git installed, you can download it from the Git website
  4. Development IDE of choice: Choose an Integrated Development Environment (IDE) that you're comfortable with for development. Although there are various popular choices, such as Visual Studio, Visual Studio Code, and others, this guide will focus on using Visual Studio, as it is the primary IDE for the Stride project, and as of writing, we use Visual Studio 2022. You can download the free Community edition from the Visual Studio website

Installation Steps

  1. ❓You might want to create an issue so we can track your contribution and avoid duplicate work. If you're unsure whether your contribution is needed, feel free to create an issue and ask
  2. 🍴 Fork the repository by navigating to the Stride website repository and clicking the Fork button in the top-right corner
  3. 📥 Clone your forked repository using the following command, replacing your-username with your GitHub username: git clone https://github.com/your-username/stride-website.git
    • 💡Tip: It's a good idea to create a new branch for each feature or bug fix you work on. This helps keep your forked repository organized and makes it easier to manage multiple pull requests
  4. 📁 Go to the project folder cd stride-website
  5. 🚀 Run npm install to install all dependencies

Running the Development Server

  1. 🚀 Run npm start (npx @11ty/eleventy --serve) in the command line to start the development server
  2. 📋 You should see many logs in the command line, indicating the progress and displaying any errors
    • ⚠️ A Windows Security warning may appear on the first run (Allow Node.js JavaScript Runtime to communicate on these networks). Click Allow access
  3. 🌐 Open the site in your browser by navigating to http://localhost:8080/
  4. 💻 Open the project in Visual Studio by opening the Stride.Web.sln solution file, or use the IDE of your choice
  5. 🔄 Once you save the updated file, the website will automatically refresh in the browser
  6. 😃 Happy coding!

ToDo: Attach a screenshot of the command line output

Let's update the content now!

ASP.NET Core

This static website can also be hosted using ASP.NET Core.

Although we're not currently using the ASP.NET Core website, it remains available for future use. If necessary, we can integrate dynamic ASP.NET Core pages with the static pages generated by Eleventy.

To edit the website through Visual Studio, open the Stride.Web.sln solution, which will load the website in the IDE. You can then modify the pages and content and run the website directly from Visual Studio.

During the Visual Studio build process, npm run build is executed, generating the static website in the same _site folder as previously described. The ASP.NET Core website uses this folder instead of the default wwwroot. This customization is specified in the Program.cs file.

var builder = WebApplication.CreateBuilder(new WebApplicationOptions
{
    Args = args,
    WebRootPath = "_site" // Set the folder where the static files are located (e.g., Eleventy output folder)
});
Edit this page