Parcel is a popular bundler that provides a simple and efficient way to bundle JavaScript files. It's a great choice for small to medium-sized projects.
You can find tutorials online that cover the basics of Parcel and how to integrate it with APIs. Here's a brief overview:
- Initialize the project
npm init -y
- Install Parcel as a development dependency using npm:
npm install -D parcel
Create the following files in your project directory:
index.html
: the main HTML file for your prototypestyles.css
: the CSS file for styling your prototypeindex.js
: the JavaScript file for interacting with the API and updating the HTML
Your project structure should look like this:
Update your index.html file to include a container for the product data:
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Saori Clone Store Prototype</title>
<link type="text/css" rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Instead of this <div id="products"></div>
<script src="script.js"></script> -->
<main class="Main">
<include src="partials/header.html"></include>
<div id="app"></div>
</main>
</body>
</html>
Estilizar la Single Page
-
Estructurar la lógica de la API Rock Explorer index.js
-
Revisar en Inspect > Network que sea un array
Añadir los script para el entorno local Rock Explorer package.json
Now that I've added new changes and resources I need to see if it works with
npm run build
npm run start
To finish the process with the installation of Git Hub Pages
npm install gh -pages -D
After updates and testing
npm run deploy