jspm config to load files outside baseURL - javascript

I'm developing a JS app http://myclibu.com which shares code between Node.js on the server and code in the Browser. And I'm migrating from using require.js to jspm.io for module loading in the Browser.
My ideal folder structure is
app -|- browser
|- server
|- shared
However so far I can't get config.paths in JSPM to work with files outside of the browser folder (outside of baseURL) which means I need to copy shared into browser to get files to load.
Is there any way I can use the folder structure as shown above? Note that I'm developing on Windows, in case that matters.

Related

Including source files in Cordova project from outside the project's directory hierarchy

tl;dr: I want to include some JavaScript files from another project in another directory into a Cordova project, without (manually) copying those files into my Cordova project directory tree. How?
I am editing an existing Cordova project that makes use of some JavaScript source files originally written for a large web application project.
Currently, I am adding these source files by copying them to a subdirectory of the Cordova project, and by adding a <script> tag with the relative path to an index.html file in the Cordova project. This causes the JavaScript files to integrated in the deployed app, apparently by virtue of Cordova's (or Ionic's?) magic.
Now, it would be preferrable for me to avoid copying the JavaScript files to my Cordova project directory. Instead, I would like to directly link to the files in their original location rather than copying them (so updates from the web application get automatically applied to the Cordova project, as well).
As both the Cordova project and the large web application reside in the same VCS repository, the relative path to the files will always be the same - for the sake of an example, like this:
|-repository/
|-web/
| |-src/
| |-myCode.js
|-cordova
|-src
|-index.html
|-helpers
|-myCode.js // copy of /repository/web/src/myCode.js
Therefore, I have tried setting the relative path in the aforementioned index.html file - but unfortunately, Cordova seems to take over that file verbatim, and thus, the resulting URL will not exist (prompting a 404 error in the console, and causing the code from the file to be unavailable).
How can I have Cordova include and reference files from outside the directory hierarchy of a Cordova project?
Is there maybe at least a way to have Ionic or Cordova automatically copy the files into the Cordova project directory upon building the app?

PDF Viewer for Ionic 2: cannot import or require

I am trying to build a PDF viewing component for an Ionic 2 app. I have lots of experience of Angular 2, but not of Ionic.
The component will be built using pdf.js and have created the pdf.js asset to be included in my project as described on the github page. However, trying to require this fails — require is not defined —, so I copied the script to the asset folder and tried importing it. It seems the file is not being copied to the build so that fails too.
Anyone have any pointers for requiring or importing a non-weboack non-SystemJS script into an Ionic 2 app?
Create a js folder (or something like this) in the www folder; include the files needed and reference them from there. This folder is not emptied on build.
EDIT
The root of the www folder does not change and you can reference it as someting like ... 'js/need-this.js'.
There should have some references in your index.html file to the build folder and maybe the assets folder (icon); this concept of using a js folder works the same. Only build and assets will change.
I feel that I should point out that you shouldn't copy anything into www since this is autogenerated and any changes will be overwritten. You should copy into assets instead.

How to debug secondary files of phantomjs in VSCode?

I'm using the phantomjs extension using https://github.com/iradul/vscode-phantomjs-debug, which is great for getting me into the main module but I can't debug into modules in the /modules directory.
The project is setup as:
\parent
--main.js
\parent\modules
--processing.js
processing.js is pulled into main.js in the usual manner with a require at the top of main.js
I'm sure there is a setting in the .vscode/launch.json that would get me into the processing.js file, I'm just not sure what it is.
processing.js is where I handle page.onXXX functions such as page.onError, page.onResourceRequested, and page.onResourceRecieved.
This isn't a typescript project - straight js.
Since Phantom's remote debugger is currently not resolving full paths of loaded modules VS debugger can only guess where they are. You'll have to place your modules inside node_modules directory. Also you'll have to put break-point inside your main module somewhere after require call for your modules.
Take a look at this for more info:
https://github.com/iradul/vscode-phantomjs-debug/wiki/Debug-modules

How to push a Yeoman app to a server

I am trying to push a project I created using the Yeoman's angular generator template to a server.
This is my project -
This is in my app folder -
This is the node-modules folder. For some reason, Yeoman has installed several node-modules. I am not using all of these.
The list goes on. This is just a small snippet of what's in the node-modules folder.
In order to push to the server, I am using grunt build. This generates a dist folder with the following content -
.
However when I navigate to my views, (e.g. reset-password), I get an error that this file is not available.
I am guessing this is because the dist folder doesn't have the views folder that the app folder does.
My final requirement is I want to push this project to the server, so that it is accessible to anyone. I don't want to push all the node-modules because I am not using them.
UPDATE -
This is the content in dist/scripts/ -
In the script.2a4ac124.js file, all my views are referenced but when I try to navigate to - file:///Users/proj/Documents/sso/dist/reset-password I get a file not found error, but when I navigate to file:///Users/proj/Documents/sso/dist/index.html#/ I see the index page.
installing node modules is normal - it installs development dependencies, which will be used in the grunt tasks that Yeoman creates. The reason there are so many is because the dev dependencies have their own dependencies that need to be resolved.
reset-password navigation error is most likely some build error, though it is difficult to tell just from the description. Yeoman converts the view files into angularJS templateCache and puts them into the concat/uglified js file (usually the app-.js file). First see if they are there. If they aren't, the view files aren't getting build. If they are there, it could be that the templates are incorrectly cached, or it could also be something else totally.
To deploy your application, simply copy the contents of dist folder to wherever you are deploying. You don't need the node_modules, since they are only used for performing dev. tasks.
Also,
Your screenshots show a SignUpCtrl.js file at the app root. Yeoman scaffoldings, whichever one you are using, usually aren't designed to have script files at the app root. Try putting it back inside the scripts file first.

Deployment Strategy for Require JS Optimized/Concatenated Website Files

My question is partly technical and partly about deployment strategies and workflow. I built a project using Require JS. It includes a number of distinct js modules, and is built upon Kirby CMS. The directory structure of the project is something like this:
project
assets
styles
style.css
js
scripts
script1.js
script2.js
script3.js
vendor
app.js
images
fonts
content
...
kirby folders
....
The file app.js is called in the footer of my site's page like so:
<script data-main="/assets/js/app" src="/assets/js/vendor/require.js"></script>
It configures RequireJS by calling the requirejs.config() function and then calls the main script file that loads everything else using RequireJS's requirejs() function.
I've used RequireJS' s optimization tool to compile the project in such a way that the optimized files are all dumpted into a directory called dist (a name I just picked up from this tutorial). So in the end dist contains a replication of every directory and file under assets, only optimized, and the file app.js is a concatenated and optimized version of all the js modules that I have in the project. So far so good.
What I am unsure about, however, is how I'm the supposed to make use of this new secondary version of all the code. What for instance if I want to deploy a version of the site to the production server without all the source js files? Each time I deploy the site, I would need to go through my code and in every place that I referred to files under the assets directory, I would need to replace that with dist. I deploy using git and beanstalk. One way to do this would be to manage different branches for staging, production, and development, in which the production and perhaps staging branches have references to the files under dist, but this seems awkward.
So my question is given this kind of optimization set up, which if you look at the tutorial linked above is one way to do this, how then do you manage the switch to the optmized version of everything seemlessly, without having to go back into your code and change everything up? Is there some key part of the process that I'm missing here?
Each time I deploy the site, I would need to go through my code and in every place that I referred to files under the assets directory, I would need to replace that with dist.
I've looked at the tutorial you've linked to and do not see how it is true for the tutorial. The tutorial does not use absolute paths, so should be deployable from dist just as well as from the directory that contains the pre-optimization sources. If you cannot do this for your application, that's because you've done something different from the tutorial. Your script tag, for instance, shows absolute paths.
So the solution is to design your application to avoid absolute paths. This way, you won't have to change paths when you deploy from dist. I'm using this very method to deploy optimized and non-optimized versions of one of my apps.

Categories