React and Vue without npm and build

Published in

Frontend Weekly

3 min readDec 8, 2019

When you start to learn React or Vue or another new frontend framework you know these magic commands: npm install, npm build. Only after them, we deploy our ‘public’ directory.

But what if I say there is a way you don't need to build anything and just insert JS code into your HTML page. Many new frontend developers even don’t know that there is a way to use React and Vue without build step and npm.

What if we don’t need to build and even npm?

Don’t rush to hate me and write evil comments. I know that this is anti-pattern and we’ll not have unit tests, components imports, bundles and etc.

But why we need it?

This week we have a new issue from the business customer. The company has its own ERP/BPM system which is Redmine with many plugins and modifications. Systems run on old Centos 6 VPS server with some microservices that grab stats from machines. A customer wants some minor UI modifications, so we don’t have a budget and time to rewrite all microservices, compile new Rails and NPM to install webpack for old Rails. New Rails 6 have a webpack.

So, we decided to insert Vue or React just as JS import in the Rails template page.

Vue without npm

When using Vue without the build process you need to write a template for components in ‘different’ way. The template must be a string that after compiles on render.

Sample Vue code:

<html> 
<head> 
<script src=”https://unpkg.com/vue@2.6.10/dist/vue.js"></script> <title>Stranger Vue things</title> 
</head> 
<body> 
<div id=”vue-app”></div> 
<script type=”text/javascript”> 
const titleComponent = `<h1>{{ title }}</h1>`; 
var app = new Vue(
{ 
  el: ‘#vue-app’, 
  template: titleComponent, 
  data: function () { return { title: ‘Stranger Vue things’ }; } 
}); 
</script>
</body>
</html>

Browser download size: 371 Kb, time: 590 ms

You can even import Vue components from .vue files using https://github.com/FranckFreiburger/http-vue-loader.

React without npm

It’s a little complicated to do the same with React compared to Vue. For JSX support you need to import Babel. For DOM you need to import react-dom. So we need three imports compared to only one in Vue case.

Sample React code:

<html>
<head><title>React Stranger Things</title><script type=”application/javascript” src=”https://unpkg.com/react@16.0.0/umd/react.production.min.js"></script><script type=”application/javascript” src=”https://unpkg.com/react-dom@16.0.0/umd/react-dom.production.min.js"></script><script type=”application/javascript” src=”https://unpkg.com/babel-standalone@6.26.0/babel.js"></script></head>
<body>
<div id=”root”></div>
<script type=”text/babel”>const rootElement = document.getElementById(‘root’)class TitleComponent extends React.Component {render() {
 return (
  <h1> {this.props.title}</h1>
 );
 }
}function App(){
 return(
  <div>
  <TitleComponent title=”React Stranger Things”/>
  </div>
 )
}ReactDOM.render(
<App />,
  rootElement
)
</script></body></html>

Browser download size: 542Kb, time: 589 ms

In comparing with Vue we don’t need to wrap a component as a string. You just write the usual JSX code component.

What about Preact?

Preact — is a tiny React which only 3Kb in size and work without building too. In fact, when I got the issue when we’ll need to use some frontend without npm and build — I remember Preact. But when I just started to read the docs, I have understood that React ≠ Preact. And there is a huge problem.

To write in Preact without bundle you need to use htm. It’s a big difference compared to JSX.

Conclusions

We choose to use React to solve the issue with old Redmine and Rails. Just because we write JSX.

Using React or Vue without npm and build process is a huge pain and we don’t recommend to use this method if you have any other road. But we haven't…