Welcome to the Sandstorm Website project! This guide will help you set up the project locally so you can contribute to the website's development. Follow the instructions carefully, and you'll be up and running in no time!
Before you begin, ensure you have the following installed on your machine:
- Node.js: Download and install from nodejs.org.
- Nodemon (installed globally): A tool to auto-restart your server when code changes.
To install Nodemon globally, use the following command:
npm install -g nodemonFollow these steps to get the website running locally:
-
Clone the repository:
Begin by cloning the repository to your machine:git clone https://github.com/Sandstorm-Station/Sandstorm-Station-13-wiki/ cd Sandstorm-Station-13-wiki/wiki -
Install dependencies:
The project dependencies must be installed in thewiki/folder, so thenode_modulesdirectory is created inside it. Run the following command inside thewiki/folder to make sure all dependencies are installed:npm install express npm install ejs
-
Run the server:
After installing the dependencies, start the server using Nodemon:nodemon server.js
This will start the server on
localhost:80. You can now access the website in your browser by simply typinglocalhost(no need to specify the port number since it's running on port 80).
Now that the server is running, you can start making changes to the website! Here's a breakdown of the project's structure and how you can contribute.
-
views/:
This folder contains all the EJS files, which are the core of the website's pages. For example, theindex.ejsfile is the main homepage. You can add or modify these EJS templates to change the website's content.EJS allows us to include reusable components (partials) and pass dynamic content from the server to the views. For example:
<!-- views/index.ejs --> <html> <head> <title>Welcome to Sandstorm</title> </head> <body> <%- include('partials/header') %> <h1><%= content.welcomeMessage %></h1> <%- include('partials/footer') %> </body> </html>
-
views/partials/:
This is where reusable components like headers, footers, and navigation menus are stored. These partials can be included in other EJS files. For example:<%- include('partials/navbar') %> -
public/:
This directory contains all the static files served to the client, such as CSS, JavaScript, and images. Anything in this folder is publicly accessible. The structure usually looks like this:public/ ├── css/ ├── images/ ├── webfonts/ └── js/You can modify styles in
public/css/, add images topublic/images/, or include custom fonts and scripts.
The website supports multiple languages using a localization system. The language-specific content is stored in the localization/ folder as JSON files. Currently, there are two languages supported: English (en.json) and Portuguese (pt.json).
When a user visits the site, they pass a ?lang= query parameter in the URL to change the language. For example, localhost?lang=pt would load the local copy of the website in Portuguese.
Example of a localization JSON file:
{
"welcomeMessage": "Bem-vindo ao Sandstorm!"
}The server loads the appropriate file based on the user's language selection and injects it into the EJS templates. The user interface for changing language changes this parameter for the user.
After setting up the environment, you can start editing the EJS files or tweaking the server code. Once changes are made:
- Nodemon will automatically restart the server.
- Open your browser at
localhostand hit F5 to refresh the page to see your changes live.
Feel free to edit the server, styles, or EJS pages—then reload the browser to check out the updates
Happy coding! If you have any questions or need help, feel free to reach out.