Hello all, I need to build a website without any frontend framework. Before, I used to use cdn’s and link to js files. But now, as I started using npm libraries, I am unsure how to make that production ready? Do I need some kind of build script and libraries?
I saw that in Angular or React there are webpack, babel and all other needed libraries integrated through cli/ create-react-app for modularization and others. I was wondering if I want to build a modern website from scratch which libraries are needed for making it production ready (I need third party npm libraries, scss, jQuery, ES6 features)?
Some related article or learning concepts will be appreciated.
Thanks for your input. I actually wanted to know how SCSS, JS are maintained and deployed for production now without any framework’s abstraction. Which libraries I may need for maintenance and deployment.
Now I update the site the old fashion way by dragging new files etc into the server and restart Golang web server. But I am investigating how I can use Github in the future. Or at least a higher level of automation. I am using Webmin to manage files on a $5 VPS.
But, if you use npm libraries, I saw I need some scripts to run during development and a node_modules is created. But how that will be done on server? Again, if I want to bundle or support ES6 in browser, how will I ship those in server?
You don’t, you build it locally then deploy a finished version.
JS uses modules, so in theory you could just include libraries and import them, but browser support is poor so you normally bundle them. You install them (locally ), and also install a tool like Webpack which is designed to turn lots of JS files into one or more bundles.
Rollup has the same purpose:
To turn ES2015/16/17/18/19 code into ES5 code, a tool like Babel is used that converts the code.
SCSS needs a compiler installed, and that takes a load of SCSS files and converts them into a single CSS file.
This is old but is quite a nice breakdown of what the JS things are for:
Here’s a more recent one on setting up a project with Webpack: