5 ms·

I recently built a small side project in vanilla js for fun. I just didn't want to break out webpack and waste an hour getting it set up. I got pretty far, did

I recently built a small side project in vanilla js for fun. I just didn't want to break out webpack and waste an hour getting it set up. I got pretty far, did all the design. I wanted to run a client side simulation in javascript though, and found I needed to host a local server as chrome refused to read modules from a file due to CORS permissions (running chrome with the usual arguments didn't fix it). At this point, since I needed an outside piece of software to run things anyway, I figured I might as well switch to webpack dev-server and get the whole modern frontend ecosystem. I then quickly started replacing my home grown dom syncing with vuejs, and snowballed from there. I definitely learned a couple things, so time well spent, but I'm also going straight to webpack next time. I know it'll only take a few hours before I start hitting the limits of what vanilla js can do, and while reinventing the wheel was fun and educational, it didn't result in a better wheel.

draw_down 7y ago
That’s right!
Kwantuum 7y ago
Alternatively, you can use a simple web-server without needing all of webpack: using npx (included with npm): npx serve . using the php CLI: php -S localhost:5000 -t . You weren't hitting the limits of vanilla JS, you were hitting the limit of reading files directly from disk instead of through a web server.
- Dangeranger 7y ago
  This is a good point, the fact that browsers won’t load JS modules over the file:// protocol is not the fault of JavaScript.
- staz 7y ago
  or in python 2 (should be on installed by default on most distro): python -m SimpleHTTPServer or python3 : python -m http.server
  - sjf 7y ago
    Seriously, the poster is going to have to host their files somewhere eventually if they intend anyone else to ever see it. I can't believe they rewrote all their JS because they were forced to access over http:// http:// instead of file://. This seems nonsensical.
  - Kwantuum 7y ago
    Hey, never used python's http server, that's just as nice and easy as the two solutions I proposed, thanks for the tip!
- Jasp3r 7y ago
  A simple web-server only does that: serving a website. With a proper webpack setup, you get imports/exports, (node) module bundling, live reloading which all massively improve your development speed. However I wouldn't recommend anyone to build their own webpack config if you don't know exactly what you're doing. Just use parcel: https://parceljs.org/ https://parceljs.org/
- hombre_fatal 7y ago
  There's also Parcel: https://parceljs.org/ https://parceljs.org/ It does many things an advanced Webpack project does, but without any config. I use Parcel as long as possible and then switch to lower-level Webpack when I need more control. Easier way to start a new project.
onion2k 7y ago
If you want to spin up a project without doing config first then https://parceljs.org/ https://parceljs.org/ is a really good place to start. It does 95% of what most people use Webpack for, but with no config. It's also worth noting that if you just want a bundler (with no server or hot module reload stuff) then Webpack with no config usually works for most projects that aren't doing anything advanced.
5cott0 7y ago
Why is using webpack not considered “vanilla”?
- Dangeranger 7y ago
  Because the code you write is not what is loaded into the browser, it’s bundled and loaded in chunks.
  - 5cott0 7y ago
    I still don’t see how that’s not vanilla.js
    - TuringTest 7y ago
      Because webpack is not part of the language specification.
      - 5cott0 7y ago
        So I guess using VSCode isn’t vanilla either cause it’s not part of the language spec?
        __ryan__ 7y ago
        Epic point being made here. TypeScript is Vanilla JS as well because it outputs JS.
        5cott0 7y ago
        So now VSCode only writes TypeScript just like Webpack only bundles React?
        deleted 7y ago
        [deleted]
        uryga 7y ago
deleted 7y ago
[deleted]
k__ 7y ago
At least React doesn't require you to use packaging. Just require it via script tag and create your app. If you don't like the size, Preact is a good tiny alternative. If you want JSX like syntax, try htm or t7.
sergeykish 7y ago
I had similar question and found Web Server for Chrome https://chrome.google.com/webstore/detail/web-server-for-chrome/ofhbbkphhbklhfoeikjpcbhemlocgigb https://chrome.google.com/webstore/detail/web-server-for-chr... And it works

draw_down 7y ago

That’s right!

Kwantuum 7y ago

Alternatively, you can use a simple web-server without needing all of webpack: using npx (included with npm): npx serve . using the php CLI: php -S localhost:5000 -t . You weren't hitting the limits of vanilla JS, you were hitting the limit of reading files directly from disk instead of through a web server.

Dangeranger 7y ago
This is a good point, the fact that browsers won’t load JS modules over the file:// protocol is not the fault of JavaScript.
staz 7y ago
or in python 2 (should be on installed by default on most distro): python -m SimpleHTTPServer or python3 : python -m http.server
- sjf 7y ago
  Seriously, the poster is going to have to host their files somewhere eventually if they intend anyone else to ever see it. I can't believe they rewrote all their JS because they were forced to access over http:// http:// instead of file://. This seems nonsensical.
- Kwantuum 7y ago
  Hey, never used python's http server, that's just as nice and easy as the two solutions I proposed, thanks for the tip!
Jasp3r 7y ago
A simple web-server only does that: serving a website. With a proper webpack setup, you get imports/exports, (node) module bundling, live reloading which all massively improve your development speed. However I wouldn't recommend anyone to build their own webpack config if you don't know exactly what you're doing. Just use parcel: https://parceljs.org/ https://parceljs.org/
hombre_fatal 7y ago
There's also Parcel: https://parceljs.org/ https://parceljs.org/ It does many things an advanced Webpack project does, but without any config. I use Parcel as long as possible and then switch to lower-level Webpack when I need more control. Easier way to start a new project.

onion2k 7y ago

If you want to spin up a project without doing config first then https://parceljs.org/ https://parceljs.org/ is a really good place to start. It does 95% of what most people use Webpack for, but with no config. It's also worth noting that if you just want a bundler (with no server or hot module reload stuff) then Webpack with no config usually works for most projects that aren't doing anything advanced.

5cott0 7y ago

Why is using webpack not considered “vanilla”?

Dangeranger 7y ago
Because the code you write is not what is loaded into the browser, it’s bundled and loaded in chunks.
- 5cott0 7y ago
  I still don’t see how that’s not vanilla.js
  - TuringTest 7y ago
    Because webpack is not part of the language specification.
    - 5cott0 7y ago
      So I guess using VSCode isn’t vanilla either cause it’s not part of the language spec?
      - __ryan__ 7y ago
        Epic point being made here. TypeScript is Vanilla JS as well because it outputs JS.
        5cott0 7y ago
        So now VSCode only writes TypeScript just like Webpack only bundles React?
      - deleted 7y ago
        [deleted]
      - uryga 7y ago

deleted 7y ago

[deleted]

k__ 7y ago

At least React doesn't require you to use packaging. Just require it via script tag and create your app. If you don't like the size, Preact is a good tiny alternative. If you want JSX like syntax, try htm or t7.

sergeykish 7y ago

I had similar question and found Web Server for Chrome https://chrome.google.com/webstore/detail/web-server-for-chrome/ofhbbkphhbklhfoeikjpcbhemlocgigb https://chrome.google.com/webstore/detail/web-server-for-chr... And it works