# Setting up projects & SDKs for Sentry self-hosted

This blog is the 5th post in the Sentry self-hosted [series](https://theappsguy.dev/series/sentry). In this article, we will be going through the process of creating a project with Sentry to track and monitor performance and errors. This post will assume you already went over the previous posts in the series to set up Sentry.


## Creating a project

The first thing you need to do is create a project on sentry. To do that head to your Sentry self-hosted domain and click on the projects in the side menu:
![Screen Shot 2022-03-17 at 2.40.42 PM.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1647520846126/-

Next, create a project using the button at the top right:
![Screen Shot 2022-03-17 at 2.41.15 PM.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1647520879478/NympGtzmr.png)

Choose the needed SDK from the list of platforms

![Screen Shot 2022-03-17 at 2.42.34 PM.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1647520960001/As8yE70N0.png)

Add a project name and select the team (you can also create a new team)
![Screen Shot 2022-03-17 at 2.43.13 PM.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1647521000444/tlGDh52CO.png)

Click on create project.

After creating, it will redirect you to a setup page where they have a tutorial on how to set it up. Follow the instructions and you should be good to go

I will setup Vue.js as an example, others should be similar (but platform specific):

# Example Vue Configuration

## Installing dependency

```
# Using yarn
yarn add @sentry/vue @sentry/tracing

# Using npm
npm install --save @sentry/vue @sentry/tracing
```

## Configuration


### For Vue 2
```
import Vue from "vue";
import Router from "vue-router";
import * as Sentry from "@sentry/vue";
import { BrowserTracing } from "@sentry/tracing";

Vue.use(Router);

const router = new Router({
  // ...
});

Sentry.init({
  Vue,
  dsn: "dsn_to_your_instance",
  integrations: [
    new BrowserTracing({
      routingInstrumentation: Sentry.vueRouterInstrumentation(router),
      tracingOrigins: ["localhost", "my-site-url.com", /^\//],
    }),
  ],
  // Set tracesSampleRate to 1.0 to capture 100%
  // of transactions for performance monitoring.
  // We recommend adjusting this value in production
  tracesSampleRate: 1.0,
});

// ...

new Vue({
  router,
  render: h => h(App),
}).$mount("#app");


```

### For  Vue 3
```
import { createApp } from "vue";
import { createRouter } from "vue-router";
import * as Sentry from "@sentry/vue";
import { BrowserTracing } from "@sentry/tracing";

const app = createApp({
  // ...
});
const router = createRouter({
  // ...
});

Sentry.init({
  app,
  dsn: "dsn_to_your_instance",
  integrations: [
    new BrowserTracing({
      routingInstrumentation: Sentry.vueRouterInstrumentation(router),
      tracingOrigins: ["localhost", "my-site-url.com", /^\//],
    }),
  ],
  // Set tracesSampleRate to 1.0 to capture 100%
  // of transactions for performance monitoring.
  // We recommend adjusting this value in production
  tracesSampleRate: 1.0,
});

app.use(router);
app.mount("#app");
```
A few things to note that must be changed:
1. **dsn**: can be found in the project settings
2. **tracingOrigins**: the URLs you will be reporting from
3. **tracesSampleRate**: For development purposes you can keep it at 1.0. For production it is better to decrease this to 0.1 (meaning 10% of your user's will report performance analytics)

After changing the above fields, your Sentry SDK should start sending usage analytics back to your Sentry self-hosted instance. (it might take a few mins for data to start appearing).

As usual, if you have any questions don't hesitate to DM me or ask it in the comments.

Good Luck!