How to create a modern website maintained through npm?

JavaScript
1

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.

2

I tried Drupal, Wordpress and Angular, but ended up without framework. Just pure html, css and vanilla javascript. The “framework” used is just Golang. And a bunch of templates. A dummy site that had the goal of 100 in Google Speed.

http://94.237.25.207:7070

I do not know if this is an answer, but at least another brick.

3

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.

4

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.

5

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?

6

I am not familiar with npm and ES6, but as you can use the “terminal” to control the server, I assume that

sudo apt install XXX

will be one way to manage external libraries. You can use the built in Webmin “terminal” or any of your own preference. Just log in to the server via ssh and fire the script.

7

Take a look at the tutorial webpack for beginners. Webpack creates a production build that is minimized ect… that you can upload to the server.

8

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:

9

Thank you very much. This is the answer I was looking for.

The related articles are really good sources, especially Wes Bos’s one for starter.