DEV Community

Cover image for Mint ๐Ÿƒ: Getting Started
Szikszai Gusztรกv
Szikszai Gusztรกv

Posted on • Edited on

Mint ๐Ÿƒ: Getting Started

#mintlang #webdev #frontend #javascript

Mint is a refreshing programming language for the modern web (which I am the developer of).

This is the first in the series introducing Mint and it's features.

Why use Mint?

The following list should provide a nice incentive :)

  • Strongly typed, JavaScript like syntax
  • Immutable data structures and functional programming elements
  • HTML like syntax for HTML elements and components
  • Everything included:
    • routing
    • support for components
    • styling with CSS
    • standard library
    • data store (like Redux)
    • development server
    • formatter
    • environment variable handling
    • test runner
    • documentation server
    • JavaScript interoperability
    • Progressive Web Application support
  • Optimized output (minified, mangled)
  • Dead code elimination
  • A single binary which contains the whole toolchain
  • Uses React a Platform
  • and more awesome features...

Installation

Mint comes as a single binary file: mint. To install it please follow the instructions on the install page (basically download the binary and add it to the PATH).

Creating a new project

Once you have Mint installed you can create a new project with the mint init command:

mint init my-awesome-project
Enter fullscreen mode Exit fullscreen mode

If successful you should see this:

Mint - Initializing a new project
โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”
โš™ Creating directory structure...
โš™ Writing initial files...

There are no dependencies!

There is nothing to do!
โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”
All done in 2.231ms!
Enter fullscreen mode Exit fullscreen mode

This creates the following directory / file structure:

my-awesome-project
โ”œโ”€โ”€ source
โ”‚   โ””โ”€โ”€ Main.mint
โ”œโ”€โ”€ tests
โ”‚   โ””โ”€โ”€ Main.mint
โ”œโ”€โ”€ .gitignore
โ””โ”€โ”€ mint.json
Enter fullscreen mode Exit fullscreen mode

Development server

Mint comes with a built in development server which recompiles the code (and reloads the browser) when something changes, to start it go into the project directory and run the mint start command:

If successful you should see this:

Mint - Running the development server
โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”
โš™ Ensuring dependencies... 181ฮผs
โš™ Parsing files... 2.608ms
โš™ Development server started on http://127.0.0.1:3000/
Enter fullscreen mode Exit fullscreen mode

Now you can open the running project on http://127.0.0.1:3000/ or http://localhost:3000/.

If the project is running you should see this:

Now you are up and running with a Mint project locally ๐ŸŽ‰

Online Playground

If you just want to mess around without installing, you can use the try page on the website.

If you like to learn more about Mint check out the guide ๐Ÿ“–

In the next part I'm going to show how to create components ๐Ÿ˜‰ see you there ๐Ÿ‘‹

Top comments (0)

Read next

andrewelans profile image

Inject HTML snippet from file

Andrew Elans -

_ndeyefatoudiop profile image

No one wants to hire you. Now what?

Ndeye Fatou Diop -

mike_andreuzza profile image

How to Create an interactive color-shifting hover card with Tailwind CSS and JavaScript

Michael Andreuzza -

gleamso profile image

Making OpenGraph (OG) Images More Accessible: Now Design & Preview Everything for Free ๐ŸŽจ

gleamso -