POS Laravel Inertia and React Fullstack Demo

SHARKZTECH — Thu, 08 Aug 2024 12:05:50 +0000

This video is the final version of a POS system I've developed with Laravel Inertia and React. You will see a live demo of the essential features of this system. Whether this is about the interoperability of Laravel and React or a desire to see a practical application of these technologies simply, this video provides an overall clear view. If this demo helps, don't forget to subscribe for many more project showcases and tutorials.

youtube.com

create vite@latest Vs npx create-react-app

SHARKZTECH — Wed, 15 Mar 2023 12:29:09 +0000

When starting a new React project, one of the first decisions you'll need to make is how to set up your development environment. There are several tools available to help you get started, but two popular options are npx create-react-app and npm create vite@latest. In this blog post, we'll explore the differences between these tools and help you decide which one is right for your project.

What is npx create-react-app?

npx create-react-app is a command-line interface (CLI) tool that sets up a new React project using the create-react-app package. This package provides a pre-configured environment with all the necessary dependencies to start building a React app, including a development server and optimized production build scripts. The focus of create-react-app is on simplicity, ease of use, and standardization, so it enforces a specific project structure and doesn't provide many configuration options.

Advantages of using create-react-app

It's ease of use. With just one command, you can set up a fully functional React project without having to worry about configuring webpack, Babel, or other tools. This can save you a lot of time and effort, especially if you're new to React or web development in general.
Standardization. Since many React projects use create-react-app, it can make it easier for developers to understand and contribute to your codebase. Additionally, the create-react-app team provides updates and security patches, so you can be confident that your project is using the latest and most secure dependencies.

Disadvantages of create-react-app

It enforces a specific project structure, it may not be the best option if you need more flexibility or customization.
It can be more difficult to customize the build process, since create-react-app abstracts away many of the underlying tools.

What is npm create vite@latest?

npm create vite@latest is a tool that sets up a new React project using the Vite bundler. Vite is a relatively new development server and build tool that aims to be fast and lightweight. Vite uses modern web standards such as ES modules and native browser features like import maps to provide a faster development experience than traditional bundlers like webpack. Vite also has a plugin system that allows for more customization of the build process.

Advantages of using Vite

Performance. Since Vite uses modern web standards and native browser features, it can provide a faster development experience than tools like create-react-app.
Vite's plugin system allows you to customize the build process more easily, which can be useful if you have specific requirements for your project.
Flexibility. Unlike create-react-app, Vite doesn't enforce a specific project structure, so you can organize your code however you like. This can be useful if you have a more complex project or want to use a different file structure than the one enforced by create-react-app.

Disadvantages of Vite

Since it's a relatively new tool, it may not be as widely adopted or supported as create-react-app. Additionally, since Vite is more flexible, it may require more configuration upfront to get started.

Which one should you choose?

Both npx create-react-app and npm create vite@latest have their own advantages and disadvantages, so the choice between them will depend on your specific needs and preferences.

If you're new to React or web development in general, or if you're looking for a simple and standardized environment, create-react-app is probably the best choice for you.On the other hand, if you want more control over the build process and need the latest web standards and performance optimizations, npm create vite@latest is a great option.

Hosting vite react app to github pages

SHARKZTECH — Sat, 28 Jan 2023 09:21:45 +0000

Hosting a Vite-powered React app on GitHub Pages is a great way to quickly and easily deploy your app to the web. Below is a guide of how to do that:
step 1: install "gh-pages"

npm i gh-pages or yarn install gh-pages

Github pages will help you automate the process of deployment
step 2: add the following in your 'package.json' to configure it to use "gh-pages" in deployment

...
  "scripts": {
...
    "build": "vite build",
    "predeploy": "npm run build",
    "deploy": "gh-pages -d dist",
...
  },
...

step 3:add base in "vite.config.js" with github repository name as the value within slashes

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  base:"/repository_name/",
  plugins: [react()],
})

step 4: run npn run build
step 5: run npm run deploy

Please note that, the above steps are for static hosting. If you have a dynamic web application then you need to look for other hosting options such as AWS Amplify, Firebase Hosting, Heroku, etc.

DEV Community: SHARKZTECH