Tag Archive for: Node

Checking the versions of your packages in your Node app

/in /by

There is a package for everything in life ^^ Install npm-check-updates or use it directly with npx.

npx ncu

Best way to install Node.js and NPM

/in /by

Node.js strongly recommend using a Node version manager like n to install Node.js and npm. They do not recommend using a Node installer, since the Node installation process installs npm in a directory with local permissions and can cause permissions errors when you run npm packages globally.

Install n directly from Github:

curl -L https://bit.ly/n-install | bash

Then check your versions (remember than node comes with npm)

node --version && npm --version

Note: if you are already having problems, first remove everything related with Node.js and NPM

How to copy all your Node projects to your external drive?

/in /by

Use rsync and exclude node_modules:

rsync -rv --exclude=node_modules my_projects /media/my_name/Seagate\ Expansion\ Drive/

-rv stand for recurse into directories and increase verbosity (see more info while copying)

Best way to update Node

/in /by

Make things easy with package n.

n latest

React Setup

/in /by

How to deal with the React Setup fatigue? I have seen many tutorials out there, many of them complex and outdated, therefor I would like to bring you my best with a basic working setup.

First of all, I suppose that you know at least what is Node, NPM, React, Babel and Webpack, I know, I know, the headline is about React but we cannot use React as we use JavaScript directly in the browser, although React is JavaScript, it has extra things like JSX for example that can not be execute directly in the browser.

  • React is a JavaScript library to build user interfaces. It divides the code in components (button, dialog, etc) and keeps things update efficiently.
  • Babel is a compiler that makes compatible new JavaScript generations and extra things like JSX. So, as we said, because we cannot use directly React in the browser we need Babel to transform it into current JavaScript.
  • Webpack is a bundler that lets you organize your code. We can use it for many things but here we will use it for: connecting React with Babel, creating a development enviroment with an auto update server and creating an output file with everything ready for browsers.

Ok, that’s all, so, why do we need also Node and NPM? Everything is linked. You need to install them before continue with the setup.

  • NPM is a super power package manager that installs, publishes and manages node programs. We are going to install React, Babel and Webpack in our computer with NPM.
  • Node is JavaScript on the Server.

Don’t be panic, things look difficult when you don’t know anything about them at first, but as soon as we dive into them you will see that they are not (that much :P).

Setup

  1. Create a project folder (ex: reactapp), open it and create another folder for your app (ex: app), open it and create one more for React’s components (ex: components).
  2. Whitin the reactapp folder open a terminal/console and type:
    • npm init
  3. Leave all the npm init questions empty (we will come back later): click enter till you escape. This will create a package.json file about your app.
  4. Stay in the terminal and install(i) for your app(-S) react and react-dom:
    • npm i -S react react-dom
  5. Then, install for development(-D) babel:
    • npm i -D babel-core babel-loader babel-preset-react babel-preset-react-hmre
  6. To finish with the package installations install for development(-D) webpack:
    • npm i -D webpack webpack-dev-server html-webpack-plugin
  7. If you have any permission problem (EACCES) type sudo at the beggining of the command and if you need to change package.json permissions from root to your user use:
    • sudo chown user_name package.json
  8.  Now, create a file called .babelrc and write in it that we are going to use react presets:
    • { presets: [‘react’] }
  9. Open package.json and within “scripts”: {} write what we are going to use in production(build) and development(start) :
    • “build”: “webpack”,
    • “start”: “webpack-dev-server –progress –inline –hot”
  10. Finally, let’s configure webpack. Create a file called webpack.config.js and write in it:
const HTMLWebpackPlugin = require('html-webpack-plugin')
const HTMLWebpackPluginConfig = new HTMLWebpackPlugin({
  template: './app/index.html'
})

module.exports = {
  entry: './app/index.js',
  output: {
    filename: 'transformed.js',
    path: './build'
  },
  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader'
      }
    ]
  },
  plugins: [HTMLWebpackPluginConfig]
}

So far, we have set up our environment, let’s test it.

Test

  • In your components folder, create a file called App.js with a basic component (ex: a stateless functional component):
const React = require('react')

function App() {
  return <h1>Yuhuu, It is working</h1>
}

module.exports = App
  • Within your app folder create a basic index.hml with a container for your app:
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>React example</title>
</head>
<body>
  <div id="app"></div>
</body>
</html>
  • Create a basic index.js to render your React app:
const React = require('react')
const ReactDOM = require('react-dom')
const App = require('./components/App')

ReactDOM.render(
  <App />,
  document.getElementById('app')
)
  • Write in your terminal line (inside your project folder):
    • npm start
  • Open your browser at http://localhost:8080/

Welcome to React! Try to change our component and you will see how everything changes on the fly 🙂

  • For production use:
    • npm run build

Do you want to do it easy?

You have learned how to deal with React configuration from scratch. You spent a lot of time but not code for your app at all.

No configuration or complicated folder structures, just the files you need to build your app.

Create Apps with No Configuration: Welcome to Create React App!