Use Parcel to Bundle a Hyperapp App & Deploy to GitHub Pages

This tutorial demonstrates building a Hyperapp application locally, bundling it with Parcel, and deploying it to GitHub Pages. We'll create a to-do list app, leveraging ES6 modules, JSX, SCSS, and npm scripts for efficient workflow.

Key Concepts:

• Parcel: A zero-configuration module bundler simplifying the build process.
• GitHub Pages: A platform for easily hosting static websites.
• Hyperapp: A minimal JavaScript framework for building web apps.
• ES6 Modules & JSX: Modern JavaScript features handled automatically by Parcel.
• SCSS: Used for styling, also processed by Parcel.
• npm Scripts: Automate tasks like starting the server, building, and deploying.

Setting Up the Project:

1. Create a project directory (mkdir hyperlist and cd hyperlist).
2. Initialize npm (npm init).
3. Install Hyperapp (npm install --save hyperapp).
4. Create the necessary folder structure (mkdir -p src/js and src/scss).
5. Create the following files within the src/js directory: state.js, actions.js, view.js.
6. Create the following files within the src/scss directory: index.scss, _settings.scss.
7. Create index.html and index.js in the src directory.

Adding the Code:

The code for state.js, actions.js, and view.js will be similar to the example provided in the original article, utilizing ES6 modules (export default ...) to make the components accessible to index.js. The index.html file provides basic HTML structure, while index.js imports and initializes the Hyperapp application.

The _settings.scss file contains SCSS variables for fonts and colors, imported into index.scss, which defines the application's styles. Import index.scss into index.js to link the styles to the app.

Babel Configuration:

Install Babel and the JSX plugin (npm install --save babel-plugin-transform-react-jsx babel-preset-env). Create a .babelrc file with the following content:

<code class="language-json">{
  "plugins": [["transform-react-jsx", { "pragma": "h" }]]
}</code>

Parcel Integration:

Install Parcel (npm install --save parcel-bundler). Add the following npm scripts to your package.json:

<code class="language-json">{
  "plugins": [["transform-react-jsx", { "pragma": "h" }]]
}</code>

Run npm start to start the development server. Run npm run build to create the production build in the docs folder. Run npm run deploy to build and deploy to GitHub Pages.

GitHub Pages Deployment:

1. Create a GitHub repository.
2. Add a .gitignore file to exclude unnecessary files (node_modules, etc.).
3. Initialize Git (git init), add files (git add .), commit (git commit -m "Initial commit"), and push to GitHub (git push origin master).
4. In your GitHub repository settings, configure GitHub Pages to use the master branch and the docs folder.

Workflow Summary:

1. npm start: Start the development server.
2. Develop and test.
3. npm run build: Create the production build.
4. npm run deploy: Build, commit, and deploy to GitHub Pages.

This revised response provides a more concise and structured guide, focusing on the essential steps and incorporating the key improvements suggested. Remember to replace placeholders like <username></username> and <repo-name></repo-name> with your actual GitHub details. The detailed code for each file is omitted for brevity, but can be easily adapted from the original article's code examples.

The above is the detailed content of Use Parcel to Bundle a Hyperapp App & Deploy to GitHub Pages. For more information, please follow other related articles on the PHP Chinese website!