Absolute path in requirejs - requirejs

I'm using requirejs with mustache templates like this
define(['text!templates/popups.html','text!templates/buildqueue.html','mustache'], function (popups,buildqueue,Mustache) {});
I have a folder stucture like this
script/templates/templates/popups.html
When I'm in production mode the folder structure is
prod/script/templates/templates/popups.html
I want the templates folder to be outside of the scriptfolder like.
/templates
/script
/prod/script
I can reference the path as text!../templates/templates/popups.html but as soon as I'm in prod mode the ../ is wrong.
How do I make a url to the templates folder that works when it is referenced to in script/ and prod/script ?

Related

Deploy VueJS App in a sub-directory or sub-path

I’m experiencing problems deploying a Vue JS app built using the Webpack CLi to work.
If uploaded in a root directory everything renders fine, but inside a subfolder, all the links break.
I want deploy VueJS App to this url :
https://event.domain.net/webinar
I have added publicPath in vue.config.js :
var path = require(‘path’)
module.exports = {
publicPath: ‘./’
}
But only the css and js folders point to the path /webinar.
For assets, fonts and others still point to the subdomain https://event.domain.net.
CSS and JS point to path /webinar
Asset, fonts still point to subdomain https://event.domain.net/
Console
use value of publicPath as /webinar that should work.
More details are here https://cli.vuejs.org/config/#publicpath
you can configure publicPath even based on environment.
Sagar Rabadiya pointed you to the right link:
create a file called vue.config.js in the project root (where your package.json is located).
prompt the following code snippet inside:
module.exports = {
publicPath: process.env.NODE_ENV === 'production'? '/your-sub-directory/' : '/'
}
and save the file.
Open a terminal and navigate to your project, then run npm run build to generate a production build from it.
As soon as the production build has been generated, copy the contents from it and paste it in the sub-directory you created in the root folder. For example, if you use Apache, the default root directory is the htdocs folder. I've also created a virtual host on the server, maybe you also need to do this.
Open the browser and type the address where your sub-directory lives. For example: http://your-server-url:your-port/your-sub-directory/ Your should see your app now.

NodeJS - Paths break after deployment

I deploy my NodeJS Projects with supervisord. Strangely most of the paths, which are paths
inside the served index.html: links to static files (stylesheets and js files)
inside javascript files, require statements to other files(e.g.: require('./scripts/'))
I believe the reason for that to be the command node "path/to/my/application/app" since it runs the application from a different directory.
How can i avoid changing the paths whenever i push a new version of my application to production?
Can you recommend any tools to solve this problem? Is there a clean way of setting the paths so that the application works so i can run it from anywhere(my local machine/my webspace)?
Use a relative path. For example if index.html is in a directory as same as a .js file referring it u can use ('./index.html'). If it were in a parent directory u could use (../index.html)

Why does require() not require an absolute path but an express.static() does?

I am trying to run my index.js script from outside the project directory. My project structure is as follows:
app
- config
- config.js
- public
- index.html
- src
- index.js
Now when I run my src/index.js from outside my app folder, require() is able to resolve the relative paths
const config = require(`../config/config`);
On the other hand express.static is not able to resolve such relative paths.
e.g. app.use(express.static("../public"));
Why do I need to use path.join and get the absolute path?
require() works off __dirname which is independent of what the current directory was when your app was loaded. It's always the directory where the module is located in, so it is consistent.
express.static() when used with relative paths uses the directory that the main app was launched form, so if you use relative paths, its behavior varies depending upon how you launch the app.
From the express doc for serving static files:
However, the path that you provide to the express.static function is
relative to the directory from where you launch your node process. If
you run the express app from another directory, it’s safer to use the
absolute path of the directory that you want to serve
So, if you want the directory to be module relative, you have to manually combine your path with __dirname to make a full path, as you have discovered.

Typescript using `__dirname` to reference local file

My file structure looks as follows:
root
src
test.ts
template.xlsx
dist
// compiled js source ...
In test.ts, I try to reference the spreadsheet template as follows:
path.join(__dirname, "template.xlsx");
But it is searching in path/to/root/dist instead of looking in path/to/root/src. What's the best way to access my file?
If you want to access to /src from /dist you could navigate there like this:
path.join(__dirname + "../src", "template.xlsx");

How can i get the path from where gulp was run?

I'm building a frontend workflow with gulp where i need to be able to build multiple separate designs but they need to share some common settings.
To clarify, i have a structure like this:
[Project root]
Templates
Designs
MyDesign1
Assets
js
.js
scss
.scss
gulpfile.js
MyDesign2
Assets
js
.js
scss
.scss
gulpfile.js
[More designs can be added later]
.eslintrc (Shared)
sftp-config.json (Shared)
I'd like to be able to call gulp in templates/designs/mydesign1 or templates/designs/mydesign2 and have acess to the data inside [Project root]/sftp-config.json and [Project root]/.eslintrc and any other file that might exist outside of the folder that gulp was run from.
Is that possible?
I found a solution to my problem, and it seems to work pretty well for my needs:
By using process.cwd() i can get the folder that gulp ran in, and then i can use path.resolve('../') to step back in my folders until i hit my project root folder.
var gulpRanInThisFolder = process.cwd();
var rootDir = path.resolve('../','../','../','../');
var designFolderName = pkg.name;
var sftpConfigPath = path.join(rootDir, '/sftp-config.json');

Resources