Changing Aurelia app's index page - javascript

I am working with an Aurelia app that should start at a different page than index.html, but I cannot find where to change that.
Where in an Aurelia app can you set which landing page to use?

This is misunderstanding. index.html page is the default landing page set by web server, not Aurelia. E.g. if you try to get the url e.g.https://stackoverflow.com the web server will give index.html by default. You need to change it in web server.
e.g. using Apache web server directive DirectoryIndex myindex.html
From https://httpd.apache.org/docs/2.4/mod/mod_dir.html:
The DirectoryIndex directive sets the list of resources to look for, when the client requests an index of the directory by specifying a / at the end of the directory name.
When using development server of Aurelia (default webpack-dev-server configured by aurelia-cli), the index.ejs compiles to index.html. You may need to change configuration of HtmlWebpackPlugin in webpack.config.js in order to change generated file from index.html to some other name:
new HtmlWebpackPlugin({
template: 'index.ejs',
filename: 'myindex.html',
...

If you're using the CLI, there is not an easy way to do this. The CLI is mostly for basic use cases, and if you're trying to do something fancy, you're going to have to learn a bit more about JavaScript tooling.
You can still do it and here's how:
Open aurelia_project/tasks/run.js and make sure the server property of the argument to the browserSync function has the index property pointing at the index file you want to use, like this:
let serve = gulp.series(
build,
done => {
browserSync({
online: false,
open: false,
port: 9000,
logLevel: 'silent',
server: {
index: 'my-special-index.html', // Make sure you have this line in there.
baseDir: [project.platform.baseDir],
middleware: [historyApiFallback(), function(req, res, next) {
res.setHeader('Access-Control-Allow-Origin', '*');
next();
}]
}
}
);

Related

Bundled file is not found

I am using Golang (Echo) for my backend and React for my frontend. When I bundle my code using webpack, the file is created; however, I am getting an error in my console when I go to localhost:3000 stating the bundle file cannot be found. This is the exact error message: GET http://localhost:3000/build/app.bundle.js net::ERR_ABORTED.
Here is my server:
func main() {
env.SetEnvVars()
e := echo.New()
e.File("/", "server/static/index.html")
e.Logger.Fatal(e.Start(os.Getenv("PORT")))
}
Here is my webpack.config.js file:
module.exports = {
entry: './client/main.jsx',
output: {
path: path.resolve(__dirname, 'server/static/build'),
filename: 'app.bundle.js'
},
...
And the script tag in my index.html file is:
<script src="./build/app.bundle.js"></script>
The directory path regarding these files is currently:
/
server/
main.go
static/
index.html
build/
app.bundle.js
Any help would be appreciated!
The echo server you've set up only serves one single path, the root path ("/"), by rendering the contents of the index.html file. Because you haven't set up any other handlers for that server, any request to a path other than the root will result in 404, including those requests made from the index page via script and link tags, e.g.; <script src="./build/app.bundle.js"></script>.
To be able to serve a request to a path like "/static/build/app.bundle.js" for example you need to tell the server how to do that by registering a new handler.
With the echo server you can use its Static method to do that.
e.Static("/static", "static")
Please keep in mind that the links you use in html tags, the location of the corresponding files on your machine, and the location from where you launched your app matters if you use relative paths like ./build/app.bundle.js, and because of that the two arguments to e.Static may need to be somewhat different from the example here.
Here's a bit more info.

Requests for JS and CSS giving index.html instead

I'm using Express and create-react-app.
My React app is a ways along, and now I'm trying to serve it from an Express server.
// server/app.js
const express = require('express');
const path = require('path');
const app = express();
// Serve static assets
app.use(express.static(path.resolve(__dirname, '..', 'build')));
// serve main file
app.get('*', (req, res) => {
res.sendFile(path.resolve(__dirname, '..', 'build', 'index.html'));
});
module.exports = app;
(My build directory is populated when I do npm run build.
I view the page in Chrome, and what happens when loading the page at localhost:3000 is the Console prints Uncaught SyntaxError: Unexpected Token <, and in the Sources tab it shows that the content of my CSS and JS files are simply the same as index.html: as in this image.
This seems like a recognizable issue, so hopefully someone has seen this before. I'm sort of stumped on where to even begin, especially because I was actually serving the app from Express successfully at first. Then this started happening, then it stopped after some random switching of git branches and reverting and replaying changes, and then it started happening again. So I'm not even sure what makes it happen or not happen.
It appears that your app.use(express.static... call is failing, so instead all of the requests (including for the static assets) are being handled by the app.get('*', (req, res) => { part.
As you are intending to use this to serve a React app, I'd suggest taking inspiration from a boilerplate, "to see how it's done". I personally use NYTimes's kyt project and there's react-starter-kit too.
Try the following code changes which are detailed from the express documentation - serving static files in express:
Replace
app.use(express.static(path.resolve(__dirname, '..', 'build')));
With
app.use(express.static('build'))
Remove
app.get('*', (req, res) => {
res.sendFile(path.resolve(__dirname, '..', 'build', 'index.html'));
});
The problem was "homepage": ... in package.json.
When npm run build runs and there is a homepage URL in package.json that has a non-empty path (like a Github Pages URL like this, https://username.github.io/project_name, where "/project_name" is the path), it changes where it expects the files inside /build to be. The requests for my js and css were going to /project_name/static/... instead of /static/....
It even said in the log output of npm run build:
The project was built assuming it is hosted at /project_name/.
You can control this with the homepage field in your package.json.
On my localhost, it wasn't hosted at /project_name/, so the paths were off.

Cannot refresh page in production when compiled with webpack

I am building an app using node.js + express.js + react.js and I'm using webpack to compile the client side code. The problem I am having is after my client side code is compiled with webpack and I run my app, I cannot refresh the page.
My code:
My webpack compiles my files into /dist/index.html, my app runs on port 3000, and all client side routes are prefixed with /admin.
app.get('/', function(req, res) {
res.render('dist/index.html');
});
When I go to localhost:3000 in the browser and click around the links, the app works fine. However, if I go to, as an example, the about page:
localhost:3000/admin/about
And I refresh, I get the error Cannot GET /admin/about.
I believe the reason is my express router only knows about the / route... so If I refresh directly onto a route like /admin/about, express doesn't know what to render so my solution was to include a "catch all" route:
app.get('*', function(req, res) {
res.render('dist/index.html');
});
However, this keeps giving me the Error: Failed to lookup view "dist/index.html" error.
Can someone help?
Thanks in advance!
After research, I found the solution isn't res.render but res.sendFile:
res.sendFile(path.join(__dirname, '/dist/index.html'));

How to run Angular 2 app without browser-sync and node?

I have created an angular2 app with typescript. I am using Angular2 Routes for routing.
Using lite-server to start my angular2 app, it is working fine and routing properly if page is refreshed.
ISSUE::
But once i deployed the ts-compiled code to my domain which uses http-server to serve the files, it stop routing properly.
Whenever I refresh my page on my domain(blog.jyotirmaysenapati.com), it shows below thing::
Not Found
The requested URL /blog/new was not found on this server.
Additionally, a 404 Not Found error was encountered while trying to
use an ErrorDocument to handle the request.
Please help on this as i do not want to have node support in my domain. So how can i run it properly without the help of node and browser-sync??
Is it possible in first case??
I am using latest version of angular2 framework.
Anyone can see my code here.
You can use gulp-connect which provide fallback option :-
var gulp = require('gulp'),
connect = require('gulp-connect');
gulp.task('connect',function() {
connect.server({
root: '',
port: 8080,
fallback: 'index.html',
middleware: function(connect) {
return [connect()
.use('/node_modules', connect.static('./node_modules')), connect()
.use('/app', connect.static('./dist'))
];
}
});
})

Enabling html5 mode with AngularJS and a external NodeJS server

So I've read almost every SO answer/question to this topic, but still I have many questions in my head.
First, the problem:
I have an AngularJS app with html5 enabled, so I can get rid of the '#' sign.
$locationProvider.html5Mode({ enabled: true, requireBase: true });
$locationProvider.hashPrefix('!');
This is the important part in my index.html:
<!DOCTYPE html>
<html ng-app="application" ng-controller="ApplicationController as app">
<head>
<meta name="fragment" content="!">
<title>LivingRoomArt</title>
<meta charset="UTF-8">
<base href="/index.html" />
I am communicating with a NodeJS server which is using express:
router.route('/events')
.post(authController.isAuthenticated, eventController.postEvent)
.get(eventController.getEvents);
// Register all our routes with /api
app.use('/api', router);
// Start the server
app.listen(process.env.PORT || 5000);
So, the usual problem:
After reloading, I am getting an 404 from the server. I get the concept of this here, the suggested solution everywhere:
// This route deals enables HTML5Mode by forwarding missing files to the index.html
app.all('/*', function(req, res) {
res.sendfile('index.html');
});
});
The thing is, I don't have an index.html file on my server, neither do
I want to duplicate it on my server.
So how do I tell Node to handle requests properly without storing html-files on my server?
I am hosting the Node app on Heroku, if this helps.
When you say you don't serve static files, you're saying that the node.js API isn't right?
I guess you end up with two distinct urls, let's call them http://api.com and http://client.com.
I don't understand why your API should handle the 404. Do you load http://api.com in your browser and expecting your index.html? If it's really your use-case, I would advice a simple routing to declare in your API like:
app.all('/*', function (req, res) {
res.redirect('http://client.com');
});
Which will redirect all requests not catched by your previous routes declaration to your client website.
Then, there is two options:
If the server that serves your static files is another Node.Js server using express, you could perfectly do the sendfile, since you now have access to the index.html
If you're using Nginx, (which I strongly recommend if you don't) for the statics, you could do a configuration like this to redirect all failed requests (missing files / routes) to the index.html
server {
listen 80;
root /app/www;
index index.html;
location / {
try_files $uri $uri/ /index.html;
}
}

Categories

Resources