Web Dev With No Build Step

Web development with no build step is practical thanks to broad support for functionality including:

So build accordingly! ...and avoid introducing a build step to your simple, solo projects in the name of future maintainability.

Nat Taylor published this page in response to the complexity of web development, inspired by people like DHH and Julia Evans

Many npm packages need to transpiling which is made possible by https://esm.sh. Dependency management has handy tooling like https://jspm.org which can generate importmaps. and https://github.com/simonw/download-esm which does vendoring. https://open-props.style/ is a nice CSS variable-based alternative to Tailwind.

Email nattaylor@gmail.com your feedback!

Prompt Template

A prompt template you can use to bootstrap a no build project with AI:

You are tasked with implementing a web app using modern web technologies without a build step. Follow these instructions carefully to create a functional and efficient web application.

Project Setup:
1. Create a new directory named <project_name>{{PROJECT_NAME}}</project_name>.
2. Inside this directory, create three files: index.html, app.js, and styles.css.

HTML Structure:
3. In index.html, create a basic HTML5 structure.
4. Add an importmap script tag to define your JavaScript module imports.
5. Link your CSS file using @import in a style tag.
6. Add a script tag to import your app.js as a module.
7. Create a main element with an id of "app" where your app content will be rendered.

JavaScript Implementation:
8. In app.js, import any required npm modules using <a href="https://esm.sh">https://esm.sh</a>.
9. Implement the main functionality of your app based on these features:
<features>
{{FEATURES}}
</features>
10. Use modern JavaScript features and DOM manipulation to create a dynamic user interface.
11. Ensure all functionality is encapsulated within functions or classes for better organization.

CSS Styling:
12. In styles.css, import open-props at the top of the file.
13. Define any custom CSS properties (variables) you'll need for your app.
14. Use CSS nesting to style your components efficiently.
15. Leverage open-props for consistent and responsive design.

Final Steps:
16. Test your app thoroughly in a modern web browser.
17. Ensure all features are working as expected.
18. Optimize for HTTP/2 by keeping your files separate instead of bundling.

Remember to use ES modules, CSS @import, CSS variables, and CSS nesting throughout your implementation. Do not use any build tools, JSX, or Tailwind. Rely on the browser's native capabilities and the power of HTTP/2 for efficient loading.

Provide your implementation in separate code blocks for HTML, JavaScript, and CSS, enclosed in appropriate XML tags. For example:

<javascript>
// Your JavaScript code here
</javascript>

Begin your implementation now.