Remix - full stack web framework

Remix is a modern full stack web framework focusing on web standards and mobile web UX. 
With Remix, you can build fast, slick, SEO friendly, and resilient user experience websites. In Remix, a component can contain client and server parts. Both parts work together. For example, a login component display login form (client part). When the form is submitted, the form data is sent to the server part to be processed and then return a result to the client part.

To get start with Remix, you have to install NPM (Package Manager for Node) on your machine.
In my Windows machine, i have Node v16.10.0 installed. You should have a code editor. Visual Studio Code is nice one.
To create remix-app project, run the following command:

npx create-remix@latest remix-app

Need to install the following packages:
create-remix@latest
Ok to proceed? (y) y
? What type of app do you want to create? Just the basics
? Where do you want to deploy? Choose Remix App Server if you're unsure; it's easy to change deployment
targets. Remix App Server
? TypeScript or JavaScript? JavaScript
? Do you want me to run `npm install`? Yes
⠹ Migrating template to JavaScript…Processing 5 files...
Spawning 3 workers...
Sending 2 files to free worker...
Sending 2 files to free worker...

Remix support both TypeScript and JavaScript. In this tutorial, we choose JavaScript. It is easy to add TypeScript files to the Remix project later.
After the remix-app project finished initialization, change to the remix-app folder and run the command below to start your first Remix website:

npm run dev


In the next page, you will learn to build a full stack website using Remix, Prisma, and Mysql database.

Comments

Post a Comment

Popular posts from this blog

Authentication: Register & Login Upload form data with file in Remix & Mysql

Image
 In the previous tutorial, you learnt to do use Prisma to synchronize models with MYSQL database schema and create a migration to add a new column to users table .  In this tutorial, you learn how to create authentication system in Remix. A visitor registers an user account using register form. In the register form, the user can upload an profile image and other information such as first name, last name, username, email, and password. Upon successful registration, the user account is saved in MYSQL database. The password is encrypted using bcryptjs . A registered user logins to the app by providing username and password. A successful login will create a session for that user. To access a restricted API, a user has to be authenticated. In a restricted component, the user id is read from the session. If there is a valid user id in the session, the user is allowed to access the restricted API. Otherwise, it will be redirected to the login page. Run the following command to insta...
Read more

Migration in Remix with Prisma & MYSQL

 In the previous tutorial, you learnt to style remix app and setup navbar using Tailwind CSS and Daisyui. In this tutorial, you learn to use Prisma to work with MYSQL database.  Prisma is a new generation Object Relational Mapping tool of Node for PostgreSQL, MYSQL, MongoDB, etc. It is easy to synchronize database schema with Prisma schema and vice versa. With Prisma client, you can perform crud operations against the database with ease.  To install Prisma in to the remix-app, execute the following command. npm install prisma Run npx prisma generate to generate the Prisma Client.  Update the remix-app/prisma/schema.prisma file to include users schema. Change the database credentials to connect to MYSQL database on your local machine. generator client { provider = "prisma-client-js" } datasource db { provider = "mysql" url = "mysql://username:password@localhost:3306/db_name?schema=public" } model users { id Int @ id @ d...
Read more