We Keep Coding

Forking & modifying npm package. Src or Dist? What to do with dist?

I am working on a VueJS web app. One of the modules it uses is a wrapper for a javascript library installed through npm and packaged to integrate into vuejs. It does not quite fit our needs, we need to add some functionality to it, so I want to fork it and edit it.
The repo has two folders: src and dist.
As far as I understand, src is the actual src code while dist is a minified version for distribution. Questions:
If I want to edit it, how do I deal with the contents of /dist ? Do I delete it?
Do components installed through npm use the /src/ version or the /dist/ one?
If I delete /dist, work on the /src code, how do I recreate /dist based on the modified /src files?
Thank you.

Based on your questions, I would suggest you get a bit more familiar into your stack and how to actually build your appication.
Generally speaking the /dist folder contains automatically generated files, which may be uploaded to a webserver of your choice. Since you are using VueJS, you should be able to generate these files by running npm run build.
If I want to edit it, how do I deal with the contents of /dist ? Do I delete it?
As I already mentioned, these files are automatically generated by running npm run build. Therefore everytime you run this command, everything in /dist, will be automatically updated.
Do components installed through npm use the /src/ version or the /dist/ one?
Your working directory is always /src. Dependencies can be used like in any other application (this example uses Axios, which is a http client):
import axios from 'axios';
const httpClient = axios.create({ baseURL: 'https://api.something.com' });
httpClient.get(/* ... */);
If you are a beginner and are not 100% sure about how to use depencencies, I highly encourage you to read this article: An Absolute Beginner's Guide to Using npm
If I delete /dist, work on the /src code, how do I recreate /dist based on the modified /src files?
You do not have to delete anything in /dist. Simply running npm run build automatically will add the latest changes.
Please keep in mind that running npm run build is only relevant for your production environment. For your development environment you always want to use a dev server, which can be started with npm run serve.

Split a javascript Javascript project in multiple package using webpack ou npm

I'm trying to build an application that have to run on Windows(PC), Android and iOS.
For this, I will use Electron (for Windows) and React Native (for mobile plateforms). Both will be built with React and Redux. This way, I will be able to implement the logic in Redux reducers and middlewares and use them in both projects.
From now, I have done a POC for the Electron app using webpack. The reducers are currently directly in the app code. I want to extract the Redux relative code in a seperate package to allow me using it in a the React Native project.
I can make an npm package for my Redux module containing the reducers and the middlwares but this way, when I will compile my application, webpack will not compile my seperate package, it will use the precompiled version.
So What I want is to be able to make a separate package but still compile it at application compile time (because it is still in developpement and the dev is very closely related to main application dev).
Do I have to do it only with npm or with webpack as well ?
I'm pretty new to the Javascript dev stack.

I think you have different ways to handle that problem.
You can use NPM package. But in code of package, you will store not only original source code, but compiled code too. I mean before publish that package, you'll need to compile it in normal ES5 code.
I think you can use submodule system provided by Git. You should have separate repository with common code of your reducers. And in each project (Electron, RN, etc.), you will have a directory with git submodule. Webpack should compile code in that directory normally without any problems.
UPD:
About submodules you can read nice article here: https://git-scm.com/book/en/v2/Git-Tools-Submodules#Starting-with-Submodules
In few words, in project it will looks like:
cd yourProjectFolder
git submodule add https://github.com/TalAter/awesome-service-workers submoduleDirectoryName
It will clone repository to your project, and create .gitmodules file. Code from submodule will not exists in current project repository. In remote repository it will contain only link to submodule, but on your machine, you will have full code and you will be able to compile it.

Guidance on how to setup the basic “Components” example from the official EmberJS homepage

My background is in old-school web development and LAMP stack development mixed with Linux server administration. Meaning I can code HTML, PHP, CSS and JavsScript—as well as manage a Linux server—with ease. But have decided I need to be a bit “modern” as far as web client side technology goes and am teaching myself EmberJS on my Mac OS X 10.9.5 machine. Core versions are as follows:
Ember CLI version: 1.13.12
Node JS version: 4.2.2
NPM (Node Package Manager) version: 2.14.10
Watchman: 4.1.0
The basic “Auto-Updating Handlebars Templates” example on the official EmberJS site works, but I am lost on the “Components” example on the EmberJS homepage.
My process so far as been to init a new app like this:
ember new new-app
Then once that is done and the folder structure is built, I am simply creating new documents based on that “Components” example as follows; see screenshot for an example:
app/templates/components/gravatar-image.js
app/templates/application.hbs
app/templates/components/gravatar-image.hbs
Since I am new to EmberJS I am assuming this is the proper folder structure for this simple app example since templates/application.hbs is the only place I am seeing application.hbs installed and all of the paths on that simple homepage example are relative to some root, correct? But when I attempt to run it like this:
ember serve
It consistently fails with the following error:
version: 1.13.12
Livereload server on http://localhost:49152
Serving on http://localhost:4200/
EEXIST: file already exists, symlink '/path/to/new-app/tmp/template_compiler-input_base_path-97V11oKY.tmp/0/ember-sandbox/templates/components/gravatar-image.js' -> '/Applications/MAMP/htdocs/Ember-Sandbox/tmp/template_compiler-output_path-Tn5z8iTb.tmp/ember-sandbox/templates/components/gravatar-image.js'
Doing some basic online searches led me to believe it might require me to delete cached files and dependencies like this:
rm -rf node_modules tmp dist bower_components
And then reinstall them like this:
npm install && bower install
But even after that’s done, the same EEXIST: file already exists, symlink… pops up again.
What am I doing wrong? And what can I do to get this very basic example up and running?

The problem you have here is that you have placed the gravatar-image.js file in the templates/components folder and it should be in the components folder. Inside templates folder goes only *.hbs (templates is used for route templates and templates/components is used for component templates).
There is another way of structuring the folders called POD in which you have a folder with the name of the component and its files inside. With your component would be like this:
gravatar-image/component.js
gravatar-image/template.hbs
Check this tutorial if you are interested in using this POD structure.

How do I install Meteor Atmosphere packages locally so I can make modifications to it?

I am trying to get up and running with Meteor and seeing what it can offer, while I like it overall, it seems it's a very very rigid system.
I set up a small testing setup using Velocity, it opens a small overlay window on the side which has a class of "velocityOverlay". The overlay is really small and makes error stack traces wrap. All I wanted to do was to edit the css of the "velocityOverlay" and increase the width.
I somehow (after wasting time) managed to find that Meteor is actually putting all the packages in my user directory by default, once I found that, I found the needed css file...
velocity_html-reporter/.0.5.1.aykpxq++os+web.browser+web.cordova/web.browser/packages/velocity_html-reporter/lib/client-report.less.css
And I did a small edit to the width, next thing you know the meteor app crashes when trying to launch using the "meteor" command throwing a "Error: couldn't read entire resource" error. I can't even edit the bootstrap.css file I installed using "ian_bootstrap-3".
Further more, I can't find any way to install packages locally just for my particular project, what if I wanted to modify a package only for my particular project? this is very easy to do in vanilla Node.js, you simply don't use the "-g" when using "npm install".
To add to that, within my project root, there is another ".meteor/local/build/web.browser" folder with most of the global package files replicated again. When does Meteor use which? This is very confusing.

You can run a package locally very easily.
Download it from Github (for example) and put it in the packages/ directory of your application like this /packages/package_name.
Then add it to your application with the same meteor add package_name command as usual.
Meteor will automatically look in the local folder before anywhere else and compile the package with the rest of your code.
This allows you to do any modification you want on the package and test it locally before publishing it to the registry.
Also, folders located in .meteor/local/* are used for building purpose only and are generated automatically by Meteor. So it is not the best place to edit the files!

This worked for me https://atmospherejs.com/i/publishing. mrt link-package didn't work for me, might just be outdated code.

Steps:
Download (or clone) package from GitHub to local dir
Stop meteor if running
2.1. Make sure you have a packages folder: mkdir packages
Locally link your package:
3.1 If you have mrt installed: Run mrt link-package /path/to/package in a project dir
3.2 If you don't have mrt: ln -s /path/to/package packages/package
Then run meteor add developer:package-name, do not forget to change package name
Run meteor in a project dir
From now any changes in developer:package-name package folder will cause rebuilding of project app

Download the package and place it in new package directory in your project root.
open the package.js inside the downloaded package and remove the author's name in the property "name:"
e.g: - name:'dburles:google-maps' to name:'google-maps'
then run
meteor add google-maps

Ember-CLI rundown using it with Laravel or other backend frameworks

Using the ember-starter-kit all I had to do was throw the contents of it in the /my_laravel_app/public folder and everything was fine.
Now I am trying to create a project with laravel and ember-cli
I'm a little confused as to how I need to structure my application? In which laravel folder should I be running the ember new my-app command? Furthermore, how can I use apache for testing my ember-cli application instead of using ember server command since I need to test it with my laravel generated apis.
Any help is much appreciated!

Here is one way to do it
Go into your root laravel folder and run the ember new my_app_name
Then go into your my_app_name folder and create a new file build_custom.sh add the following lines to the file
ember build
cp dist/index.html ../app/views/ember.php
cp -r dist/assets ../public/assets
Explanation: the first line builds your ember-cli app and generates all the necessary files in the dist/ folder. The second line copies the index.html file generated to app/views/ folder and renames it ember.php so laravel can recognize it. The last line just copies all the assets into your laravel public folder
You can add the following in your app/routes.php file in laravel to serve your ember app. Make sure it's all the way at the bottom so your other api routes take preference
Route::get('{ember?}', function() {
return View::make('ember');
})->where('ember', '.*');
That should be it, everything should work as intended. Good luck.

Here is another way to do it:
You can create two separate folders: backend (laravel app) and frontend (ember app)
. Let's say, your laravel app is running under 192.168.10.10, you can then proxy your ember app ajax requests using ember-cli command: ember serve --proxy http://192.168.10.10. Using this proxy option, all commands will be passed to ip address, specified with --proxy option - in this case ip address, where laravel app is running (where api is listening).

If you getting UnrecognizedURLError: /ember try to remove welcome route on laravel...