Build a web app using React and Netlify as the frontend, and Transposit as the backend.
If you'd like, skip the tutorial and view the finished code here.
If you're new to Transposit, browse its quickstart. This React tutorial will assume basic familiarity with Transposit.
Create a new app and give it a name, such as hello_react.
Add an operation and commit it.
// "hello" JavaScript operation
(params) => {
return {
hello: "react"
};
}Navigate to Deploy > Endpoints. Deploy your operation as an endpoint and only require user sign-in. Save your changes.
Your backend is now deployed!
Transposit apps are backed by a Git repo. Clone your app's repo locally so you can version your frontend code along side your backend code.
Navigate to Settings > App Info > Source code and perform a git clone.
# your username is your username on Transposit
# your password is the "Git access token" available on Transposit in user settings
git clone https://console.transposit.com/git/jplace/hello_reactInstall create-react-app globally.
npm install -g create-react-appIf you're unfamiliar with React or
create-react-app, checkout their quickstart.
Navigate to your cloned app repo. Create a directory called frontend/ and initialize a React app in it.
cd hello_react/
mkdir frontend/
cd frontend/
npx create-react-app .Test that your React app is now working.
npm start # your app will be available at http://localhost:3000Your React app will be a single page app.
Install React Router.
npm install --save react-router-domRewrite your React app (frontend/src/App.js) to have three routes:
- /signin for your sign-in page
- /handle-signin for your sign-in redirect
- / (index) for your app's signed-in content
import React from "react";
import { BrowserRouter as Router, Route } from "react-router-dom";
function SignIn() {
return <h1>signin page</h1>;
}
function HandleSignIn() {
return <h1>handle-signin page</h1>;
}
function Index() {
return <h1>index page</h1>;
}
function App() {
return (
<Router>
<Route path="/signin" exact component={SignIn} />
<Route
path="/handle-signin"
exact
component={HandleSignIn}
/>
<Route path="/" exact component={Index} />
</Router>
);
}
export default App;Restart npm start. Navigate to http://localhost:3000/signin to test that your router is working.
Install Transposit's JS SDK.
npm install --save transpositInstantiate the SDK with a reference to your app's URL. In Transposit, You can find your URL under Users > User Configuration.
import { Transposit } from "transposit";
// At the top of App.js
const transposit = new Transposit(
"https://hello-react-ngsln.transposit.io" // replace with your app's URL
);Put a sign-in button on your sign-in page. On click, this button will navigate to Transposit for sign-in.
In Transposit, you can configure a sign-in provider and restrict sign-in to certain users.
function SignIn() {
return (
<button
onClick={e => {
transposit.signIn(`${window.location.origin}/handle-signin`);
}}
>
Sign In
</button>
);
}At the end of sign-in, Transposit will redirect back to your app. Your app needs to use the SDK to complete the sign-in process and initiate a session.
To implement this step securely, Transposit must know where your app is running. In Tranposit, whitelist your app's /handle-signin URL. Navigate to Users > User Configuration > Registration and Sign-in and click Advanced. Add http://localhost:3000/handle-signin to Successful sign-in URIs. Save your changes.
Use a React effect hook to handle sign-in. After, use React Router's history to navigate to the index page. Your component will return null, meaning render nothing. This is fine since the page will almost immediately redirect after loading.
function HandleSignIn({ history }) {
React.useEffect(() => {
transposit.handleSignIn().then(() => {
history.replace("/");
});
}, []);
return null;
}Require users to sign in before accessing your index page. Use the SDK to create React hooks that implement this behavior.
// Hook to check that user is signed-in. Return true if they are.
function useSignedIn(history) {
const [isSignedIn, setIsSignedIn] = React.useState(false);
React.useEffect(() => {
if (!transposit.isSignedIn()) {
history.push("/signin");
} else {
setIsSignedIn(true);
}
}, []);
return isSignedIn;
}
// Hook to load the signed-in user
function useUser(isSignedIn) {
const [user, setUser] = React.useState(null);
React.useEffect(() => {
if (isSignedIn) {
transposit.loadUser().then(u => setUser(u));
}
}, [isSignedIn]);
return user;
}
function Index({ history }) {
// Check if signed-in
const isSignedIn = useSignedIn(history);
const user = useUser(isSignedIn);
// If not signed-in, wait while rendering nothing
if (!user) {
return null;
}
// If signed-in, display the app
return (
<>
<h1>Hello, {user.name}</h1>
<button
onClick={() => {
transposit.signOut(`${window.location.origin}/signin`);
}}
>
Sign Out
</button>
</>
);
}Load dynamic data into your web app. Call your backend when your index page loads.
function Index({ history }) {
// Check if signed-in
const isSignedIn = useSignedIn(history);
const user = useUser(isSignedIn);
// Call your backend
const [data, setData] = React.useState(null);
React.useEffect(() => {
if (isSignedIn) {
transposit
.run("hello") // the name of your deployed operation
.then(({ results }) => {
setData(results);
});
}
}, [isSignedIn]);
// If not signed-in, wait while rendering nothing
if (!user) {
return null;
}
// If signed-in, display the app
return (
<>
<h1>Hello, {user.name}</h1>
{data ? (
<p>
<code>{JSON.stringify(data, undefined, 2)}</code>
</p>
) : (
<p>loading...</p>
)}
<button
onClick={() => {
transposit.signOut(`${window.location.origin}/signin`);
}}
>
Sign Out
</button>
</>
);
}Your web app now offers sign-in and calls your backend. The code in its entirety can be viewed here.
Now that your app is working locally, deploy it to Netlify.
Tell Netlify to treat your app as a single page app. Create a file public/_redirects with content:
/* /index.html 200
Install the netlify-cli.
npm install netlify-cli -gBuild your frontend and deploy it.
npm run build
netlify deploy
# Select "Create & configure a new site"
# Give your site a unique name
# Your "Publish directory" should be ./buildTo sign in to your app, you need to update the Successful sign-in URIs in Transposit. Navigate to Users > User Configuration > Registration and Sign-in and click Advanced. Add <live draft URL>/handle-signin to Successful sign-in URIs. Save your changes.
Try out your app on Netlify!
Use Netlify's --prod option to deploy to production. Make sure to add your production URL to Successful sign-in URIs as well.
npm run build
netlify deploy --prod
# Your "Publish directory" should be ./buildWhen making changes to the backend, use Transposit as an IDE. Commit in the IDE to deploy your changes.
When making changes to the frontend, use your preferred editor. Commit locally and use netlify to deploy frontend changes.
To synchronize your backend and frontend changes, pull your backend changes locally from Transposit. Merge them with your frontend changes. You can back up your repo by either pushing to Transposit or hosting a copy of the repo on GitHub.
# Pull backend change from Transposit. Merge them with frontend changes.
git pull
# Push merged repo back to Transposit as a backup
git push
# Optionally, add a GitHub remote repo as a backup
git remote add github https://github.com/jplace/hello_react.git
git push -u github masterCheck out the reference documentation to learn more about the SDK. Check out Transposit's documentation to learn more about building your backend.