How to create a standalone AlpineJS project (using Parcel build tool)

Alpine.js is mostly used by Laravel Livewire. However if you want to build it as a standalone application like that of ReactJS /VueJS, then follow the steps provided in this post. Here, we use a build tool called Parcel which is very easy to use.

1.Create a New Project Folder
First, create a directory/folder for your project inside your C drive or wherever you like. Here the project is named as AlpineProjectUsingParcel . You can use the below command to create the folder in you command prompt or terminal:

mkdir AlpineProjectUsingParcel

2. Go inside the project folder
Navigate to the project folder
cd AlpineProjectUsingParcel

3. Initialize the project with npm
I use npm to install the alpinejs. However, you can use yarn as well. But before installing the alpinejs we need to run the below npm init command to generate the package.json
npm init -yThis will generate a package.json file with default configurations.

4. Install Alpinejs
npm install alpinejs

This will download alpinejs and it will be added inside your node module folder which is created automatically. So till now inside the project folder (AlpineProjectUsingParcel) you will see two files and one folder as:

C:\AlpineProjectUsingParcel>ls -1
node_modules
package-lock.json
package.json

5. Create the Project Structure
Inside the project create a folder called src and create two files index.html and index.js.

C:\AlpineProjectUsingParcel>mkdir src
C:\AlpineProjectUsingParcel>touch src/index.html src/index.js

The index.html will be used to write the html codes and the index.js will be used to write the javascript codes

6. Setup index.html file
Add the below code in your index.html file.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Standalone Alpine.js Project</title>
  </head>
  <body>
    <h1 class="text-center">Welcome to Alpine.js</h1>
    <h1 x-data="{ message: 'I ❤️ Alpine' }" x-text="message"></h1>
    <script src="./index.js" type="module"></script>
  </body>
</html>

7. Setup index.js file
Add the below code in your index.js file.

import Alpine from 'alpinejs';
window.Alpine = Alpine;
Alpine.start();

8. Install Parcel
Parcel is a zero-config build tool. It will automatically compile and bundle the JavaScript and other assets for us.
Note: Make sure you use node version >=18
Run the below command to install parcel
npm install --save-dev parcel

9. Run Development Server
Run the below command to start development server:
npx parcel src/index.html

Hit http://localhost:1234 in the browser. Now you will as in the browser as:

10. Build for production
To build for production run command as:
npx parcel build src/index.html
If it throws error as below, then remove the line "main": "index.js", from package.json

How to create a standalone AlpineJS project (using Parcel build tool)

Comments

Leave a Reply Cancel reply