No Comments Yet
Be the first to share your thoughts and start the conversation.
Syncfusion Setup
Loading...
Loading...
Loading...
0 Comments
Be the first to share your thoughts and start the conversation.
How did you manage to remove the blur property and reach here?
Upgrading gives you access to quizzes so you can test your knowledge, track progress, and improve your skills.
By logging in, you'll unlock full access to this and other free tutorials on JSM Pro.
Why? Logging in lets us personalize your learning experience, track your progress, and keep you in the loop with new workshops, coding tips, and platform updates.
You'll also be the first to know about upcoming launches, events, and exclusive discounts.
No spam—just helpful content to level up your skills.
If that sounds fair, go ahead and log in to continue →
Enter your name and email to get instant access
In this lesson, we cover the steps necessary to set up Syncfusion for building a travel agency dashboard using React. The tutorial emphasizes the importance of committing code to GitHub for each lesson in the series, ensuring that viewers can follow along seamlessly. It guides through the installation process of Syncfusion components and the registration of a license for free access to its features.
00:00:02 Just before we go ahead and start setting up Syncfusion, I want to make sure to push our code to GitHub.
00:00:07 This will be super useful to those watching directly on JS Mastery Pro because every lesson will have its commit attached to it.
00:00:13 But even if you're watching on YouTube, follow along and commit to your GitHub as well.
00:00:18 I'll open up the terminal, run git init, git add dot, git commit dash m, app setup.
00:00:26 This will add all the changes we have implemented so far.
00:00:29 Then, head over to github.com forward slash new and create a new travel agency dashboard.
00:00:38 I'll keep it as public and click create.
00:00:41 Once you do that, you'll have to switch over to the main branch so git-branch-mmain git-remote-add-origin and finally git-push-u-origin-master or in this
00:00:56 case main if you do that in a couple of seconds if you reload You'll be able to see all of the files committed right here.
00:01:05 What I typically like to do is remove these releases, packages, and deployments and give a short description, such as a travel agency dashboard.
00:01:17 We can add the URL later on.
00:01:19 For now, I'll add some kind of a placeholder.
00:01:22 And I will also say that the topic is React.
00:01:25 React router v7.
00:01:28 And what else?
00:01:30 Well, yeah, it's a dashboard, right?
00:01:31 So we can say dashboard.
00:01:33 And already, our repo is looking much better.
00:01:36 So with that said, let's set up Syncfusion.
00:01:38 First things first, I want to tell you that it is completely free, okay?
00:01:43 So, click the link down in the description.
00:01:46 And within the video kit, I'll also leave a link to the documentation where you can see all of the different components that you can use.
00:01:52 For example, charts.
00:01:54 Here, you have the Getting Started guide on how you can use charts.
00:01:57 And you can notice that the Syncfusion components have been split into multiple different dependencies, such as base, data,
00:02:05 charts, PDF export, and so on.
00:02:07 so we'll need to install these different packages separately.
00:02:11 So, head over into your application, within the terminal, and here we'll need to install all of these different packages.
00:02:18 Just so you don't have to type them all one by one, you can find them right here under MPM install Syncfusion, where you can just copy it,
00:02:25 and then you'll have the full installation command.
00:02:28 Super simple, right?
00:02:30 Press Enter, and this will install all of these different components, allowing us to implement enterprise-ready dashboards for free.
00:02:37 There we go.
00:02:38 That was quick.
00:02:39 Now, we'll have to update the VeedConfig file.
00:02:42 So head over to VeedConfig.ts, and here we'll need to prevent the list of dependencies from being used for SSR, allowing us to use Syncfusion components
00:02:52 without any issues.
00:02:54 So I'll say SSR, no external, and here we can just use a regular expression to target at Syncfusion.
00:03:02 Perfect.
00:03:03 Now, if you click Set up Syncfusion link down in the description, you should be able to see a page that looks like this.
00:03:10 Here, you can sign up completely for free.
00:03:12 I'll use Google.
00:03:13 Here, at the second step, if you used a personal email to create your account, you'll also need to add a work email, which they need for compliancy.
00:03:23 But don't worry, what you can do is just type support at jsmastery.pro.
00:03:29 You can use this as the company email.
00:03:32 That way, you can proceed to the next step.
00:03:34 For the company, you can also type JS Mastery, you can enter your phone number, and create an account.
00:03:41 Once you do that, you'll be redirected to your Syncfusions dashboard.
00:03:44 Here, it says, start your free trial for the Essential Studio.
00:03:48 This will offer you a ton of stuff.
00:03:51 But don't worry, this doesn't mean that you'll only be able to use your components for 30 days.
00:03:56 What you need to do instead is head over to the bottom right part and click Get Your License.
00:04:01 Here, you'll be redirected to different types of licenses that exist, such as Team, Unlimited, but what we're going to go for is the Community.
00:04:10 This allows you to get access to the entire product line for free, if you're making less than a million dollars, of course.
00:04:16 or have five or fewer developers in your team.
00:04:18 So click Claim Your Free License and fill in some details.
00:04:23 You can say individual, student or hobbyist.
00:04:27 For the organization name, feel free to type in JS Mastery.
00:04:31 I don't believe these are necessary, but you might want to save whether you want to use this as open source, in which case you can also provide a repo.
00:04:38 And then you can finally provide a LinkedIn profile and say who is going to be owning the code.
00:04:44 Of course, that is yourself.
00:04:46 So submit it, and this request can take some time.
00:04:50 But what matters the most for us is that already we got an email containing the seven-day free trial that'll include the access to React components.
00:04:58 So if you head over there and scroll down, you'll be able to find your license key, which you can copy.
00:05:04 Or you can also get it right here within your dashboard by specifying that you'll use JavaScript and type JSM travel agency and get a license key right
00:05:15 here as well.
00:05:16 Perfect.
00:05:18 Once you do that, you can head back over into your code, create a new file called .env.local, and within it, you can say Vite Syncfusion License Key,
00:05:32 and paste the key that you just got.
00:05:34 Then, you'll need to head over into App, root.tsx, and right at the top, above the layout, you can import the register license coming from Syncfusion EJ2 base.
00:05:50 And then you can call it register license.
00:05:53 And you want to get access to that ENV variable by saying import meta ENV Vite Syncfusion license key.
00:06:03 And that's it.
00:06:05 We have successfully registered and we can use Syncfusion's enterprise-ready components.
