feat: #49 setup sass-based css design system (#72) #17

	name: Build NodeJS

	on:
	push:
	branches:
	- '**'
	tags-ignore:
	- 'v*'
	pull_request:
	branches:
	- '**'

	env:
	REGISTRY: ghcr.io
	# IMAGE_URL: "ghcr.io/my-org/my-image:1.0.0"
	IMAGE_NAME: ${{ github.repository }}-frontend


	jobs:
	build:

	runs-on: ubuntu-latest

	permissions:
	contents: read
	packages: write

	steps:
	- uses: actions/checkout@v4
	- uses: actions/setup-node@v4
	with:
	node-version: 18
	- name: Npm install
	run: cd power-pay-frontend && npm ci

	- name: Set up QEMU
	uses: docker/setup-qemu-action@v3

	- name: Set up Docker Buildx
	uses: docker/setup-buildx-action@v3

	- name: Login to the Docker registry
	uses: docker/login-action@v2
	with:
	registry: ghcr.io
	username: ${{ github.actor }}
	password: ${{ secrets.GITHUB_TOKEN }}

	- name: Build Frontend
	run: cd power-pay-frontend && npm run build

	- id: string
	uses: AsZc/change-string-case-action@v6
	with:
	string: ${{ env.IMAGE_NAME }}

	- name: Extract metadata (tags, labels) for Docker
	id: meta
	uses: docker/metadata-action@v5
	with:
	images: ${{ env.REGISTRY }}/${{ steps.string.outputs.lowercase }}

	- name: Build and push
	uses: docker/build-push-action@v4
	if: github.event_name != 'pull_request'
	with:
	context: ./power-pay-frontend
	file: ./power-pay-frontend/Dockerfile
	push: true
	tags: ${{ steps.meta.outputs.tags }}
	labels: ${{ steps.meta.outputs.labels }}

Provide feedback