Using yeoman generator to write angular, when i add an menu.json in app directory. And try to use the service to get json file. It appears 404 errror.
angular.module('mealApp')
.service('foodFinder', function () {
// AngularJS will instantiate a singleton by calling "new" on this function
this.getMenu = function() {
return $.get('menu.json');
}
});
If you put your menu.json in app folder I can know its location is same as index.html.
How about $.get('index.html');
By Default yeoman generator when you use its command (Ex: grunt server) to start server it will auto host a server (Ex: http://localhost:9000) and auto load your index.html in app folder.
if you cannot it means you are using another way to start server and lost relative path.
Maybe you need to find your relative path to your menu.json (Ex: app/menu.json or something)
Related
I was hoping to deploy a Next.js app with Laravel API. I had developed React apps with CRA and in those I used the API server to serve the index.html of the CRA as the entry point of the app.
But in Next.js, after development I get to know that it needs a Node.js server to serve (which is my bad, didn't notice that). There is an option next export that builds a static representation of the Next.js app and it has an index.html. I am serving the index.html as the entry of the app by my Laravel API. It is serving the page, but just some of the static contents.
What I was hoping to know is it possible to host the aPI and the Next app from a single PHP shared hosting without any node server? If so, how? If not so, what could be the alternatives?
Actually the acepted answer is completly wrong, when you do yarn build and in your package.json is set like "build": "next build && next export", you will get an out folder which all the items in there are used to build without node.js server
Now since you are using laravel, and you use the out folder you will only load half of the page because the routes are not set properly. for that to work you need to edit your next.config.js edit it to
module.exports = {
distDir: '/resources/views',
assetPrefix: '/resources/views',
}
These will set the root directory to the root one in Laravel. now this will work for SPA (single page application) only for the dynamic routes you need to match with a view file for each one that you have in your out folder
For each route that you have you need to create a new "get" route in laravel
Route::get('/', function () {
return require resource_path('views/index.html');
});
Route::get('/contacts', function () {
return require resource_path('views/contacts.html');
});
Route::get('/post/{slug}', function () {
return require resource_path('views/post/[slug].html');
});
Notice that you can pass a wildcard for dynamic routes and they are all gonna work. once you do that and you deploy route out folder inside /resources/views in Laravel it's going to work
Apparently there is no alternative to nodejs server, which is not an option for me currently, so I unfortunately had to abandon next.js and create a CRA app and used as much from the next.js as I could.
I am using React app that wraps DotNetify around Cordova to build iOS and Android app.
Dotnetify connects to a WebSocket Server at given URL, we need to define based on build web or Cordova what is the host URL to connect to the Socket/SignalR server, current line is:
dotnetify.react.connect('Login', this);
the definition of Login is actually relative and I need to pre-pend the host URL somehow to tell build where is the WebSocket to connect to.
My assumption is it should be defined somewhere in Package.json to make it look like below:
dotnetify.react.connect('WSS://DEV.DOMAIN.COM/'+'Login', this);
What's the best solution to address this issue for development/debug mode locally or development on a server with public static IP or production server.
I have found base_url that needs to be passed in info object: node_modules/socksjs-client/lib/main.js:183
// allow server to override url used for the actual transport
this._transUrl = info.base_url ? info.base_url : this.url;
So based on above I tried to pass argument, but donetify is not passing this argument to the socksjs. how do we fix this actually?
this.vm = dotnetify.react.connect('Login', this, {"base_url":"wss://dev.domain.com"});
You can use below to set below in your index.js to set the host right before connecting line.
dotnetify.hubServerUrl = 'domain.example.com';
I need to switch my application server backend during development. Currently, the server is hard-coded in a module as a string.
I was looking around for a good way to switch the server using gulp.
I am unsure how to achieve something like gulp watch localhost or gulp watch devserver, where the last argument denotes the backend server?
You might have a configuration file for every different config, for example dev.constant.js and local.constant.js.
Each of these files contains an angular constant wich holds your current config, including your backend's url:
angular
.module('myFancyModule')
.constant('config', {
backendUrl: 'https://my.backend.com/api/'
});
Using yargs and gulp-if, you can check if a flag (e.g. --dev) is set and add the corresponding config file to the stream using gulp-add-src.
Another, more safe way is, to copy the particular config file to a file called config.constant.js once.
var argv = require('yargs').argv;
var fs = require('fs-extra');
gulp.task('watch', function() {
if(argv.dev) {
fs.copySync('./config/dev.constant.js', './config.constant.js');
}
//Your watch task here
}
Doing it this way, you are able to change your configuration very quick and easy. You could use this for builds and deploys as well, if you're doing them via gulp.
I am working on creating a website with Angularjs and WebAPI as backend support with Visual studio.
I have defined the url to webapi in app.config.js as an app constant:
var serviceBase = 'http://localhost/Webapiservice/';
app.constant('ngAppSettings', {
apiServiceBaseUri: serviceBase,
clientId: 'ngTestApp'
});
Now for QA environments (http://QAServer/Webapiservice/), the webapi resides at a different URL, the same goes for our production environment (http://ProdServer/Webapiservice/).
I can manually update the js file to the appropriate location. But is there a way to automate this process so webAPI is pointing to the correct URL?
Is it possible to do this with grunt? Again I have never used grunt before.
ngConstant does a great job, along with grunt: https://github.com/werk85/grunt-ng-constant. This way you can specify your environments as JSON files and on compile/run time, grunt generates a enviornment.js file with a module (I call mine always ENV), which can be injected in every part of your application.
I would do something like this:
angular
.module('app', [])
.value('$path', {
rest : "http://localhost/Webapiservice"
})
you will call something like this:
app.constant('ngAppSettings', {
apiServiceBaseUri: $path.rest,
clientId: 'ngTestApp'
});
currently, I run backbone as the front-end of my rails 3.2 application. I need to migrate it into an independent JS application, as part of my putting it as part of Trigger.io.
It now exists as its own index.html file, referencing the assets folder.
When I open the file, it loads the Backbone modules, but the page remains empty. And when I run fetch() commands, it
So, I got a couple of qns:
1) How do I trigger the routes such that it goes to a designated page by default?
I know it gets triggered in Backbone.History.Start, but I am not sure what to do before that.
2) The url is "file://localhost/Users/mingyeow/Desktop/index.html"
How do I set the root url manually to use localhost:3000/my web address?
// define router
var Router = Backbone.Router.extend({
routes : {
'index' : 'indexAction',
'*default' : '_defaultAction'
},
indexAction : function() {
// this will be executed when user navigate to #index
},
_defaultAction : function() {
// this will be executed when user navigate anywhere else (#XXX)
}
});
// on document ready
$(function() {
// initialize router
new Router();
// and start history
Backbone.history.start();
});
You can navigate this way.
Or by clicking the link : Index route
You can use python server. To start it type in the Terminal:
$ python -m SimpleHTTPServer
And check http://localhost:8000
1) To trigger a route change you just need to navigate to a page via a href or JavaScript like window.location. Read up on Backbone Routes but essentially you need to write a function for every 'page'. Each function should take care of rendering the page.
2) This should be very simple. You need a local web server. What I started doing recently is just having a simple Node server. Node is very easy to install and its worth experimenting with. Download a static web server such as this one I made. To use it just put your backbone application in a directory named 'public' and run server.js in node.
If you don't want to do this you can run a simple LAMP/WAMP/MAMP installation and set the root of the Apache web server.