Hashnode announced the Pangea Securathon on November 1st, and after spending a decent amount of time thinking about what I should build, I decided to build a Discord bot after taking inspiration from the suggested projects in the hackathon page! Here's everything about what I built and how I built it.

What's Disecure?

Disecure (Discord + secure) is a discord bot made by me for the Pangea Securathon. It's the only bot you will ever need to keep your server safe from malicious/suspicious links/files or any other thing. Disecure uses Pangea's powerful security services to provide the following features -

- Auto Redact - Automatically redacts messages that contain profanity/private information like emails, phone numbers, credit card numbers, etc.

- Auto URL Scan - Automatically scans URLs present in messages for malicious content and deletes it if a malicious URL is found.

- Auto File Scan - Automatically scans files uploaded to the server for malicious content and deletes it if a malicious file is found.

- Logging - Logs reports of malicious content found in messages, URLs, and files to a channel in the server for you to review.

Why did I build Disecure?

I've been an active Discord user since the last 3 years and the one thing that has always upset me about discord is the huge number of spams and scams that happen in the discord servers. People lose their accounts by clicking on some kind of suspicious link that doesn't appear to be suspicious! Not to mention the amount of malware that people accidentally download from the servers!

Pangea's security services are exactly what I needed to build something like Disecure which can scan files and messages and instantly delete the messages if any suspicious activity is found. Apart from this Disecure can also redact personal information which might get leaked accidentally in servers like your API keys, credit card numbers, phone numbers, emails or anything. Disecure scans each and every message sent in your servers to keep it safe and secure!

How did I build Disecure?

Disecure is built upon the Discord API using the Discord.py wrapper & Pangea's Python SDK. For logging messages I use a simple table from free tier of Supabase.

Firstly I created a discord bot account using the Developer Portal and got my Bot's client ID & client secret. The next step was creating a new account on Pangea and then I enabled the services I needed - Redact, File Scan, URL Intel and then I grabbed the respective tokens for each of the services. The last thing was creating a new Supabase project and then get the project URL and project Key both of which are needed to connect to your database.

Next, I created a new table named logger in the Supabase project using the following query in the SQL editor -

create table
  public.logger (
    id bigint generated by default as identity,
    created_at timestamp with time zone not null default now(),
    guild_id bigint not null,
    channel_id bigint null,
    constraint logger_pkey primary key (guild_id)
  ) tablespace pg_default;

Next, I started writing the actual code for the bot. You can look at this Basic bot example to get an idea of what a discord.py bot looks like. For this bot, we need to scan every message sent in the server. Discord.py has an in-built event handler named on_message that's triggered every time a new message is sent in your server. Here's what the code would look like -

@bot.event
async def on_message(message: discord.Message):
    # ignore the message if it's from the bot itself
    if message.author == bot.user:
        return

    print(message.content) # do something with the message content

Now, by using Pangea's python SDK we can check the message content and delete it if it contains something malicious or contains someone's personal information.

@bot.event
async def on_message(message: discord.Message):
        if message.author == bot.user:
            return

        for word in message.content.split(): # don't check urls as if have another check for it
            if url_regex.match(word):
                return

        response = redact.redact(message.content)

        # check if something was redacted from the text
        if response.status.lower() == "success" and response.result.count > 0:
            await message.delete() # instantly delete the message
            await message.channel.send(
                f"1 message redacted from {message.author.mention}, redacted message: {response.result.redacted_text}",
                delete_after=5,
            ) # warn the message author about it

I added the other utilities using the same method and the added a way for the bot to log about suspicious user activities in a separate channel for the server moderators/owner to review them and take action if needed against the user. Steps to add logging channel for your server are there in the Project README.

Viewing your Server's detailed reports

Since everything is done using Pangea, all of the cases and analytics regarding malicious activities in your server can be checked using Pangea's dashboard. Pangea has a very nice dashboard with graphs and all the analytics you need to check what's happening in your server!

Challenges I faced

To be honest, working with Pangea's SDK and APIs went very smoothly all thanks to their super nice Documentation! The only challenge I faced was learning to build a discord bot and integrating it with Pangea's SDK.

Usage

Disecure is not hosted anywhere as I don't have any VPS, the only way you can use it right now is by self hosting which is quite easy! Follow the Project's README for a detailed usage guide!

Resources

• Github Repository

• Pangea Cloud

• Hashnode

• Discord.py Docs

Ending note

I really loved working with Pangea to build this project. I would like to thank Hashnode and Pangea for providing me this opportunity to work on this amazing project.

Thanks a lot for reading!

Getting feedback from our users/customers is the most important thing we need to do if we want to grow our product and make it appealing to more people. But doing it isn't as easier as it looks. Providing a mail address for people to give feedback doesn't work most of the times and building a custom solution is time-consuming.

This is where Feedright comes in! Feedright lets you create embeddable widgets for all of your sites for people to provide feedback along with adding screenshots to provide more context. You also get a personal dashboard to view and manage all your widgets!

Inspiration

Being an indie hacker and solo developer, I have shipped a lot of projects but I rarely see people giving feedback on my projects. Making them open-sourced allows the users to use GitHub to provide feedback or issue a bug report but not everyone is on GitHub. This is why I felt the need to create a custom solution to fix this thing. Feedright allows people to get started with a working widget in a few seconds along with a nice dashboard.

Team Details

This app was solo developed by me -

• ashish - @_asheeshh

Features

Create widgets for every site

Feedright lets you create different widgets for each of your sites making it easier to manage the feedbacks you receive. Just log in with GitHub and you can start creating them.

Personal dashboard

Feedright provides you with a personal dashboard to let you create widgets as well as view all the feedback for them.

Easy-to-use widget

The widget is made keeping in mind the user experience. Just click on the widget icon and it will guide you till you submit your feedback!

Add screenshots with feedback

Your users can even attach a screenshot or any other image which provides more context to the feedback. The screenshots are viewable along with the feedback as well!

Tech Stack

Feedright was made using the following amazing pieces of tech -

• NextJS

• Tailwind CSS

• Appwrite

• Appwrite Cloud

• NextAuth

• Vercel

• GitHub

How did I use Appwrite?

The whole backend of Feedright depends upon Appwrite and it's amazing how Appwrite handles everything from storing data to storing images making it the perfect choice for Feedright.

Feedright uses the Database and Storage feature of Appwrite. All the widget and feedback data are stored in the Appwrite database. The screenshots provided by the users are stored in a bucket using Appwrite Storage.

I didn't use the Appwrite auth option as I'm not storing any user information apart from a unique id to store widgets thus letting them feel at ease while using the app that no unnecessary data is being stored by the app!

Walkthrough

• Head over to the app - Feedright

• Sign in the app using your GitHub account. (I'm planning to add Google OAuth as well soon)

• Click on the Your Dashboard button, it will take you to your dashboard.

• Now just follow this video to create your first widget 👇

  ]

• Just copy the embed script and paste it into your website's code to make the widget appear on your site.

Challenges

• Using Next.js v13 with Appwrite - This was a very challenging and rewarding experience for me as I got to learn a lot about Next.js v13 along with using Appwrite SDK with it. Thanks to the easy and well-written documentation both of them have made it quite easier for me to figure out things.

• Creating embeddable widgets - If I am honest, this was my very first time creating embeddable widgets purely using React. I spent days researching how to achieve this and was finally able to do this using Parcel to build the widget and then expose the file using the /public/ folder in Next.js.

Development

All the code for Feedright is open-sourced on GitHub in this repository. Instructions for running the app locally are given on the README file.

Important Links

• Live App

• Hashnode

• Appwrite Cloud

• Source Code

Conclusion

Thank you so much for reading the article, thanks to Hashnode and Appwrite for allowing me to work on this wonderful project, I hope that this app will have a positive impact on the developer ecosystem, looking forward to everyone's feedback ;)

As a developer, we often find ourselves struggling with understanding complex code blocks on different sites and resources and spend hours trying to debug and understand them. Reading code written by others is a cumbersome task but it doesn't have to be! What if I told you that there is an extension that can explain those code blocks to you in a matter of seconds?

Introducing Syntaxify, a powerful tool that can help you understand complex code blocks in a simple and easy-to-understand way. Syntaxify lets you select code blocks right from the site and then get its explanation in seconds using MindsDB's excellent NLP integrations with OpenAI.

This extension is especially useful for beginners who are just starting out with coding and need some extra help understanding complex concepts. It can also benefit experienced developers who want to save time and speed up their workflow.

Want to learn more about this tool and how it was made? Keep reading!

Creating the Extension

The extension was made by me from scratch and it was not at all an easy task. Being my first chrome extension, I had to go through a lot of resources and references to create it. The first step to creating this extension is to create an NLP model using MindsDB.

• Create a free account on MindsDB to get access to their cloud dashboard.

• Create your OpenAI model using the Editor, you can change the name of columns and model to whatever you want.

    CREATE MODEL code_explainer
    PREDICT explanation
    USING
        engine = 'openai',              
        prompt_template = 'provide a concise and easy to understand explanation of the given code block:{{block}}, make sure it can be easily understood even by beginners';
  

• Once you have created your model, It's time to integrate it with your extension, I made my backend using Flask (Python) and used the MindsDB Python SDK to connect with my MindsDB instance.

  We are using Flask to create the API. Firstly, we need to get the URL arguments that contain the code block and then we feed the code block data to our MindsDB model using the Python SDK which returns a DataFrame. The DataFrame contains our code explanation which we can return as response from the API.

    from flask import Flask, request
    import mindsdb_sdk as mdb
    import urllib.parse
    import dotenv

    app = Flask(__name__)

    dotenv.load_dotenv()

    EMAIL = dotenv.get_key(".env", "EMAIL")
    PASSWORD = dotenv.get_key(".env", "PSWD")


    def get_explanation(code: str) -> str:
        """Get explanation for a given code

        Args:
            code (str): code to get explanation for

        Returns:
            str: explanation for the given code
        """
        server = mdb.connect(login=EMAIL, password=PASSWORD)
        project = server.get_project("mindsdb")

        # replace double quotes with single quotes

        code = code.replace('"', "'")

        # // escape single quotes and double quotes and semicolons from code by adding \ before them

        escapedCode = code.replace("'", "\\'").replace('"', '\\"').replace(";", "\\;")

        q = project.query(
            f"""
            SELECT article, highlights
            FROM cex
            WHERE article = "{escapedCode}"
            USING max_tokens = 1000;
        """
        )

        df = q.fetch()
        result = df.iloc[0]["highlights"]
        print(result)
        return result


    @app.route("/")
    def explainer():
        print(EMAIL, PASSWORD)
        code = request.args.get("code")
        if code:
            decoded_code = urllib.parse.unquote(code)
            return get_explanation(decoded_code)

        return "No code provided"


    if __name__ == "__main__":
        app.run(debug=True)

• Once your backend is ready, you can start building the extension and connect your backend to it, Since the extension code is a bit complex, it would be unnecessary to include it here, but the source code can be seen here

Why & How Did I Use MindsDB?

I need two important things to build this tool - a database and an AI model. And MIndsDB is the perfect mix of both - a database with inbuilt AI-ML capabilities. Along with being able to run ML models right in your database, I could even use NLP through HuggingFace and OpenAI models and that was exactly what I needed.

The tool uses MindsDB to store all the generated explanations as well as provides the explanations using OpenAI's model! In the future, I would like to implement authentication in the app and MindsDB will be used to store user data as well! It's amazing how you can leverage MindsDB to replace most of the backend tools you might need to build an AI/ML app.

Usage

Here comes the most interesting part, you can use the extension right in your browser and it takes just a few steps.

• Clone the Syntaxify GitHub Repository locally using git CLI or downloading it as zip file.

• Inside the repository, you would see a dist folder. That's the extension that we need to load.

• Open Chrome, and then go to the Settings > Extensions and enable **Developer Mode**.

  

• Now click on Load Unpacked and then select the dist folder that we cloned in step 1.

  

• Your extension is loaded and ready to use now. Watch this video to learn how to use it!

Links

• Extension Repository - https://github.com/asrvd/syntaxify

• Backend Repository - https://github.com/asrvd/stx-backend

• MindsDB - https://mindsdb.com

Conclusion

In conclusion, Syntaxify is a game-changing tool that can make the life of developers easier by providing an easy-to-understand explanation of complex code blocks. It can help beginners learn to code faster and more efficiently while also benefiting experienced developers by saving them valuable time and effort. With this extension, you can improve your coding skills, become a more productive developer, and ultimately, create better software.

Thanks a lot Hashnode and MindsDB for giving me this amazing opportunity to work on this project. I learned a lot from this hackathon build.

This blog is all about my last one year of work and experiences that helped me become a full-stack web developer, become an active technical content writer with more than 50k blog reads, win hackathons and land freelance jobs in some well-known companies in tech.

How it all started?

Let's rewind back in time to January 2022. I was an 18-year-old student who was about to graduate from high school and I was really interested in web development and open-source. Back then, I used to look at web apps made by others and it used to fascinate me a lot. As you may already have guessed, I had already started learning about aspects of web development and was learning JavaScript and I used to make small projects using HTML, CSS and JavaScript and then I would add them to my GitHub account to learn about open-source development.

Soon, after I came to know about dynamic web apps and that's where web frameworks and libraries like React and Vue came in. I started learning about React soon after (around January end) from Scrimba and created my first React project which was a basic [truth or dare generator](https://github.com/asrvd/tod-app). And then there was no going back.

Learning Frontend and Content Writing

Once I got into React, my first aim was to master Frontend Development and also start writing blogs. As I kept on learning about new things, I started writing about them in my blogs which would also help me research the topic better and get a better understanding of it. Once I was confident enough with JSX, CSS Frameworks, and React Hooks, I started exploring more Frontend Frameworks and writing about them. Most of the time, I would make a simple app and add it as a tutorial section in my blog posts.

By this time, I had already made some nice projects using React, one of which was a [Terminal Styled Portfolio Website](https://github.com/asrvd/ashterm) which was my first ever project to cross 50+ stars on GitHub naturally. The next thing on my bucket list was mastering Next.js and becoming a full-stack web developer.

The Full-Stack Tag

Learning Next.js was one of the best decisions as it helped me get into full-stack development without getting into some complex setup. It also helped me get a better understanding of APIs and Databases. I also made some more cool projects like a lyrics API with frontend, a GitHub stats generator, An app to create polls and share them and a few others. While building and sharing the projects on GitHub, more people started finding my projects and my GitHub stars and followers increased a lot. I gained around 120 followers and more than 350 stars in the last 11 months on GitHub. Apart from that [my blogs](https://dev.to/asheeshh) also started performing well. By July 2022 I had already become a full-stack web developer and content writer.

Winning my first Hackathon

Hashnode launched the [Planetscale x Hashnode Hackathon](https://townhall.hashnode.com/planetscale-hackathon) in July and it was the perfect way for me to test my Web Dev skills! It took around 2 weeks to find a great idea which was basically an app to create widgets where you can add all your sponsor links. I spent the remaining 2 weeks building the app. Here is the [repository](https://github.com/asrvd/ponsor) for the app and it's live [here](https://ponsor.vercel.app). To be honest, I didn't even expect my project to win because there were literally hundreds of projects and most of them were from seasoned Web Developers.

But but but-I made it! My project was in the [top 5](https://townhall.hashnode.com/planetscale-x-hashnode-hackathon-winners) in the Hackathon and that was literally an unbelievable moment for me. Winning the first-ever hackathon I participated in was like a dream come true for me. And I still can't thank Hashnode enough for bringing out this amazing opportunity. This helped me get a lot more confident with my skills.

Landing freelance jobs in tech

By August 2022, I was confident enough to apply for freelance or part-time job positions in tech, most of which were for content writing positions. My first freelance position was at [Kinsta](https://kinsta.com) as a technical content writer. And the second was at [Scrimba](https://scrimba.com} as a technical content writer.

Getting these opportunities would never have been possible if I didn't start blogging. Blogging really played a major role in my tech career as a beginner.

Open Source

Open Source was the next big thing that helped me a lot in 2022. Being on GitHub and actively contributing to other Open-Source projects helped me a lot to get to know what production scale apps look like and how they are maintained. I also became a maintainer for the [create-t3-app](https://github.com/t3-oss/create-t3-app) project which is a CLI tool to scaffold a t3 app based on the [t3 stack](https://create.t3.gg).

Also, a big shoutout to [Anthony Campolo](https://twitter.com/ajcwebdev) for being my first-ever GitHub Sponsor, it motivated me a lot to keep working on Open Source projects.

Conclusion

Looking back at 2022, I think it has been one of the best years of my life and I was able to achieve a lot. Most of which was achieved just by working consistently. Believe me, when I say, you only need to work consistently to become a successful developer. YouTube Tutorials and Blogs are all good but there's no point in watching/reading them if you don't actually put the knowledge to practical use. Let others know that you actually know what you have learned. And to do that, you just need to do one thing - make more projects.

This blog wasn't meant to provide guidance or anything. I just wanted to share my experience of 2022 but maybe it would motivate some of you, I hope so! So, here's to yet another year of accomplishments and learnings, cheers!! 🥂

Blogging is no doubt one of the major ways of sharing knowledge, experience, and resources with the world. The tech community is also using and has been using blogging a lot to share things related to tech - be it a tutorial on a new JavaScript framework, a list of resources a developer can use, technical reviews of products, and even experiences of people who are related to tech like the current one you’re reading.

This blog is basically about how I decided to start blogging, why did I decide to start blogging, and finally how was I able to land a part time technical writing job with a very decent pay @Scrimba.

The Idea

Let’s go one year back in time and start from right there, I was a 18 year old student who had been programming since the last one year and then got interested in web development. I started learning about HTML, CSS, JavaScript, and then eventually about JavaScript frameworks. By the end of the year, I was somewhat of a frontend dev myself and I continued to learn more about new frameworks and tech related to web from blogs and videos.

But, while reading the blogs, I found that most of the those blogs could have been written by even me as I had enough knowledge about the tech related to it - enough to teach someone about it. Since high-school had ended, I had a lot of free time apart from just coding, thus I decided to start blogging.

Implementing the Idea

Blogging nowadays has been made a lot lot lot more easier than it used to be earlier. There are a lot of apps which let you create a blogging account where you can post your blogs and you get free SEO and views as it’s more of a community rather than being just an app where lakhs of people browse through the blogs posted on the app. If I were to name a few of them they would be HashNode, Dev.to, SubStack and even Medium. For me, I used to use Dev.to and HashNode myself for reading blogs and was aware of the SEO and reach they provided as I had seen a lot of Dev.to and HashNode blogs pop up on my google feed!

I decided to start with Dev.to. I wrote my very first technical blog on April 11th, 2022 which was about a web app which lets you copy paste pre built box shadows for CSS. I wrote a concise post about it but sadly it didn’t get much attention from the community which made me doubt whether I was doing it correctly. I took a break, read more blogs and found out that blogs that tend to be more engaging tend to get more attention from the community. Following that I wrote one more blog (not a blog but kind of a discussion) about which JavaScript frameworks others were using, and to my surprise it got more attention and quite a few people also commented talking about their frameworks. I wrote 4 more discussion related blogs in May 2022 and my blog engagement kept increasing until one of the blogs blew up with more than 16k views as of now with 374 reactions and 188 comments on Dev.to!

Till June 2022, I kept on writing more blogs covering different topics like list of resources for developers, some tutorials, and blogs about new tech like JavaScript frameworks. Since then, my engagement on articles has been steadily increasing and currently I have almost 800 followers on Dev.to which took me just 3 months to achieve!

How Blogging helped me

The first and the most important thing that I gained from blogging was more knowledge and the ability to do research on tech. Sometimes I would just sit and learn about something till I was confident enough to write about it in my blogs which eventually made me a better developer and a better writer. It was like hitting two birds with the same arrow.

The second thing that I learnt from blogging was optimism and taking criticism in a good way. It doesn’t matter how many followers I have as I’m still very new to content writing. So, often I would end up writing things that were inappropriate which would end up with others pointing them out which is obviously a good thing but some of them used to be too harsh or rude. At first, it used to make me sad but then eventually I learnt how to take those comments as feedbacks rather than taking them as insults and working on those “feedbacks” improved my writing a lot.

The third thing that I got by blogging was exposure in the tech community. A lot of my blogs were actually featured on some newsletters and posted on twitter which ended up with me getting to know a lot of like minded people. Though I’m not known enough on twitter as I don’t post regularly there.

The last but not the least thing that I gained by blogging regularly is getting a part time technical writing job. I’ll write about it in the next section as it’s going to be a bit longer.

Getting a part time job

By July 2022, I was somewhat confident in what I was writing after working on my articles based on the feedbacks. Soon, I learnt that technical writing can be monetized and can be turned into a paid opportunity. Being a student, it sometimes gets difficult for me to afford things I need, to continue working on things I love to as I don’t want to burden my parents with that. Thus I decided to monetize my articles.

Now I had two ways of monetizing them, first - find sponsors for my blog and write a bit about them in my blogs to get paid and the second - apply for a part time technical writing position. To be honest, the first one is more difficult as I’m still not famous enough to get good sponsors, so I decided to go with the second one.

The first technical writing job I applied for was from Kinsta and it was posted on Dev.to job listings so finding it wasn’t that hard. I mailed them about my Dev.to profile and samples of my writing and my tech stack. Surprisingly enough, I got accepted as a freelance writer for them with a decent pay per article for a beginner. My first article for Kinsta is still under review and would be posted soon hopefully. Then, around July end, Scrimba posted an announcement that they want freelance writers to write for them. I was very excited to apply for it as the benefits and payout were just amazing. I filled out the application form with my writing samples, article suggestions , GitHub profile, and my experience. I knew it wasn’t going to be easy to get this job as there were a lot of people applying for it.

But but but - I made it! I received a mail about their interest in my writings and that they wanted to work with me! I was overwhelmed and got on board in just a few days and started writing my first article - Create a new React app with Vite. It got posted on Scrimba and my Dev.to and HashNode profiles few days back and has been getting a lot of engagement and attention from the tech community. It even got featured on some newsletters and got a lot of twitter shout-outs.

What it took to get the job

As easy as getting a part time job in tech may sound in this blog, I would only say - “it’s not and it’s definitely not.”. Nothing can be achieved without you trying hard and working hard to achieve it. First of all, getting a paid opportunity is never all about getting paid, as a beginner your first priority should be getting the experience of working professionally, don't hesitate to take voluntary jobs as long as they help you gain something which would help you later with a paid opportunity.

Apart from thus there are a few things which are a must if you're trying to find a job in tech -

1. Know your stack - It doesn't matter what tech stack you use, make sure you are comfortable with each of them, comfortable enough to teach someone the basics of it.
2. Apply your knowledge - As long as you don't actually build something, there's literally no way for others to know that you're actually good with it. Make projects and showcase them.
3. GitHub is important - This is something which to be honest is not focused on much by beginners. But GitHub has played the most important role in helping me get a job. Not only does GitHub provide you a way to keep track of your projects, its the very proof that you actually know your tech stack.

These are the most important tips you should actually work on if you're serious about getting a job in tech. There are a few more which are quite important as well like having a resume or a LinkedIn account but in my case these were not needed at any stage of getting work as my GitHub account is the ultimate proof of my experience and tech stack.

Nevertheless, the most important part is to believe in yourself and what you are doing. Make long term goals and believe that you can achieve them. Short term goals always tend to be not completed due to things like procrastination and burn outs.

The Verdict

The one single thing that played the most important role in me landing a job for me was of course the fact that I decided to start blogging. Back then, if I hadn’t started blogging, I don’t think I would have known the tech related to web development so fast and gain all this work experience. I’m not saying that blogging is what you should do too to land a job, content writing is not everyone’s cup of tea. But there are a lot of other things which you can work on to get a job in tech. Just make sure you give your best in that.

I tried to keep the blog as concise and to the point as possible and I hope it would be helpful for people looking to get a job in tech. Thanks f

• You need an index.js, App.js, and App.css file
• You need to install react and react-dom
• You need a toolchain to use JSX
• You need a bundler to bundle all your .js, .css, etc. files into one easy-to-deploy file

This foundation is essential!

… But it’s also monotonous to set up for every project.

I’m sure you’d rather spend time on the features unique to your app and Vite can help!

Vite (pronounced “veet” and French for “quick” 👀) makes you more productive.

With one command and a few seconds, it can generate all the above boilerplate for you and more!

Additionally, Vite:

• Enables Hot Module Replacement (HMR), as seen in the animation below
• Makes it easy to deploy your website to the internet
• Helps you import and manage (potentially sensitive) environment variables
• Makes it easy to bolt-on technologies you need, for example, TypeScript

Needless to say this is something you need in your arsenal of developer tutorials!

In this tutorial, I will show you step by step:

• How to scaffold your React app with Vite
• How to enable HMR, as seen above
• You will learn how to deploy your app easily to Netlify

To wrap up this ✨ ultimate ✨ post, I’ll give a whistle-stop tour of some advanced Vite features.

What is the difference between Vite and Create React App?

If you've been around the React ecosystem for a minute, you will likely recognize Create React App (CRA), which, on the surface, sounds very similar to Vite.

Since CRA is made and maintained by React themselves, it's natural to wonder how these two tools compare.

CRA

Around seven years ago, React designed and released CRA to help newer developers adopt React more easily.

In particular, React acknowledged that to use JSX, you need some toolchain, and that made React's learning curve much steeper compared to, for example, Vue, where you don't need a build tool.

More experienced React developers use and appreciate CRA as well. Although, they sometimes need to use something else once their projects become more complex.

Vite

The web has fundamentally evolved in the 7 years since CRA was designed.

According to the Vite documentation, "as we build more and more ambitious applications, the amount of JavaScript we are dealing with is also increasing dramatically. It is not uncommon for large-scale projects to contain thousands of modules."

Because the dependencies to make a React app have become so large and interconnected, tools like CRA can sometimes take an unreasonably long wait (sometimes up to minutes!) to start up, and changes can take a couple of seconds to be reflected in the browser.

Vite points out, "The slow feedback loop can greatly affect developers' productivity and happiness."

In summary, React apps are becoming more complex, demanding more from our tools. Simultaneously, web browsers are evolving. For example, the latest browsers now support importing modules directly.

We can only benefit from these advancements if our tools are updated.

That is where Vite comes in.

Vite aims to leverage advancements in the ecosystem. Not only to make load times quicker but also to offer an instantaneous, almost magic-feeling developer experience as you saw in the HMR video above.

Unlike Create React App, Vite is not inherently coupled with React. You could use Vite with Vue, for example!

While you might not plan to use another frontend library any time soon, open source maintainers banding together across the ecosystem will benefit you as more features make their way to releases and bugs are squashed more quickly.

Getting Started With Vite

Alright, now you know all about Vite (and how it compares to CRA), let's get hands-on.

In this section, I encourage you to follow along as we install Vite and set up a React project in no time.

What do I need to know? To follow along, you will need to have npm installed. It would be good if you were already familiar with npm and command-line programs, but it's not a requirement!

How to run Vite

The official way to run Vite is using the npm create command. Open your terminal of choice, copy, then run the following command:

npm create vite@latest

Vite makes life easy by prompting you with questions.

First, Vite asks for your project name.

Then, Vite will want to know if you’re using React or another library (remember, Vite is not limited to React.)

Here, I called my project vite-app and chose react:

True to its name, Vite will quickly generate all the scaffolding for your project and some handy scripts to enable HMR.

Once the command has finished running, cd into your folder and run the following commands:

cd vite-app # Vite made a new folder named after your project
npm install
npm run dev

Since both npm create and npm install depend on your internet connection, they may take a minute or two to run.

Once everything is set up, look how quickly Vite served the app - just 5 seconds! That’s the magic of Vite.

Next, open localhost:5173 in your browser. You will see Vite's default template:

Of course you want to make some updates. Why not take advantage of HMR in the process?

What is HMR?

In the past, whenever you would make a change to your code - no matter how small - you would need to rebuild the entire app and refresh the page.

Rebuilding the entire app for one small change is slow.

Refreshing the browser isn't so bad, but you lose all the values in your variables (otherwise known as state) every time you do that.

Sometimes this is desirable, but it would be better if only the presentation parts changed when it comes to tweaking or iterating on your app (especially the style).

Enter HMR!

HMR intelligently rebuilds and reloads only the parts of your app that actually changed. It’s fast, and you keep your application state if you want.

HMR saves time you would otherwise spend waiting around or inputting data to recreate your application state. More than that, it reduces friction, allowing you to stay focused on your task and be more productive.

Test Vite HMR

Let’s take Vite’s built-in HMR for a spin.

1. Open src/App.js in your editor
2. Open localhost:5173 (ideally on the other side of your screen to observe the effect)
3. Increment the counter
4. Remove lines 10-17 from src/App.js (basically removing the two logos from the app)

If you opened your windows side by side, you should observe the following:

In my case, I increment the counter to 12 before removing the logos.

Usually, the page would reload, and the counter would be reduced to its default value of 0. HMR worked its magic behind the scenes to only change the part of the page that actually changed in the code.

Deploying your app to production

Vite makes it approachable to deploy your React website to Vercel, GitHub pages, or Netlify.

So approachable, I am encouraging you to follow along as we deploy the generated application to Netlify. When you make changes, updating the live website will be much easier then.

What do I need to know? To follow along, you will need: A GitHub account, Git installed locally, and fundamental knowledge of Git.

Start with Git

Nowadays, a practice called continuous deployment is common and encouraged.

In simple terms, when you push your code to the main branch on GitHub, services like Netlify detect this, download your updates, and update your live website. Vite can help accommodate this.

That might sound a bit mind-bending so I encourage you to try it for yourself. It’ll be much easier to understand when you see it all in action.

First up, create a GitHub repository and note the URL.

Next, run the following commands (making sure to replace with your repository URL!):

git init
git add .
git commit -m "Initial commit"
git branch -M main
git remote add origin <your_github_repository_url_goes_here>
git push -u origin main

Import project in Netlify

Great! You’ve made a GitHub repository and uploaded the code Vite generated there.

Next, we’ll let Netlify know about the GitHub repository.

If you haven’t already, this is a good time to make a free Netlify account.

Once you’ve logged in, click Add New Site, then Import Existing Project.

You will see the following page:

!netlify-1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/45vikqcn6d9rjbph7zgi.png)

Click GitHub.

GitHub will ask if you want to give Netlify permissions to see your repositories and download them. You can go ahead!

Once Netlify has permission to interact with your GitHub account, it will load and list all your repositories. Pick the repository you just created. As you may recall, mine is called vite-app:

Deploy your app

Once you select your repository, you’ll be prompted to set some settings. Vite knows what Netlify wants to see and make your life easy by adhering tot he defaults. That means you don’t have to change anything here. Just hit Deploy site:

Once deployed, you should see this page and the link to your website:

In our case, the link is resilient-gaufre-20030a.netlify.app:

When you next have some free time, poke around the Site Settings.

Here, you can change everything related to your site and even assign a custom domain name!

As you make changes to your code and push them to GitHub, Netlify should detect this and update the live site!

For more in-depth tutorials on deploying a Vite app to other hosting providers, you can visit Vite’s deploying a site section in its docs.

Advanced Vite

Vite is built on the shoulders of giants - namely, Rollup and EsBuild:

Understanding how Vite works under the hood at the high level lends way to some advanced features you can take advantage of.

Plugins

Vite can be extended using plugins based on Rollup's well-designed plugin interface with a few extra Vite-specific options.

This means that Vite users can rely on the mature ecosystem of Rollup plugins, while extending the dev server and SSR functionality as needed.

In short, plugins let you do more with your site app by providing integrations with other tools and adding additional features on top of Vite to make development easier.

Vite has a very in-depth guide about plugins in its docs. You can read it to get started with plugins.

Env Variables

Env Variables are the variables set outside the code itself but are very important for the code to run and can't be leaked along with your code base.

They can be a token from an API you are using, Auth token, Database passwords, or anything that you wouldn’t want anyone else looking at your code to discover. To set env variables, you create a .env file in the root of your application and then add your variables in the format TOKEN=secret_token, In most JavaScript applications you can access your env variables in code using the process.env object.

Vite uses the object import.meta.env to expose your env variables, by default the env variables are not exposed to the frontend to prevent token leaking. To expose your variables to your code, you can prefix the variable name with VITE_.

# This will not be exposed to the frontend
SECRET_TOKEN=i_should_not_be_exposed_to_the_client

# This will be exposed to the frontend
VITE_NORMAL_TOKEN=i_can_be_exposed_to_the_client

Now, to use these tokens in your code:

console.log(import.meta.env.SECRET_TOKEN)
console.log(import.meta.env.VITE_NORMAL_TOKEN)

There are some more concepts that you may need to know if you need more functionalities in your project like backend integration and server-side rendering but they are out of scope for this article.

The Verdict

According to npm, Vite is downloaded 1.4 million times a week, and that number is only going up! Perhaps now you’ve read this post, you can understand why!

In this post, we explored the fundamentals of Vite and how it compares to Create React App.

You got to experience first-hand how, when you start your project with Vite, it becomes somewhat straightforward to enable other productivity-boosting features like HMR, or even deploy your website to Netlify, for example.

Vite is easy because it hides a lot of the nitty-gritty details behind commands. Simultaneously, it’s still possible to drop down a level and take advantage of tried-and-true Rollup plugins. Looking back, it’s clear the Vite team observed developers in action to design and build a tool suitable for newer React developers and experts alike.