These docs are a work-in-progress and are currently undergoing a major rewrite!

JavaScript

Forge doesn't come with any strong opinions on JavaScript (Tailwind is not actually installed with npm). But our preference is to keep it as simple as possible. The Django templates and views are a powerful tool, and we strongly recommend that you use them for your front end instead of building a complete "single page application" in React or something.

Use what you're comfortable with, but our preferred places to start are:

But you can obviously use Vue, React, or any other framework you want.

Adding JavaScript to your deploy steps

In your package.json, add a build script and make sure the heroku/node buildpack is included (forge heroku set-buildpacks can do this for you).

// package.json
"scripts": {
  "build": "my-production-build-step"
}

Adding JavaScript to local development via forge work

In your package.json, add a watch script!

// package.json
"scripts": {
  "watch": "my-local-dev-process"
}

Passing JavaScript data to the front end

Occasionally you'll need to pass some data to the front end and do something with it in JavaScript.

The json_script filter is the recommended way to do this in Django:

<!-- example.html -->
{{ value|json_script:"hello-data" }}
<script>
    var value = JSON.parse(document.getElementById('hello-data').textContent);
    console.log(value);
</script>

Import maps

To use a framework like React without npm-installing it, consider import maps with forge-importmap.