Search for a command to run...
No comments yet. Be the first to comment.
Low-code platforms can be excellent for validating an idea. The risk begins when a temporary launch stack becomes permanent infrastructure for a growing product.
A practical, opinionated baseline for securing fresh Debian/Ubuntu VPS servers before deploying real apps.
How to enable HTTPS on localhost with Vite and mkcert
There are two kinds of developers: those who fear regex, and those who use it like a superpower. The funny part? It’s the same tool — the difference is perspective.Most people think of regex as the thing you use to validate emails, phone numbers, or ...
Why accessibility is everyone’s responsibility
Have you ever needed to prepare ASAP(as usual) a quick demonstration to be shown or just wanted to develop an idea that hit you out of the blue?
In this tutorial, we will be constructing a React application utilizing Vite as our primary development server. It would be the most minimal setup to create quick Proof Of Concepts ASAP.
Vite is a next-generation front-end build tool and development server, created by Evan You, the creator of Vue.js, that offers a fast and efficient development experience, is built on top of esbuild, a JavaScript bundler written in Go, which bundles dependencies 10 to 100 times faster than JavaScript-based bundlers. It doesn't require bundling the entire app or transpiling modules and code. In Vite, transpiling occurs on-demand, resulting in a significantly faster process compared to Create React App (CRA).
Our application will feature a simple yet interactive counter that can be both incremented and decremented through the use of dedicated buttons.
Before we get started, make sure you have Node.js and npm installed on your computer. You can download them from https://nodejs.org/en/download/.
First, we need to initialize a new npm package. Open your terminal and navigate to the directory where you want to create your project. Then run the following command:
npm init -y
This will create a new package.json file in your project directory with default values.
Next, we need to install Vite and the necessary React dependencies. Run the following command in your terminal:
npm install vite react react-dom
This will install Vite as a development dependency and React and React DOM as regular dependencies.
Now that we have our dependencies installed, we can create a new directory called src in the project root and create the following files inside it:
// App.jsx
import React from 'react';
import Counter from './Counter';
function App() {
return (
<div>
<h1>My React App</h1>
<Counter />
</div>
);
}
export default App;
// Counter.jsx
import React, { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
function handleIncrement() {
setCount(count + 1);
}
function handleDecrement() {
setCount(count - 1);
}
return (
<div>
<p>Count: {count}</p>
<button onClick={handleIncrement}>Increment</button>
<button onClick={handleDecrement}>Decrement</button>
</div>
);
}
export default Counter;
// main.jsx
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));
Finally, create a new file called index.html in the project root with the following contents:
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>My new POC</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>
This file will be used by Vite to serve our React app.
To start the development server, run the following command in your terminal:
vite
This will start the development server on http://127.0.0.1:5173/. You should be able to see your React app by navigating to that URL in your browser.
Additionally, you can specify the desired port for serving your app by using the --host flag.
vite --host 3003
I have encountered numerous situations where I don't want to create an app using CRA or Next just to experiment with a proof of concept, an example, or for demonstration purposes.
With this streamlined, minimal setup, I've successfully achieved my goals, and I wanna you to achieve them too.
I've also created a template that you can use for this purpose, which you can find at this link.
Also, if you find it useful Star this repository on GitHub!
Thank you for reading! Any constructive feedback is greatly appreciated!