Develop, Render, and Deploy Fil
Get your computer set up to use this environment.
Explore what in the JS language to learn.
Review how to work with JS in FM
If your computer has Git and Node.js installed on it already, and if you're familiar with Visual Studio Code, then jump right on down to installing and using the JS Dev Environment. Don't worry if you don't have everything set up. The pages in this documentation will clarify things and help you get set up.
Get the template
The JS Dev Environment is found here. Use this template to create a new repository to your Github account, and then clone it to your machine. Install it with the following command:
Start the server
Next, start the development server with the command
Open the .fmp12 file
Finally, open the jsDev.fmp12 file. It will load into development mode, and what you develop in VSCode will render in the web viewer.
Develop the code
Probably you'll want to connect this environment to a real client file. Here's how to do that.
index.html file is your starting point. Here you can add divs to the structure. If you're ready to begin, you can remove the <h1> and <h2> divs and write your own html.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <style> @import './src/style.css'; </style> <title>JSDev</title> </head> <body> <h1>Alright. You're set.</h1> <h2>Now build something amazing!</h2> <button type="button">Click Me!</button> <script type="module"> import './src/index.js' </script> </body> </html>
index.js file comes with a basic function that will run when the button is clicked. Remove that and get to work! See the libraries and JS learning path sections for more ideas.
Rendering the code
While in development mode, what you write in the code editor will render in the FileMaker app.
Refresh the web viewer
control+1 (Windows)). This will reload the code into the web viewer, and the changes you've written will be visible.
Observe the bugs
Also rendered are the bugs or any console logs you have in your code, and these bugs/logs are found in the console of the web viewer browser. To access the console inside the browser dev tools, simply right click on the web viewer and choose "Inpect Element". Navigate to the console tab.
If you don't already have this console enabled, follow this guide. This is a one time process.
See this page for more details about how the environment renders what you're typing.
Deploying the code to FileMaker
When you're finished developing the code, and when you like how it looks and operates, you will need to deploy the code to your FileMaker file.
I'm (Jeremy) am here to help you get started in this environment. Please reach out here if you'd like some support in getting this up and running.
Submit an issue
If you would like to make a change to the environment, please clone the source, make your changes, and make a pull request. I'll be happy to review and accept your changes.
Join the community
There's a great community working with this environment. The JS in FM Community is the place to discuss this environment and to ask for help. So join the community and be part of this ever-growing group.