Quickstart
Create a new Space every time Flatfile is opened.
The DevXP engineering team hosts office hours every Thursday at 11 a.m. Pacific Time where we answer your questions live and help you get up and running with Flatfile. Join us!
For synchronous data import/exchange completed in one session, create a new Space each time Flatfile is opened. This suits situations where a clean slate for every interaction is preferred.
Before you begin
Get your keys
To complete this tutorial, you'll need to retrieve your Publishable
key from your development
environment.
Note: The Publishable Key is safe to be used in client-side applications as it has limited access to the Flatfile API.
Make a new directory.
Go into that directory.
Follow prompts from the init
command.
Create your file structure
Setup your app to look something like this:
In this file structure, your main directory is src
.
Depending on how you want to handle styling your application, you can have a styles.css
file in your src directory, create sub-directories to contain style files, or even create directories outside of src
if you prefer. The only requirement is that the files can be imported into vue files.
The heart of your vue app will be App.vue
, as this will configure and render your component(s) to the index.html.
Build your importer
1. Add a Flatfile Button
Add a button to your application to open Flatfile in a modal. Pass in your publishableKey
and a new Space will be created on each page load. Optionally, add the content here to your styles.css
.
2. Configure your project
In your environment file, you’ll need to define your keys. In this example, you will need your publishableKey
. You can find these under “Developer settings” when logged into platform.flatfile.com.
You can create your .env
file via the template below, as well as your App.vue
, tsconfig.json
, tsconfig.node.json
, and vite.config.ts
, which are the remaining top-level config files. After these are initialized properly we can configure the app files under src
.
3. Initialize Flatfile
In your App.vue
you’ll need to pass in a minimum of the publishableKey
from your .env
.
Also, add the content here to your main.ts
, and vite-env.d.ts
. Optionally you can also add shims-vue.d.ts
if you have the need.
4. Start your client
- Update your package.json to include this script:
- Now, start your front end by heading to the terminal and running the following command.
Your console should display a message like the following:
- To view your app, copy the url and paste it into your browser. Click the button and see that an Empty Space gets created.
5. Build a workbook
Now, let’s build a Workbook inside the Space for next time.
Add your config.ts
file, and place the following code in it. After you have done so, import the configuration to App.vue
, and update spaceProps
to have the value of config
under workbook
(this will be around line 36
). This config file has the configuration settings for your workbook, so feel free to edit however necessary to meet your needs.
6. Transform Data
Next, we’ll listen for data changes and respond using an event listener.
- Add a
src/listener.ts
file with this simplerecordHook
. - Update
App.tsx
to import the listener.
Once you add this code, when a change occurs, we’ll log the entered first name and update the last name to “Rock.” You’ll immediately see this begin to work when you add or update any records. Learn more about Handling Data
7. Match your brand
By attaching a themeConfig
to spaceProps
in src/App.tsx
, we will now override colors in your Space to match your brand. See all of the options here in the Theming Reference.
8. Add customizations
You can stop here or you can view our full reference to see all the ways you can customize your importer.
Example Project
Find this Vue.js example project in the Flatfile GitHub repository.