zarak / purescript-react-vite-starter

This is a starter project for everyone who'd like to start with PureScript with React and Vite as a tool for your dev server and build.

PureScript➕React➕Vite
Project Starter

Table of Contents

• About
  • Built With
  • Why PostCSS
• Getting Started
  • Prerequisites
  • Installation
• Usage
• Support
• Project assistance
• Authors & contributors
• License

---

About

This is a starter project for everyone who'd like to start with PureScript with React and Vite as a tool for your dev server and build.

This solution enables swift development with PureScript + React by enabling everything Vite has to offer e.g. Hot Module Replacement, a plugin ecosystem and fast pre-bundling with esbuild. More about that can be found here.

The project is also set up so that any changes to PureScript .purs files will trigger changes to the Vite server during development.

Built With

• PureScript
• Spago
• purs-tidy
• React
• Vite
• PostCSS

Why PostCSS

This project was initially set up with PostCSS to have something similar to CSS imports in JSX or CSS Modules in React (each component having its own CSS file), as its impossible to do something like import "./style.css" in a PureScript module.

If you think it's not a solution for you, and you'd like to replace it with e.g. purescript-react-basic-emotion, it's not that hard to do so!

To get rid of PostCSS integration (enabling you to add your own solution) you'd have to:

• delete autoprefixer, postcss and postcss-nesting packages
• remove all .pcss files
• delete postcss.config.js file

Getting Started

Prerequisites

• NodeJS and npm installed
• Code editor and PureScript plugin installed. Follow this document to set up your IDE with necessary .

Installation

First run the command below to clone your repo in any directory you desire:

git clone https://github.com/kajetansw/purescript-react-vite-starter.git

Then run the command below in your terminal to install all npm dependencies:

npm i

Run the command below to install all Spago dependencies:

npm run build:spago

Usage

Running dev server

Run the command below to start Vite dev server:

npm run start

Open a separate terminal and run the command below start Spago build with a --watch mode:

npm run start:spago

This setup will enable HMR changes to the Vite server during development.

Development

You can develop more on top this starter, as with any other project based of the purescript-react-basic.

As there is a custom solution for CSS set up simulating CSS imports in JSX files, just have one additional thing in mind. Any new stylesheet for your components must be manually added to the imports in the main CSS file - src/index.css. Yes, this means that stylesheets are not scoped to the component level, so it's recommended to have some naming convention for CSS classes in mind.

Code formatting

Run the command below to format all .purs files in the /src directory using purs-tidy.

npm run format

Support

In case of any problems, reach out to the maintainer via GitHub issues.

Project assistance

If you want to say thank you or/and support active development of purescript-react-vite-starter:

• Add a GitHub Star to the project.
• Tweet about the purescript-react-vite-starter.
• Mention it on the official PureScript Discord server.

Authors & contributors

The original setup of this repository is by kajetansw.

License

This project is licensed under the MIT license.

See LICENSE for more information.