Hosting a bundle of scripts inside of NuxtJS - javascript

I'm a Systems Admin with limited-to-moderate programming experience. I got roped into creating a front-end app for work using Nuxt and Apache (Apache and SSR is a requirement). One of the other requirements in that I need to host this folder of JS scripts at /login. The scripts have nothing to do with Nuxt itself. I just need to host them as static assets for Apache to work with.
I've tried putting the folder within the static directory, but that didn't do anything. I've also tried messing around with webpack and vue-loader to no avail. Right now I have a temporary fix where I have Apache serving the login folder along with a redirect to the NodeJS server. However, I feel like this is messy.
Has anyone else dealt with this?

Related

Is it possible to get pages from remote file system with next.js

Hi I am quite new to advance frontend technologies and I have simple question.
scenario
I would like to use next.js and its feature: server side rendering.
I would like also to have my js, css and html files stored in outside of host machine where next.js is running. I want to have my files in azure blob storage. It is neccessary because I would like to have many SPA pages and single wwwroot directory is not enough for me.
Problem
By default next.js get its files from pages directory at host machine.
Is it possible to tell next.js to get files from other file system etc. In this scenario it would be azure storage. I could not find any example or extension point to do that.

Develop React w/ full-stack (WAMP) locally

Is there any way to setup local development environment with React at front-end and a full-stack server (e.g. WAMP)?
The perfect case is to:
Use the default React Create App setup without ejecting scripts
Make AJAX calls to PHP files which will handle the queries to MySQL database
Questions:
Is it possible to just run WAMP at localhost:3000 and React yarn start at localhost:3002 (it auto-sets different IP) and then just put PHP files somewhere inside src folder and call them from JSX using one of the AJAX technologies (e.g. jQuery or native XMLHttpRequest)?
Or the only way is to eject the scripts and then build and put files inside WAMP's /www/project folder and then use custom tools to update all this stuff at WAMP's localhost address?
EDIT: putting react app into /wamp/www is not an option - it didn' work for me and I don't want to put more efforts into it. Running React and WAMP in on localhost seems to work, the question to answer is:
How to import the PHP file into JSX. Trying to call it with smth like: require('./foo.php') does not work. import foo from ./foo.php didn't work either. Anly ideas?
After investigation I have found a way to achieve my goal.
The key to be able to send request to any local server you use (Apache, Nginx, Node.js) it to use ReactJS proxy feature:
https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#proxying-api-requests-in-development
After adding "proxy": "http://localhost" to my package.json file I was able to send and receive requests to my WAMP server while keeping all React's Create App native scripts.
P.S. It turned out Facebook has a nice React-native tool for request called fetch - https://facebook.github.io/react-native/docs/network.html.
1) I strongly recommend you do try to do this :
Separation of concerns is very important. having two repositories for your application, one for the backend and one for the front end is very important. Especially if you are using a versioning system, and more importantly, if you plan on working on it in a team. I suggest you just have your wamp installation stay where it is, add a Vhost like : backend.my-project.com, and then run your react app normally, and use the env.local in cra file to store the URL of your backend app using the environment variables.
2) You do not need to eject scripts to have both your frontend and backend in the same place :
Either create-react-app inside your wamp folder, or point your wamp folder to your create-reac-app generated react app

How to deploy ng2 app after ng-build

I've never understood what comes after the ng build command. I mean, how can you actually load your built app on a normal server and access it? Until now I've found only topics talking about the ng serve and ng build, saying that after the ng build you're done. But that's not true.
If I try to build and then navigate to the folder, I get a lot of errors in the console about files not found etc... not to mention errors about unmatched routes and so on.
The fact is that the app before the build using ng serve works like a charm, but I can't go to the client and say:
"Well, you have to use ng serve".
Jokes apart, how do I actually serve my built app without using GitHub pages and other hosts, but using my own server?
I swear that I've searched a lot on this topic, but I've never found a "stable" solution for it.
Thanks for any possible tip. I'm freaking out with this thing.
Because of new <base href="/"> attribute in the html, app is looking for your assets in the respective root folder.
So try to remove and run so that it will work and load the base href in run time.
You can use the below code to get it working
import {APP_BASE_HREF} from '#angular/common';
{provide: APP_BASE_HREF, useValue : '/' }
or using javascript
document.write('<base href="' + document.location + '" />');
If you use Angular CLI: ng build
Navigate to your app folder /dist
If you want to run it on your PC with no hassle just download USB Webserver and just copy the files to the root folder and run the server, you can port it to your client via usb or on client PC.
To run the app on a server: copy everything from dist folder + all your assets ( bootstrap.css or image folder or fonts folder)
http://162.244.83.64/
===========================================
If you are trying to run the app from local PC keep in mind that the app is looking for your assets in the root folder (C:/, D:/).
Open your Index.html file and edit the to point to the correct path, you don't need to do this on a server or hosting.

Which server directory to place webapp files for a node js application

So I feel like this is a simple question that has just been evading me so hopefully I can get some help here. I have developed a nodejs webapp, the directory structure can be seen in the screenshot below. Eventually, this app will implement a mongodb and house a hefty size of audio files.
I am using the inMotion Premier Support hosting plan (pretty basic) and when taking a look at the server through fileZilla I see there is a public_html directory.
Do I put the whole contents of my webapp (everything in the screenshot) in the public_html directory? I assumed that only the files that should be publicly accessible should go in there (only the contents of my apps public directory). If that's the case where would I place the files that would be considered server-side (everything on the same level as app.js).
Also my hosting service isn't dedicated or even virtual so I don't have access to the whole server just a certain number of directories.
Any help is appreciated
I am currently working on a webapp.
What you want is a VPS on inMotion, not a FTP server. The public_html directory in these web hosting services is where you usually put static html files. If you want to deploy node.js web apps, look at getting a server through VPS.

How to deploy a backbonejs app to a production server.

I wrote a small single page application in BackboneJS and not sure how to get it into production. I typically use grunt serve command and it runs everything and displays to localhost:9000.
How do I do this on a production server so I can access the app from www.example.com.
Backbone apps are all static files man, so you can put it in a CDN or just have apache/nginx serve them as static files.. Doesnt get any simpler than that really.
Get a server
Install nginx/apache
Configure nginx/apache to use your example.com and link it your /path/www/your-backbone-app
Copy over your dist/ directory to /path/www/your-backbone-app
i really suggest you minify the hell out of your html/css/js since you said your backbone app is all one "page". Make 1 js file with everything inside (look into require.js and "r.js").
Profit!
Your best choice is to do it all in your computer: require.js can do all of this automated! ->. join and minify all that apply, change the html code to reflect the new minified names of the css and js, zip. Finally run this from the console scp -r ~/yourapp/dist/ server:/path/www/your-backbone-app. Greatest thing of all this is you dont have to do anything else after that command. Enjoy.

Categories