Develop Your App

You've deployed your first app! The next step is iterating on your app locally to make it better. To do that, you're going to run a local webserver and connect your document's app to it. Then, you can edit your code and just reload your app to pick up changes.

1. Run npm start in your terminal in your my-app directory.

   • Run this command whenever you work on your app, then leave it running continuously — it will automatically watch for code changes and update the compiled files as you edit.
   • If you have a syntax error in your code, it will show up here.
     note

     This uses webpack to compile your .js/.jsx and .less files into a single .js file and .css file in my-app/app/dist.

2. In your Quip document, focus your app by clicking on it. Your app's "Hello World" menu button will appear. Click "Hello World → Use Local Resources" in the Developer section of that menu.

   note

   This will save a setting so that your app will load the code from the local server you're running with npm start on https://localhost:8888.

3. Now, reloading your app via "Hello World → Reload" will pick up any local changes you make without requiring you to upload a new app.ele to Quip!

   note

   If you make any changes to the manifest.json file, you will need to re-run npm run build and then upload your app.ele file to get those updates.

4. Now open my-app/src/App.jsx in your editor, find the text "Hello, world!", and change it to something else:

   import Styles from "./App.less";
   export default class App extends React.Component {
     render() {
       return <div className={Styles.hello}>YES it worked!</div>;
     }
   }
   

5. Click Reload again from your app's menu button and your new text should appear!

   note

   Not seeing the updated text? Make sure that npm start is running continuously, and that it's not reporting any errors. Also make sure that "Hello World → Use Local Resources" is checked.