I am using nx to manage my work environment with #nrwl/express plugin. I want to serve static file from the express server but with no success.
I tried the following.
express.static(path.join(__dirname, 'videos'));
but I am not able to get the files inside the videos directory, I always get 404.
I tried both this URLs
http://localhost:3333/api/output.m3u8
http://localhost:3333/output.m3u8
the videos directory is located in the root of my app.
Any idea how can I solve this?
Not sure if you ever solved this but I've just ran into the same problem myself.
When you serve your Express App with Nx it will be transpiled and served from the dist folder. Therefore __dirname will actually resolve to your monoreporoot/dist folder (i.e. the root of your project /dist).
If like me you were trying to serve content from a static folder inside your src directory or similar, you will need to ensure that it's transferred across to your dist folder when serving your Express app.
For me, it wasn't a problem as I was just using it as a temporary upload folder for dev so I manually created the folder inside of dist. If it's linked to your app then you might need to add a specific mkdir or cp command to your build to make sure the files/folder is present.
The process of using from the dist folder, so it is necessary that the source folder be copied.
Add a line to project.json
{
"targets": {
"build": {
"executor": "#nrwl/node:webpack",
"outputs": ["{options.outputPath}"],
"options": {
...
"assets": ["packages/<your-app>/src/public"] <-- need add this line
},
"configurations": {
...
}
}
}
Add this in your main.ts
app.use('/static', express.static(__dirname + '/public'));
The file in packages/[your-app]/src/public/some-file.txt will be available at
http://localhost:3333/static/some-file.txt
Related
Using NPM Workspaces, I'm sharing one package (components) with others (webapp1 and webapp2). Something like this:
root
apps
webapp1
webapp2
packages
components
Everything is working well, but everything inside components, include source code in the src folder is being shared. Since components' compiled output folder is dist, I'd like to only share that folder. This is how it looks in the root node_modules:
The problem is that when I need to import in webapp1 or webapp2, my import path has to include the dist folder. Here's the intellisense that I get from VS Code:
And this is how I import in webapp1 and webapp2:
import Center from '#mycompany/components/dist/Center'
While everything works, how can I set up my NPM Workspaces so that only the contents of the dist folder is shared in its root?
I've tried NPM's files and .npmignore inside the components folder to ignore everything except for the dist folder, but that doesn't seem to work. The main property in package.json for components is also set to point to dist/index.js:
"main": "dist/index.js"
Interestingly, if I want to import dist/index.js file, I can do it without dist:
import foo from '#mycompany/components'
...however, importing anything other than dist/index.js requires dist to be included in the path.
You should treat the packages folder as a collection of dist folders in your use case.
In this scenario, you would move your packages/components/src folder somewhere else in your project and then build to packages/components instead of packages/components/dist
root
apps
webapp1
webapp2
packages
components
src
components
I have a similar setup in this tooling monorepo I created
An alternative to #nicksaroba's approach, if you don't want to restructure your project layout, you can just setup an alias:
// apps/webapp/webpack.config.js
module.exports = {
// ...
resolve: {
alias: {
"components": "#mycompany/components/dist/"
}
},
// ...
};
I am building a react-native app which embeds a WebView in order to host some non-native react components. I have a small html file which is the source for the WebView and lives in a sub-folder of android/app/src/main/assets, which I understand is where it needs to be for the build to copy it to the apk, though I think I will need another copy in another location for IOS. So far so good...this much works.
Now, the htm file needs to pull in the regular react components from code in an npm module. It contains a script tag whose src needs to reference a file which is available in a subdirectory of node_modules. I don't know of any url I can put in the src that will reference the file direct from node_modules and get it copied to the apk. The simple solution is to manually copy the file into the same subfolder of android/app/src/main/assets and simply use its name as the src. This also works, though there may be a better way.
Problem: how can I automate copying the file from node_modules to assets?
(Ideally, a solution would also work for IOS, though at this point I'd be glad to have an android-only one.)
I explored rnpm and react-native link. Documentation I can find is very inadequate, but it appears this mechanism can only be used for fonts.
I explored adding a copy command to the start script in package.json, like this:
"scripts": {
"start": "copy/Y node_modules/X/Ybundle.js android/app/src/main/assets/X/Ybundle.js & node node_modules/react-native/local-cli/cli.js start"
},
but the copy did not happen when I ran react-native start-android.
I am wondering whether something could be added to the react-native project's gradle script, but cannot find any documentation on how this is used in the react native build process.
The best solution I've found so far is to add some scripts to package.json:
"scripts": {
"copyAssets": "node -e \"fs.copyFileSync('./node_modules/bloom-player-react/output/bloomPlayerControlBundle.js','./android/app/src/main/assets/bloom-player/bloomPlayerControlBundle.js')\"",
"start-android": "npm run copyAssets && react-native run-android",
...
}
Then when I npm run start-android, first the copy happens, and then the normal android startup.
I answered very same question in here with same answer: https://stackoverflow.com/a/72191579/7376041
For Android, you can run a custom Gradle task that able to will handle copy your assets in build time.
Create a Gradle file in your module's root, like below:
(I presume your module name is react-native-my-awesome-module and your HTML files is under www folder in module's root.)
awesome.gradle:
/**
* Register HTML asset source folder
*/
android.sourceSets.main.assets.srcDirs += file("$buildDir/intermediates/ReactNativeMyAwesomeModule")
/**
* Task to copy HTML files
*/
afterEvaluate {
def targetDir = "../../node_modules/react-native-my-awesome-module/www";
def fileNames = [ "*.html" ];
def htmlCopyTask = tasks.create(
name: "copyReactNativeMyAwesomeModuleAssets",
type: Copy) {
description = "copy react native my awesome module assets."
into "$buildDir/intermediates/ReactNativeMyAwesomeModule/www"
fileNames.each { fileName ->
from(targetDir) {
include(fileName)
}
}
}
android.applicationVariants.all { def variant ->
def targetName = variant.name.capitalize()
def generateAssetsTask = tasks.findByName("generate${targetName}Assets")
generateAssetsTask.dependsOn(htmlCopyTask)
}
}
After installing the module, put the below line in your project's android/app/build.gradle file:
apply from: file("../../node_modules/react-native-my-awesome-module/awesome.gradle");
When you build your app, your assets under www folder will be copied from your module. You can access your resources in your app like below :
<WebView
source={{uri: 'file:///android_asset/www/index.html'}}
/>
I'm developing a Single Page App using Vue CLI and want history pushstate to work so I get clean URLs.
I have to follow this: https://www.netlify.com/docs/redirects/#history-pushstate-and-single-page-apps and add a _redirects file to the root of my site folder with the following:
/* /index.html 200
The problem is I don't know how to add this _redirects file to the root of my dist folder. I tried adding it to the static folder but it ends up in a subfolder and not in root. How can I include this file so that history mode works after deploying on Netlify ?
// config/index.js
build: {
// Paths
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: '/',
vue-cli created app 3.x
For the new build setup using the vue-cli version 3.0.0-beta.x there is a public folder now and you do not need the following setup. Just put your _redirects file under the public folder root. When you build it will make a copy to the dist folder which will be used for your deploy.
vue-cli created app prior to 3.x
Vue.js uses webpack to copy the static assets. This is maintained in webpack.prod.conf.js for the production build which is what you will need in this case for Netlify. I believe the best and cleanest configuration is based on this solution.
Search the file for the new CopyWebpackPlugin in webpack.prod.conf.js.
// copy custom static assets
new CopyWebpackPlugin([
{
from: path.resolve(__dirname, '../static'),
to: config.build.assetsSubDirectory,
ignore: ['.*']
}
])
Create a root ( folder in your project same level of the static folder )
You could name this anything you like, but I will use root for the example.
You would then make sure the _redirects file is in the new root directory or whatever you called it. In this case it is named root
Now modify the webpack.prod.conf.js CopyWebpackPlugin section to look like the following:
// copy custom static assets
new CopyWebpackPlugin([
{
from: path.resolve(__dirname, '../static'),
to: config.build.assetsSubDirectory,
ignore: ['.*']
},
{
from: path.resolve(__dirname, '../root'),
to: config.build.assetsRoot,
ignore: ['.*']
}
])
You could also just use the netlify.toml file which tends to be a bit cleaner. Just put this in the file to get the redirect you were looking for:
# The following redirect is intended for use with most SPA's that handles routing internally.
[[redirects]]
from = "/*"
to = "/index.html"
status = 200
netlify.toml is normally stored in the root of your site repository.
You can find more info about this file here.
I've tried Rutger Willems's snippet without the last line and it works. Credit goes to Hamish Moffatt.
[[redirects]]
from = "/*"
to = "/index.html"
status = 200
Just in case you're looking for an answer on Nuxt instead of Vue, add the _redirects file to the static/ directory.
You can simply add the _redirects file to your /public directory in your vue app
I am using Grunt and it is watching files in my src folder. However the baseDir is set to src so it is serving files from that point, however it can't see back to the node_modules folder.
How can I set grunt to serve from the correct folder but load the necessary packages that I need to load from the node_modules folder?
Sounds like what you mean is that you're using grunt to start a local web server? If so, then there isn't a good answer for you as a web server will only have access to files in its base directory. That said, if you need to access a file in node_modules/ from a web request you could add a copy task to move those files into a subdirectory within your baseDir.
Here's an example of using jQuery via node_modules - in your Gruntfile.js:
copy: {
vendorJS: {
files: [{
expand: true,
cwd: 'node_modules/jquery/dist/',
src: ['jquery.js'],
dest: 'src/vendor/'
}]
}
}
Then you would need to change how you pull in that file in the browser to match the src/vendor/ directory.
Just getting started with KrakenJS. After running the generator and looking at the config.json I notice it has the "static" middleware defined as:
"static": {
"module": {
"arguments": [ "path:./.build" ]
}
}
I have two issues/questions:
After running grunt build I see the browserify output in the /.build folder, but when I navigate to /js/app.js it appears to load the file from the /public folder. Shouldn't it be from the /.build folder?
With Express 4+ shouldn't this actually be serve-static?
I can't help but think I'm missing something.
Thanks!
As I guessed, I was missing something.
I dug into the kraken source a bit more and found that the core config defines the "name" property on static as "serve-static", so it is in fact correct when it merges with the config.json in my app.
The other issue I was having with loading from the incorrect folder was because inside the development.json config file the 'kraken-devtools' middleware is configured with the copier compiler, so when the file is requested at runtime it copies it from the /public folder into the /.build folder, overwriting the output from grunt build.