I'm sorry for even posting this, but I don't know how to ask this question otherwise since I'm a total novice on JS/React/Node/Babel/JSX.
How can I convert the react templates from the front directory from this repo into the pure JS/HTML/CSS artifacts found in the public folder?
Is this the correct approach? I've tried running Babel transpiler on the page.jsx file but it didn't generate a file similar to public/script.min.js.
Or another way to put it, is how can I generate public/script.min.js from the assets found in the front directory?
On every repository, you should find a package.json file with script available to build your app. From what I can read in the respository package.json, launch "npm run build" in a command line with the respository as root. Make sure you have nodeJS installed on your computer to launch npm
Related
even if it seems a simple task I'm having some trouble finding a solution. I know that with Nest CLI I can use the command "nest build" in order to create a dist folder that contains the production files of my project.
The problem is when I move the folder on my Raspberry and i try to run the project with the command "node dist/main" following NestJs instructions. Nothing starts because node says that it cannot find #nestjs/core and other modules.
I did't find nothing clear in the official guide about deploying the app, so my question is: what do I need to move onto my rasperry in addition to dist folder? Do I need to reinstall all node_modules folder or it's possible to have a running project without have to reinstall 800Mb of modules?
Yes you need to run yarn or npm install on your production environment, as your dist folder only contains your own code.
Because unlike compiled language like Golang where all dependencies are bundled and compiled in you executable file, Javascript bundlers don't. Your bundled code in dist still contains require or import statement to get dependencies from node_modules.
You can also run npm prune --production to remove any developpement dependencies and thus reduce the size of your node_modules folder. (I believe that yarn does it by default.)
I have cloned the Angular2 quickstart repo and build a simple app. I want to publish it to the web now. It runs locally but it references files directly inside the node_modules directory.
Is there a standard build process I can run that will copy all needed files to the output directory? Or do I have to create this myself from scratch with a task runner or something?
This is my first time to answer a question so bear with me if I didnt do it correctly.
If "bundling all angular 2 ts/js and other dependencies (core.js, rxjs, zone.js) into one js and create a script tag on index.html to reference the bundled js" close to the standard build process you mentioned and you want, my answer is yes, you probably need to npm install some other tools to do it.
Since the angular 2 quickstart is using systemjs to do ES module loading, the tool you can use is called "systemjs builder" https://github.com/systemjs/builder which helps you to do bundling (based on systemjs.config.js) and yes, you can use a task tunner (grunt or gulp) with systemjs builder plugins (gulp-systemjs-builder or grunt-systemjs-builder) to create a task to "build".
You can use this https://github.com/AngularClass/angular2-webpack-starter
And using npm run build:dev or npm run build:prod
It will build a dist folder and that's all you need.
I'm completely new to frontend web dev with a very basic question. Once I npm install something, how do I actually use it? For example, I just did npm install bootstrap, and I would now like to be able to use the CSS and Javascript that it downloaded. I'm sure I shouldn't have to dig through the directories to find some entry point... so how do I now use bootstrap in my webpage?
Most modules on NPM are used in Node.js, for the server (backend). Node.js has a built-in function require('your-module') to make use of the module. This function is not present on the frontend in the browser. However, there are tools like browserify or webpack and probably others to make the NPM modules and the require function work in the frontend.
If you're just starting out I suggest you take a look at Bower first. With Bower (installed with NPM though) you can pull in all your frontend libraries like jQuery, Bootstrap, etc. to your project folder and you can point your script tags in your HTML to the bower_components/ directory, e.g. <script src="/bower_components/jquery/jquery.min.js"></script>. You can save a list of all libraries used with a version number in a json file called bower.json in the root of your project folder.
Based on this file you can pull in or update all the libraries listed with the use of the command line.
As a really general rule, npm is used for assets your node app will use on the server, while bower (and others) are the equivalent for dependencies that you want to use on the client.
That said, the use is basically the same.
npm (and bower) install the files into your project directory in a standard location. All you really have to do is make sure that location is accessible via a web request (typically, node_modules is not; which is why bower came about), and then embed link and script tags as appropriate in your html:
<script src='/node_modules/bootstrap/js/bootstrap.min.js'></script>
this is probably a silly question but am new to Meteor and struggling a bit. I want to build a stellar app that tweets when you get stellar. There is a nice Javascript API stellar-lib that works on node, but im unsure how to access the modules in Meteor...
I'm also building an app with Meteor and stellar-lib and have found two options:
1) You can manually copy over the built stellar-lib.js or stellar-lib-min.js from the build/ directory from either the github repo or the node_modules folder you installed it to when you ran the npm install command.
If you do this, you will have to copy the .js file to client/compatibility, otherwise stellar-lib will not work (note: this means you can only use Stellar on the client).
2) If you need it on the server, you can also have browserify wrap stellar-lib for you, then copy the output to lib/ in your Meteor app's root directory. I did this in my repo here with gulp.
Here's a short explanation to how 2) works:
.gulp is where I'll install my NPM modules where they will be ignored by the Meteor build environment (because the folder is hidden).
In deps.js, I require the modules I would want to use in my Meteor app as I would if I was using them in a traditional node.js app. package.json defines the modules I'll install with NPM and the gulpfile.js describes a build task that will resolve my require statements and output a single deps.js file that includes my dependencies to my Meteor app's lib/ folder.
I am currently working on Windows, and developing in Netbeans IDE. My project is a git repo, I do commits and push to a server for backup.
Now when I am done with a version, I want to have an automated system that will spit out a zipfile based on my instructions.
What does it need to do:
Minify all the JS and CSS files it finds in my source folder
Increment the version number in a Manifest.json file
Zip the source directory and store the file somewhere
Pretty basic stuff I think. I am free to all suggestions, whether its doing it with a batch script, netbeans, git, or maybe a whole other route all together.
http://gruntjs.com/ is a good automation tool.
From their web page:
you can use Grunt to automate just
about anything with a minimum of effort
Minify all the JS and CSS files it finds in my source folder
https://www.npmjs.org/package/grunt-contrib-uglify
https://www.npmjs.org/package/grunt-contrib-mincss
Increment the version number in a Manifest.json file
https://www.npmjs.org/package/grunt-version
Zip the source directory and store the file somewhere
https://www.npmjs.org/package/grunt-contrib-compress
Download and install nodejs from http://nodejs.org/ and install grunt and the packages:
cd /your/project
npm install grunt grunt-cli grunt-contrib-compress grunt-contrib-mincss grunt-contrib-uglify grunt-version
and I would also use https://www.npmjs.org/package/grunt-clean if you want to remove the minified files after you have zipped them.