Deploy Spasm

• Launch Spasm under three minutes with docker/podman.
• Or set up a new server from scratch with one script.

---

Spasm Forum web client

spasm-forum-web is a frontend for a Spasm forum.

spasm-forum-server repository can be found here.

This repo is for development. If you want to deploy Spasm, then check docker/podman or ansible.

Install npm

Note: nvm and npm should already be installed if you've used scripts for an automated initial server setup.

# install nvm to manage node versions
# https://github.com/nvm-sh/nvm

# install node v20
nvm install 20

# set node v20 as default
nvm alias default 20

# switch to node v20
nvm use 20

# update npm
npm install -g npm

# install packages
npm ci

---

Download the app

Download the app from the Github into the frontend/ folder.

Note: the app should already be downloaded if you've used scripts for an automated initial server setup.

git clone https://github.com/spasm-network/spasm-forum-web.git frontend/
cd frontend/

---

Environment

Create default .env file, see example .env.example.

Note: the .env file should already be created if you've used scripts for an automated initial server setup.

cp .env.example .env

---

Test locally

Note: this is an optional step intended for developers. You can skip this step if you want to run a Spasm forum.

Install npm packages in the frontend folder.

npm ci

Start the app.

npm run dev

Open a browser and test the app at localhost:3000.

Note: press ctrl+c in the terminal to stop the process.

Note: npm run dev temporarily doesn't work on nuxt versions above 3.15 because they introduced breaking changes, but you can still use npm run prod.

---

Customization

Necessary settings

• Change app name, title, description, about, manifest params in .env.
• Add logos (recommended sizes are 100x100, 192x192, 512x512) as favicon.ico, pwa-192x192.png, pwa-512x512.png into public/ folder.

Optional settings

There are many other settings that can be changed via .env, most variables have self-explanatory names and comments.

The full list of settings can be found in ./.env.example.

Admin panel

Some settings (social media links, lists of moderators, short URLs, different whitelists) can be changed via a web page without restarting a server.

An admin panel can be accessed at https://example.com/admin or by clicking on an 'admin' button at the bottom menu bar after connecting an admin public key (address).

Make sure that an admin panel and app config changes are enabled and admin addresses are listed in .env files in both frontend (spasm-forum-web) and backend (spasm-forum-server).

ENABLE_APP_CONFIG_CHANGES=true
ENABLE_APP_CONFIG_CHANGES_BY_ADMIN=true
# Separate admin addresses with comma
ENABLE_ADMIN=true
ADMINS=""

Advanced customization

You can use completely custom intro and contacts if customization via predefined options in .env is not enough.

If you've used scripts for the automated server setup, then custom intro and contacts files should have already been created.

If you follow the manual installation, then create custom files CustomIntro.vue and CustomContacts.vue in components/custom/.

If your version has example files, then you can simply copy-paste them:

cp components/custom/CustomContacts.example.vue components/custom/CustomContacts.vue
cp components/custom/CustomIntro.example.vue components/custom/CustomIntro.vue

Updates

Note: customized files like components/custom/CustomIntro.vue, components/custom/CustomContacts.vue, and .env are ignored by git, so you can customize them and they won't be changed after updating the code to a newer version with git pull. However, it's a good idea to back these files up.

---

Build

npm ci

Build the frontend for running in production.

npm run build

Run production

npm ci

Run with pm2 (after build):

# Install pm2
npm i pm2 -g

# To make sure app starts after reboot
pm2 startup

# Run the app
npm run prod

# Freeze a process list on reboot
pm2 save

# Check processes
pm2 list

For developers

Use mock data

If you want to contribute to the UI (frontend) without the hassle of setting up the backend and the database, then you can use the mock data to pre-populate the client with feed posts and latest comments by enabling this environment variable in the ./.env file:

USE_MOCKED_DATA_IF_BACKEND_IS_DOWN=true

Don't forget to restart the app with npm run dev.

Contact

Send a message to degenrocket on Session if you need any help.