This particular piece of information excited me to learn, but I was disappointed with the lack of clarity in the documentation on the newest version. He convinced me that Next was the way to go it solved many of my problems in React. I learned about Next from a buddy at coding meetups in Los Angeles. To preface, I’m a React lover through and through, and I’m not ashamed of that. ![]() That’s what I was going to do because, apparently, just learning Next.js in a week wasn’t enough for me. They stated that I didn’t need to create a database, but if I wanted to, I could use SQLite. I would need to build a basic API that returns hardcoded data for the products. The gist of the project was to create a mock e-commerce site with items and a cart. The whole file now looks like this: src/lib/server/db/index.For the last week or so, I’ve been learning Next.js 13 to complete a take-home assessment given to me by a potential employer. We don’t want to manually concatenate that input into the SQL-Query as this can lead to nasty SQL-Injection vulnerabilities. In our case, this is the limit amount we can now provide as a function parameter. This function also receives an object of the parameters we want to bind to the query. all function as we want to get multiple rows. The prepared statement can then be executed with the. I store the query in a variable and later call db.prepare with it. We start with the function getInitialTracks that just returns the first 50 tracks from the corresponding table. env file with the content DB_PATH=./data/chinook.db. Afterward, we can outsource the path to my database file in a. We can import Database from better-sqlite3 and use its constructor to start our database. I created another subfolder db with an index.ts. You can read more about the project structure in the docs. ![]() So any code in there is hidden from the eyes of the users. lib is the place to put your code that does not strictly belong to any route and can be imported with the $lib prefix.Īny code in the server subfolder cannot be imported in the frontend. Setting up the database #Īs the database file only sits on the server, we can create the main DB file in lib/server. We will query this table to display the first 50 tracks on our home page. The example database has a table called tracks. You can access the source code for this post on GitHub. Instead of setting up a schema with data myself, I used the chinook sample database that includes music data with tables like artists, albums, and tracks. I will use better-sqlite3 as the Node.js SQLite driver as I like its synchronous API. We can type our data shapes in the backend and later reuse them in the frontend to safely access the data in the UI and make our lives easier in case of type changes. I use SvelteKit in combination with TypeScript and highly recommend you do this as well. In our SvelteKit app approach, this is not the case, as only the SvelteKit backend is directly accessing the database. This approach can have big advantages if you have a high amount clients directly connecting to the database. Traditional relational client/server databases like MySQL or Postgres run in their own process and lead to the burden of having to maintain them. SQLite is serverless (not the new cloud buzzword) meaning that it runs within the same process from the consuming application. ![]() ![]() SQLite can be easily integrated into a SvelteKit application, allowing developers to easily store and retrieve data in a structured way, making it easy to build CRUD web applications. Together, SvelteKit and SQLite make a great combo because they both have a small footprint and are easy to set up and use. I am impressed by its simplicity and how fast you can achieve great results. As it now has a stable API I took a peek at how data-driven applications can be built with it. If you're looking for a more visual and interactive way to learn about the topic of this post, check out my YouTube video on the same subject.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |