Skip to content

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.

License

Notifications You must be signed in to change notification settings

kajetansw/purescript-react-vite-starter

Repository files navigation

PureScript➕React➕Vite
Project Starter


Project license

code with love by GITHUB_USERNAME

Table of Contents

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

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

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:

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.

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.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published