Incrementally Adopting PureScript in a JavaScript Web Application
Tags: javascript, webdev, functional
Published: 2021-08-11 13:58:07

---
title: Incrementally Adopting PureScript in a JavaScript Web Application
published: true
description: Incorporate a bit of PureScript into almost any JS project in less than five minutes.
tags:
  - javascript
  - webdev
  - functional
cover_image: https://images.unsplash.com/photo-1597239450996-ea7c2c564412?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=634&q=80
---

One little-known fact about PureScript is that it is easy to incrementally adopt in a JavaScript project. That means that you can use it in places where a functional style makes sense and otherwise use any other combination of frameworks or just plain ol' JS.

In this article, I'll show you how to set up a React project and integrate PureScript. The whole thing should take less than 5m.

# Creating your React App

In my case, I ran `npm install -g create-react app` followed by `create-react-app my-app`.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qwjjs1i1mjucvdoltd4l.png)

After `cd`-ing into `my-app`, I installed the dev dependencies to work with PureScript.

```bash
$ yarn add dev purescript spago purty
```

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yjkt84kfdcnq5eo3goxd.png)

I then opened the project in VSCode.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/euuubwyqvk2ao75cj3xd.png)

# PureScript Setup

The equivalent of `create-react-app` in PureScript-land is `spago init`. By running `spago init`, the tool `spago` will add all of the files you need to work with PureScript development.

```bash
$ npx spago init
```

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r29sb2qxibnk4lvw4o9p.png)

For smoother PureScript editing, I also recommend installing two VSCode extensions for working with PureScript: **PureScript IDE** and **PureScript Language Support**.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/utyfkt2hai14y26qriii.png)

The next step is to add build and test commands to your `package.json`. The react commands are already there from `create-react-app`, so we'll just add the PureScript ones. As we're working with a React app, it's idiomatic to have all of the JS code under the `src/` directory. We'll add an argument to `spago build` to make sure the generated files go to a folder in the `src/` directory.

```json
  "scripts": {
    "start": "react-scripts start",
    "build": "spago build --purs-args \"-o src/generated-ps/\" && react-scripts build",
    "test": "spago test --purs-args \"-o src/generated-ps/\"  && react-scripts test",
    "eject": "react-scripts eject"
  }
```

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2y59zn8iuhcnipl1q5ap.png)

# Let's write some PureScript code

Now that the setup is done, let's create a file called `PSCode.purs` under the `src/` directory. We'll give it the following content.

```haskell
module PSCode where

import Prelude

myString = "hello react" :: String

myFunc :: Int -> Int -> Int
myFunc a b = a + b
```

When we run `yarn build`, we can see that `spago` picks up this file automatically and creates the `src/generated-ps` directory.

# Putting it all together

Now, in `App.js` - the main application file generated by `create-react-app` - we can include the PS code.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rswsc9dxzdu43yy82q71.png)

We call the PS functions just like any other JavaScript function. The only caveat is that PS functions only take one argument at a time, so instead of calling `myFunc(3,7)` we call `myFunc(3)(7)`.

When we run `yarn start`, here's what we get:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0hzbj6t73q32lqp9jcq7.png)

# Conclusion

Incorporating PureScript into a JS-based web project is a great way to learn the language. You can write certain parts of a project in PureScript without needing to rewrite the whole project.

I hope you get a chance to try PureScript out in your JS projects! For more learning resources, you can check out [PureScript website](https://purescript.org).