Single-page applications

There are many ways to build a single-page application. Larger applications can benefit from using a frontend library and bundler. Various libraries help us organize code, and the bundler helps us package it for optimal production delivery.

In this guide, we'll be using the frontend library React with the Parcel bundler. React is probably the most popular framework and works with many bundlers, but we like Parcel because of its speed and simplicity.

Create a fresh Architect project

Initialize an Architect project, change directories into the project folder, create a package.json file, and install npm packages:

npm init @architect --static ./my-spa
cd my-spa
npm init -f
npm install react react-dom parcel-bundler @architect/sandbox

Update the build folder configuration in app.arc

Edit the app.arc file in the root of your project directory so it shows the following:

@app
my-spa

@static
folder dist

Update the build script

Add the following start script to your package.json file:

"scripts": {
  "start": "parcel public/index.html & sandbox"
}

Update public/index.html

Replace the contents of your index.html file with the following:

<!doctype html>
<html>
<body>
  <div id=app></div>
<script src=/index.js></script>
</body>
</html>

Add public/index.js

Create an index.js file in the public directory and add the following to it:

import React from "react";
import ReactDOM from "react-dom";

class HelloMessage extends React.Component {
  render() {
    return <div>Hello {this.props.name}</div>;
  }
}

var mountNode = document.getElementById("app");
ReactDOM.render(<HelloMessage name="Jane" />, mountNode);

Preview your app by starting the dev server

npm start

Clone the example source