Getting Started
Welcome to the 💰 Web App Platform documentation!
Manual Setup
Install react
, react-dom
, and mwap
in your project:
npm install mwap react react-dom
# or
yarn add mwap react react-dom
Open package.json
and add the following scripts:
{
"scripts": {
"build": "mwap build",
"dev": "mwap dev",
"start": "mwap start"
}
}
dev
- Runs mwap dev which starts your app in development modebuild
- Runs mwap build which builds the application for production usagestart
- Runs mwap start which starts your bundled app in production mode
Next we will introduce a page to our application by creating a pages/home.tsx
file that exports a simple React component:
import * as React from "react";
import { Helmet } from "react-helmet-async";
const HomePage = () => {
const [count, setCount] = React.useState(5);
const handleIncrement = () => setCount(count + 1);
return (
<>
<Helmet>
<title>Home</title>
</Helmet>
<h1>Hello, World!</h1>
<button onClick={handleIncrement}>Count: {count}</button>
</>
);
};
export default HomePage;
Now we will expose the Home component by creating a pages/index.ts
file and assigning our home component to a page:
import type { Page } from "mwap";
const pages: Page[] = [
{
// Points to the component in the pages directory
// you wish to render for the provided path.
module: "home",
exact: true,
path: "/",
},
];
export default pages;
To start a development server run npm run dev
or yarn dev
. Visit http://localhost:5000 to view your application.
So far, we get:
- Automatic compilation and bundling (with webpack and esbuild)
- React Fast Refresh
- Server-side rendering of
./pages/index
- Static file serving.
./public/
is mapped to/
- Automatic client bundle inlining of environment variables that begin with
MWAP_
.env
support for client and server environment variables
Related
For more information on what to do next, we recommend the following sections: