Because Mixpanel Platform stores the source code for all your reports on GitHub, setting up a report for local development is easy. This will let you use your own code editor, webserver, and other code management tools.
The first thing you'll need to do is clone the repository from GitHub. Click the Open on GitHub button in the upper-right corner of the report editor:
Copy the repository URL from the HTTPS clone URL textbox, located in the right column of the repository page on GitHub, near the bottom:
Next you'll need to check out your report's source code. Open a terminal, navigate to the directory you want to store your report's source code in, and enter git clone followed by the URL you just copied:
$ cd ~
~ $ git clone https://github.com/mixpanel-platform/mixpanel-mixpanel-3-Jkj1owr.git
Cloning into 'mixpanel-mixpanel-3-Jkj1owr'...
remote: Counting objects: 3, done.
remote: Compressing objects: 100% (2/2), done.
remote: Total 3 (delta 0), reused 3 (delta 0), pack-reused 0
Unpacking objects: 100% (3/3), done.
Checking connectivity... done.
If you see this error, you need to install git. Take a look at the official git install page for more information. After that, check out GitHub's tutorial for setting up git to get code to and from GitHub.
~ $ git clone https://github.com/mixpanel-platform/mixpanel-mixpanel-3-Jkj1owr.git
-bash: git: command not found
Now that you have the source code checked out locally, you should run your report to make sure it's working. Enter the report's code directory, and you should see an index.html file:
~ $ cd mixpanel-mixpanel-3-Jkj1owr/
~/mixpanel-mixpanel-3-Jkj1owr $ ls
index.html
You need to run a local webserver from this directory to serve index.html to your browser. Python's SimpleHTTPServer is a good choice:
~/mixpanel-mixpanel-3-Jkj1owr $ python -m SimpleHTTPServer
Serving HTTP on 0.0.0.0 port 8000 ...
Now open up a browser and navigate to http://localhost:8000/index.html (note that the /index.html is required - without it your API queries will fail). Your report is now running locally!
But there's a problem - the report doesn't have your API secret so none of its API requests will work. The easiest way to give the report access to your secret is to pass it as a query parameter in the browser URL:
Alternatively, you can pass your API secret to the report through JavaScript as described in Specifying credentials for local development, but this isn't recommended because it risks publicly exposing your secret if you accidently check it in to your repository.
Now that your report is up and running locally, you should try making a change. Open the index.html file in a code editor of your choice, and add these lines to inspect the result of a query:
// lines truncated for brevity
if (eventName) {
MP.api.segment(eventName, propName, dateRange).done(function(results) {
eventGraph.MPChart('setData', results);
eventTable.MPTable('setData', results);
console.log('Query results:'); // <== add this line
console.log(results); // <== add this line
});
}
// lines truncated for brevity
If you chose "Blank slate" when you created your report, your index.html file will look more like this:
// lines truncated for brevity
<body class="mixpanel-platform-body">
<h1>Hello, World!</h1>
<script>
// Run queries and display results here
console.log('Hello, world!') // <== add this line
</script>
// lines truncated for brevity
Save the file, and go back to your terminal. You can verify the changes were applied by entering git diff:
~/mixpanel-mixpanel-3-Jkj1owr $ git diff
diff --git a/index.html b/index.html
index 709a040..e306eb5 100644
--- a/index.html
+++ b/index.html
@@ -35,6 +35,8 @@
MP.api.segment(eventName, propName, dateRange).done(function(results) {
eventGraph.MPChart('setData', results);
eventTable.MPTable('setData', results);
+ console.log('Query results:');
+ console.log(results);
});
}
};
})
Now you need to commit your changes. First, in order to tell git which changes should be part of the commit, stage them using git add:
~/mixpanel-mixpanel-3-Jkj1owr $ git add index.html
Next, commit the changes (-m "Add logging" tells git to use "Add logging" as the commit message, a description of the changes in the commit):
~/mixpanel-mixpanel-3-Jkj1owr $ git commit -m "Add logging"
[master f5bcdaf] Add logging
1 file changed, 2 insertions(+)
Finally, you need to push your new commit back to the repository on GitHub:
~/mixpanel-mixpanel-3-Jkj1owr $ git push
Counting objects: 5, done.
Delta compression using up to 8 threads.
Compressing objects: 100% (2/2), done.
Writing objects: 100% (3/3), 319 bytes | 0 bytes/s, done.
Total 3 (delta 1), reused 0 (delta 0)
To https://github.com/mixpanel-platform/mixpanel-mixpanel-3-Jkj1owr.git
b981e45..f5bcdaf master -> master
Let's verify that your code was successfully pushed to the repository. Open up (or refresh) your report's page on mixpanel.com, and select an event from the dropdown:
Open up the JavaScript console to see whether the report has output the logging information you added. You can do this by pressing a hotkey, which will vary by operating system and browser:
|
Chrome |
Firefox |
Safari |
| Windows, Linux |
Control + Shift + J |
Control + Shift + K |
Control + Shift + I |
| Mac OS X |
Command + Option + J |
Command + Option + K |
Command + Option + C |
If you're using Safari, you may need to activate the developer tools first. Go to Preferences -> Advanced (tab) and check the Show Develop menu in menu bar checkbox.
You should see a pane like this in your browser, which will display the data output by your report:
Congratulations! You're now completely set up to make changes to your report locally, and push them live to mixpanel.com.