> For the complete documentation index, see [llms.txt](https://comunity.gitbook.io/learning.comunitynexus/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://comunity.gitbook.io/learning.comunitynexus/26.2/toolkit-guides/web-sites/community-central.md).

# Community Central

Community Central is a specialised web site project type within the ComUnity Developer Toolkit, designed to act as the central portal for a solution. Unlike regular static web sites, this option generates a React-based app with project scaffolding and local development capabilities.

**Why Use Community Central?**

While standard web sites are excellent for simple content, modern user portals demand complex UIs and streamlined development workflows. Community Central was built to meet these needs by providing:

* **Go Beyond Toolkit APIs**: Overcome backend limitations. Because Community Central is a complete React application, it can call *any* remote API, not just those provided by the Toolkit. This allows you to integrate third-party services (e.g., Stripe for payments, Google Maps for location data, or any other REST API) directly into your user-facing portal, giving you limitless integration possibilities.
* **Accelerated Setup**: Get a complete, build-ready React application with a single click, saving you from complex manual configuration.
* A "Golden Path" for Development: Start with a project scaffold that follows industry best practices, ensuring a solid, maintainable foundation.
* Streamlined Workflow: Easily download the project to work in a rich IDE like VS Code, then deploy your production build back to the Toolkit with a simple archive upload.
* **Focus on Your Application, Not on Tooling:** Spend your time building features, not wrestling with configuration.

**Common Use Cases**

* Customer Self-Service Portal: A full-featured portal for users to log in, manage their accounts, and view data.
* Interactive Data Dashboard: A dynamic Single Page Application (SPA) that presents data from your project's APIs with interactive charts and tables.
* Partner or Vendor Platform: A central hub for third-party partners to onboard and interact with your solution.

{% hint style="warning" %}
You can only create one Community Central site per project. If your solution requires multiple web portals, use the standard Web Site feature for any additional sites.
{% endhint %}

**Key Features**

| Feature                    | Description                                                                     |
| -------------------------- | ------------------------------------------------------------------------------- |
| Powered by React           | Automatically generates a complete React project and handles the initial build. |
| Integrated File Management | View, edit, and organise project files directly from the Toolkit's UI.          |
| Full Source Code Access    | Download the entire React project to work in your preferred local environment.  |
| Instant Live Preview       | Instantly accessible via the platform's `/w/` URL handler.                      |

### **Creating Your Community Central Site**

1. From your project's dashboard, navigate to the **Web sites** section.
2. Locate the **Community Central** web site tile at the top.
3. Click **Add Community Central** to begin the setup process.
4. Please be patient. The Toolkit is now generating the React project and running the initial build. This may take a few moments.
5. Once complete, the tile will update. You can now:
   * Click Open web site to preview your new portal.
   * Click Edit to start managing your project files.

### **Managing Your ComUnity Central Web site**

You have two primary ways to manage and customise your ComUnity Central site: directly within the Toolkit for quick edits, or by downloading the project for advanced development.

#### **Quick Edits of the ComUnity Central Web site in the Toolkit**

For simple changes, click Edit on the Community Central tile. From the file manager, you can perform basic operations like Add file, Add folder, Upload archive, and Download site archive.

#### **Advanced Customisation of the ComUnity Central Web Site (Local Development)**

For major changes, work with the project on your local machine:

1. In the file manager view, click Download project archive.
2. Unzip the file and open the project folder in your preferred code editor (e.g., VS Code).
3. Follow the instructions in the `README.md` file to install dependencies and run the local development server (e.g., `npm install`, then `npm run dev`).<br>

   <pre data-title="Typical folder structure of a downloaded ComUnity Central project (excluding node_modules, and build artefacts)."><code>├── index.html
   ├── lib
   |  └── comunity_central-0.0.1.tgz
   ├── package-lock.json
   ├── package.json
   ├── public
   |  └── favicon.ico
   ├── readme.md
   ├── src
   |  ├── components
   |  ├── config
   |  ├── index.jsx
   |  └── reducers
   ├── structure.txt
   └── vite.config.js

   </code></pre>
4. Make your code changes and test them locally.
5. When ready, run the build command (e.g., `npm run build`) to generate a `build` or `dist` folder.
6. Return to the Toolkit's file manager and use Upload archive to upload a `.zip` of the contents of your build folder. This deploys your changes.

**Understanding the File Structure**

When you open the file manager, you will see the compiled output of the React application. The key files are:

* `index.html`: The main entry point for your application. This file must remain at the root level.
* `favicon.ico`: The site icon. You can replace this with your own.
* `static/`: A folder containing the compiled and minified JavaScript, CSS, and other assets.
* `site_created`: An internal marker file used by the Toolkit. You can safely ignore this file.