├── .gitignore ├── README.md ├── alpine-vite-plugin.js ├── alpine.png ├── bin └── index.js ├── index.css ├── index.html ├── index.js ├── init.js ├── package-lock.json ├── package.json ├── postcss.config.js ├── tailwind.config.js └── vite.config.js /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Create Alpine App 2 | 3 | Create an [Alpine](https://alpinejs.dev) and [Tailwind](https://tailwindcss.com) app in a single command with hot reload 🔥 4 | 5 | ```bash 6 | npx create-alpine-app my-app 7 | ``` 8 | 9 |  10 | 11 | The **Create Alpine App** package is similar to [Create React App](https://create-react-app.dev/), except it's for **Alpine**. 12 | 13 | ## Installation 14 | 15 | Install and get running with the following commands: 16 | 17 | ```bash 18 | npx create-alpine-app my-app 19 | cd my-app 20 | npm run dev 21 | ``` 22 | 23 | ## Usage 24 | 25 | Now, you can edit the `index.html` file in the root directory. Alpine is loaded in the `index.js`, and Tailwind is loaded in the `index.css` file. Hot Reloading Enabled 🔥 26 | 27 | ## Hot Reloading 28 | 29 | You can update the directory or file type that you want the watcher to look for inside of the **handleHotUpdate** method inside of **alpine-vite-plugin.js**. 30 | 31 | ## Building for production 32 | 33 | If you want to distribute this application, you can run: 34 | 35 | ``` 36 | npm run build 37 | ``` 38 | 39 | And your application will be built inside of the `/dist` folder. 40 | 41 | ## Contributing 42 | 43 | Pull requests are welcome. For major changes, please open an issue first 44 | to discuss what you would like to change. 45 | 46 | ## License 47 | 48 | [MIT](https://choosealicense.com/licenses/mit/) 49 | -------------------------------------------------------------------------------- /alpine-vite-plugin.js: -------------------------------------------------------------------------------- 1 | export default function AlpineVitePlugin() { 2 | return { 3 | name: 'alpine-vite-plugin', 4 | handleHotUpdate({ file, server }) { 5 | // hot reload for any file change 6 | server.ws.send({ 7 | type: 'full-reload', 8 | path: '*' 9 | }); 10 | }, 11 | } 12 | } -------------------------------------------------------------------------------- /alpine.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thedevdojo/create-alpine-app/552b45ae60a14bc9d656781d4c2a6e71f995ae87/alpine.png -------------------------------------------------------------------------------- /bin/index.js: -------------------------------------------------------------------------------- 1 | #! /usr/bin/env node 2 | 3 | const {execSync} = require('child_process'); 4 | 5 | const runCommand = command => { 6 | 7 | try { 8 | execSync (`${command}`, {stdio: 'inherit'}); 9 | } catch (e) { 10 | console.error (`Failed to execute ${command}`, e); 11 | return false; 12 | } 13 | 14 | return true; 15 | } 16 | 17 | const repoName = process.argv[2]; 18 | 19 | const gitCheckoutCommand = `git clone --depth 1 https://github.com/thedevdojo/create-alpine-app ${repoName}`; 20 | const installDepsCommand = `cd ${repoName} && npm install && node init.js`; 21 | 22 | console. log(`Cloning the repository with name ${repoName}`); 23 | const checkedOut = runCommand (gitCheckoutCommand); 24 | const installCmd = runCommand (installDepsCommand); 25 | 26 | if(!checkedOut) process.exit(1); 27 | 28 | console.log("Congratulations! You are ready. Follow the following commands to start"); 29 | console.log(`cd ${repoName} && npm run dev`); -------------------------------------------------------------------------------- /index.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 |
4 | 5 | 6 | 7 | 8 |Welcome to Create Alpine App. A simple starter application for your Alpine and TailwindCSS applications.
25 |
32 | Start a local dev server by running
33 | npm run dev
34 |
42 | Hot reloading is enabled by default 43 |
44 |
51 | Modify this page inside of
52 | index.html
53 |
To build your app, run npm run build
Need more functionality? Easily add some back-end magic by porting this app over to a Tall stack application.
64 |Give us a star on Github
67 |68 | Learn more → 69 |
70 |