Urban Green Explorer

Exploring the city of Helsinki.

Roadmap

See Projects on GitHub.

Stack

• Leaflet

• Pinia

• TypeScript

• Vite with Vue 3 and the following extensions:

  See all extensions

  • Local SSL support
  • Vite Plugin PWA
  • Vite SVG loader
  • Vue i18n
  • Vue Router

• Windi CSS (compatible with Tailwind CSS)

Development tools

• Commitlint
• ESLint with Prettier and TypeScript support
• Husky
• Jest
• Lint-staged
• Playwright
• PostCSS
• Stylelint

Requirements

• Docker (optional)
• Git
• Node Version Manager
• Node.js (v16)

Recommended IDE Setup

Visual Studio Code with these extensions:

• ESLint
• i18n Ally
• Prettier
• Stylelint
• Volar
• Windi CSS

Installation

Before continuing, make sure you have installed everything in the Requirements list.

1. Clone the repository

$ git clone git@github.com:NewThingsCo/urban-green-explorer.git
$ cd urban-green-explorer

2. Install the correct Node version

$ nvm install

3. Install your local dependencies

$ npm install

Development

Start the development server:

$ nvm install
$ npm run dev

To expose your local IP for mobile testing within your local network, use this instead:

$ npm run dev:host

Commits

This project is using the Conventional Commits specification with some modifications specified in the package.json file.

All commit messages, scopes and types should be in Sentence case, i.e.:

$ git commit -m "Feat: New feature"

Husky will run a pre-commit hook to ensure the commits follow the same pattern.

Skip Git hooks

Add the following env to skip Git hooks:

$ SKIP_HUSKY=true git push

Lint files

Check for errors:

$ npm run lint

Fix files automatically:

$ npm run lint:fix

Prettier

Fix files automatically:

$ npm run prettier

If you're using Visual Studio Code, the editor should fix and format the files you edit automatically on save. See list of recommended extensions for more info.

Build for production

$ nvm install
$ npm run build # Files will be built to the /dist folder
$ npm start

To specify a port, add npm start -- --port=4000.

Local Docker container

Build a Docker container that includes the production version:

$ npm run build:docker

When the build is complete, you should be able to find urban-green-explorer listed in your local Docker images.

Click run and choose a port if needed. Default is 8080.

Additional documentation

• PostCSS documentatioin
  • Preset Env
• Vite documentation
• Vue documentation
  • i18n documentation
  • JSX syntax
• Windi CSS documentation

License