New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add documentation on how to serve static files #402

Closed
testos944 opened this Issue Feb 7, 2018 · 12 comments

Comments

Projects
None yet
7 participants
@testos944

testos944 commented Feb 7, 2018

I'm submitting a...


[ ] Regression 
[ ] Bug report
[ ] Feature request
[x] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead post your question on Stack Overflow.

The documentation is very well written and very useful; however I think an example of serving a static file would be a huge plus.

I'm trying to serve an Angular App bundled with a NestJS backend, and see no clear way to do that. An example serving a static html file would help a lot.

@kamilmysliwiec

This comment has been minimized.

Member

kamilmysliwiec commented Feb 11, 2018

Hi @testos944,
Actually, it's in the docs already, take a look here: https://docs.nestjs.com/techniques/mvc. Let me know if you would have any questions 🙂

@testos944

This comment has been minimized.

testos944 commented Feb 11, 2018

Well, not if you don't want to use a view engine but serve only a plain html file :)

But I guess I can juste use res.sendfile('public/index.html'), I will try this out.

@kamilmysliwiec

This comment has been minimized.

Member

kamilmysliwiec commented Feb 11, 2018

Yes, that's true. I'll provide a small example without any engine soon 🙂

@testos944

This comment has been minimized.

testos944 commented Feb 18, 2018

For anyone wondering :

import * as express from 'express';
app.use(express.static(path.join(__dirname, 'public')));

If you put your index.html file in the public folder, it should be good to go

@testos944

This comment has been minimized.

testos944 commented Feb 18, 2018

@kamilmysliwiec, is there any way to have a global catch all route ? I want to catch all routes (except those defined in my modules/controllers), something like that in expressjs:

app.get('*', function(req, res){
  res.redirect('/');
});
@ovidiup13

This comment has been minimized.

ovidiup13 commented May 13, 2018

If you're interested in serving static files, here's a nice way to do it with fastify and fastify-static. This solution assumes that your static files are in the root of the project, in the folder dist/public. Then, add the following lines to:

main.ts

async function bootstrap() {
  const app = await NestFactory.create(AppModule, new FastifyAdapter());

  app.useStaticAssets({
    root: path.resolve(__dirname + "../dist/public")
  });
...
}

app.controller.ts

  @Get()
  root(@Res() res) {
    res.sendFile("index.html");
  }

This will serve your main index.html as well as any other assets on the root path "/".

@Cspeisman

This comment has been minimized.

Cspeisman commented Jun 19, 2018

@kamilmysliwiec if you're still working on examples I would love to see an example where nestjs serves both static files and json responses depending on the route. I would love to serve both my react app and the json needed from the server!

@natqe

This comment has been minimized.

natqe commented Jun 19, 2018

@Cspeisman here is an example (in src/main.ts)

import { join } from 'path'
import { renderFile } from 'ejs'
import { NestFactory } from '@nestjs/core'
import { AppModule } from './app.module'

(async () => {

  const app = await NestFactory.create(AppModule)

  app.
    engine('html', renderFile).
    setBaseViewsDir(join(__dirname, '../views')).
    useStaticAssets(join(__dirname, '../views/public'), {
      index: false,
      redirect: false
    })

  await app.listen(process.env.PORT || 3000)

})()

and in app.controller you render the file like so:

import { Get, Controller, Render } from '@nestjs/common'
import { AppService } from './app.service'

@Controller()
export class AppController {

  constructor(private readonly appService: AppService) { }

  @Get()
  @Render('public/index.html')
  root(): Promise<object> {
    return this.appService.root()
  }

}
@calebeaires

This comment has been minimized.

calebeaires commented Jul 25, 2018

@ovidiup13 Your solution is great, works on dev mode, (localhost:8080), but does not when I need to run it on a aws server.

I have checked everthing: port, firewall and others, but nestjs does not load an index.html file

@ovidiup13

This comment has been minimized.

ovidiup13 commented Jul 26, 2018

@calebeaires hmm... That's weird. It depends on how you configured to access the service on aws. Have you tried with other routes to return, for example, JSON?

@hernanS

This comment has been minimized.

hernanS commented Aug 1, 2018

@Cspeisman
it is my first time leaving a question so, let me explain:
I recently started to work with Nest framewor, Until now I have couldn't do a good render. I have this:

main.ts
async function bootstrap() {
const app = await NestFactory.create(AppModule);

app.
engine('html', renderFile).
setBaseViewsDir(join(__dirname, '../views')).
useStaticAssets(join(__dirname, '../views/public'), {
index: false,
redirect: false,
});
await app.listen(3000);
}

app.controller
@controller()
export class AppController {
constructor(private readonly appService: AppService) {}

@get()
@Render('public/clients1.html')
root() {
return this.appService.root();
}
}

export class AppService {
root() {
}
}

What should go in appService?

@natqe

This comment has been minimized.

natqe commented Aug 4, 2018

@Cspeisman object with all the data you want to put into the view using ejs template rendering.
if u not want to render any data u not need to return anything in the controller, i think.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment