Rebuild an already built React project - node.js

I have cloned a git repo regarding the swagger framework for API documentations. It is an already built project, ready to run.
However, I would like to effect some styling changes, hide certain elements and tweak with the default links and examples it provides. Indeed the changes have been easy, but by saving them and re-running the project as a web app they were not visible. It is my understanding that one has to rebuild a project in order for changes to come live. It is a React app, running on node.js, so I proceeded by following the script commands within package.json and rebuilt the project.
Still, although the changes have been saved within the dev files, they are not visible within the web app. Inspecting the DOM elements of interest confirms that no changes are in effect. My question is whether I can rebuild this project so that the changes will eventually become available, or if there is another way to achieve this.

Related

Adding React-Native to a React project

I currently have a React based website. I want to start on the process of converting the website to also work natively through react-native. I understand that I will need to re-build the UI for the native version.
My goal however is to leave both versions in the same node project so I dont have to update my non-view based code separately for both versions of the code base.
Is it possible to add the dependencies and files necessary for react native while not having to separate the native code out into it's own completely separate project and if so how?
Lerna is a tool that optimizes the workflow around managing multi-package repositories with git and npm.

What's the lightest way to automate .vue file compilation without webpack?

I'm working on a web application that currently uses vuejs for part of its interface. The back-end is NOT in Node, so there is currently no package.json file or any tool from the typical npm stack in this repository.
We already have a bunch of non-npm dependencies that need to be installed in order to use the repository, so my coworkers aren't too open about the idea of adding another layer of complexity. I can't blame them for that, it's the reason why I use npm scripts and not even gulp in my other projects. I'm tired of spending hours learning and configuring build tools that never end up doing what I want anyway.
But since the vue-cli tool no longer includes the build command, I'm a bit stuck. Is there really no more CLI app to build vue files at all? And if so, what would be the smart way to use vue without webpack? Template strings are not maintainable at all, and <script type="text/x-template"> don't work when you want to use multiple components from multiple files in the same page.
I realize your question says 'without webpack' but you may be interested in backpack - a CLI app i came across for building Vue.js without requiring you to write any configuration code. It is basically webpack preconfigured as a minimalistic build system for Node.js. It provides two commands, dev for live reload enabled development and build for building you project.

Node.js - How do I use modules from another project without copying code?

To be completely specific:
I am writing a Node.js app that is intended to be a websocket bot for Slack.
A Node project exists that abstracts the majority of the Slack API. (It is NOT an npm module.)
I'm not overly familiar with grunt, etc. but I can get the dependencies to install and utilize all this code by placing my own mybot.js in the root folder of this git clone and running node mybot.js with mybot.js being based on the files in the example folder.
Committing to my own repository, I don't want to commit any of the aforementioned project code -- it's not mine! I do, however, want it as a dependency. Unfortunately, this code by Slack is not an npm module that makes it easy to do. The project has a /bin folder and a /src folder full of coffee script, etc. that grunt builds to .js files.
The Slack project code has its own dependencies. In my way of thinking, those are sub-dependencies for me, or cascading dependencies. My project only depends on whatever the Slack project depends on.
I would like to be able to update my project with updates (manually, or via build) from the git repo of the Slack project as needed.
It seems there must be a way for me to include this project as a dependency, and once built, properly reference it's bin and src folder objects (bin/slack, src/message, client, channel, user, etc.) without committing it to my own repository. Especially great if it could be in a subfolder separate from my own model definitions. In a way, this seems no different to me than including jQuery in my website layout via a CDN. I'm only asking for the jQuery project and depending on my link flavor, I can get a specific version or the latest version, etc.
So, it turns out the comment by Ben pointing me to the npmjs.com slack-client npm module was the help I really needed. I just didn't really know how to ask the right question, I think.
And while I hate to look a gift horse in the mouth, a little more than a link, Ben, would've saved me another three hours, probably. Perhaps: "It is an npm module, not just a project from github." But thank you, even if it took me a while to decipher what you were saying.

Full stack asset pipeline for node, connect/express and broccoli

Firstly I must confess I am a noob at node. I've been using ASP.NET then PHP then Django before. Regardless, I've found node a breath of fresh air. This problem is also not strictly a node problem, but I need a node specific answer.
I have an express server and angular frontend. The server side templates are in swig and currently only serve for error pages and the index page. Mostly the angular templates will make up most of the front matter.
What I'm struggling with, if only only in deciding how to do it, is getting an efficient work flow for the asset pipeline. Server side templates must be able to inject the vanilla of assets during dev and testing. The same for client side templates during testing. Basically, running with express' static middleware should be an option without any configuration (maybe with some helper in server side assets). Thus git clone -> grunt -> viola.
However, during staging and production, I would like the server side files to stay vanilla. The template helpers may parse a manifest file indicating the cache busted links (CDN path maybe too). How to make the link from logical asset bundle name to production ready asset is a mystery for me, while keeping development transparent.
The client side templates may be minified, concatenated, injected or whatever, as it will be saved to some dist folder for uploading. It is important that the whole dependency tree (images, fonts, css, js) must be "exported" to the dist folder.
To deploy would then be: pushing the server side code to the server and running. And pushing client dist folder to some asset host (CDN, nginx, another node, maybe even connect static)
What my question(s) then actually is(are):
Is this workflow possible with tools such as broccoli/gulp/grunt alone?
I've tried connect-assets but I don't want to conform to some predetermined folder path. Also the cli tool didn't produce the other static assets. Perhaps I don't understand the tool.
Am I following the correct approach?
I've added to a discussion on broccoli concerning the manifest file consumption:
https://github.com/mjackson/broccoli-rev/issues/1#issuecomment-49076249
Edit: I forgot to mention that I use bower, so assets should be pulled from arbitrary (URLs too maybe) locations.
I think angular-fullstack is what you want. Even if you don't use it, it does almost all of what you're looking for.
The only thing that it might be missing for you is deployment. It has built in support for Heroku and OpenShift deployment. You could use something like grunt-ssh or grunt-deploy for other deployment scenarios.

Should node.js changes be instantaneous?

Seeing how node.js is ultimately javascript, shouldn't changes to any files be seen when trying to run the app command? I've forked the yuidocjs repo on github and am trying to work my way through my local build, but for some reason my minor changes do not get picked up. I'm new to node.js so I'm not really sure what the exact conventions are.
In node.js when you require a file the source code gets interpreted. It's considered good practice to require all code when you start the server so all the code gets interpreted once.
The code does not get re-interpreted whenever you run it though.
So changes are not instantaneous.
To help you out, try supervisor which does hot reloading of the server on code changes.
It is possible to make instant changes happen by re-interpreting source code but that is not the default action. Generally you should just re-start the server.
Also see nodemon which will automagically reload changed files under it's authority.
EDIT
Rereading your question, it appears you are asking about the following scenario:
Run app to test
Quit app to refactor js code
Restart app
And you're asking why your changes do not appear at step 3?
If this is the case, you are seeing something very strange which might be related to how and from where files are being required.
In node, run:
console.dir(require.paths);
To see where node is looking for any resources you are requiring. If there is a copy of the file you're changing in any of the paths listed which is not the file you're editing, this would explain your problem.

Resources