By default (in project's grunt file) the templates.js file located in .tmp directory (generator-backbone), so am I missing something or this feature just don't work out of the box and I need to put additional paths in require.config?
Obviously if I will not add anything the JST will not be defined, right?
Note that I initiated the projects with Handlebars as the templating framework.
Ah - sorry for trashing SO. Obviously I've messed up paths in my Grunt.js.
Only .tmp/scripts directory is mounted and I've added app to the path additionally, so the files was not served at all.
Related
I'm extremely new to React & recently found out about the %PUBLIC_URL% stuff.
Generally, what is the point of using the url?
Also, it seems kind of messy putting a lot of images/json/etc in one place, so I was wondering if there was any point to creating an img folder inside the public folder: ex. public/img and accessing it like: %PUBLIC_URL%/img/img1.jpeg.
Would that mess anything up?
I've done some research about it but I'm kind of dumb so I don't really see the point of using PUBLIC_URL over just accessing the public/ folder.
From https://create-react-app.dev/docs/using-the-public-folder, it says:
If you put a file into the public folder, it will not be processed by webpack. Instead it will be copied into the build folder untouched. To reference assets in the public folder, you need to use an environment variable called PUBLIC_URL.
Honestly I don't know what this means; could someone explain? Sorry for all the dumb questions <3
TL;DR: Put assets you use from javascript inside your source folder, either in a specific folder (src/img) or next to the javascript files that use them. Use public/ for files referenced in your html, with %PUBLIC_URL% to keep create-react-app happy.
Ideally you'll want all assets and files used in your javascript inside the src folder. This way you can import these files and create-react-app will make sure you have a valid url to them.
Files in your public folder can't be import'ed from javascript! You'll want the public folder for any assets that you need from html directly (favicon, manifest.json, robots.txt) or you just want to be able to link to them (I sometimes have a logo.png in there so I can use that url on other websites).
The PUBLIC_URL is required for assets in public/ because create-react-app needs to insert the path in case you serve your app in a nested path. for example, https://youdomain.com/myapp/v2/index.html, would have a public url /myapp/v2. This needs to be set in your package.json, but if you don't serve from a subpath you don't have to change anything.
Having issues running gatsby build with gatsby-starter-wordpress-advanced theme:
Error: ENOENT: no such file or directory, open 'C:\Users\Tobias\Desktop\Gatsby\gatsby-starter-wordpress-advanced\.template-cache\tmp-\.js'"
I figured this might be a problem with the path. The path should rather look like:
writing tmp-new-page/ template: open '.template-cache/tmp-new-page.js'
See repo: https://github.com/henrikwirth/gatsby-starter-wordpress-advanced/blob/master/create/utils.js
Line 53 you find the function createPageWithTemplate. I've tried console.log(page.uri) to see what's going on. It outputs the filename correctly. I've also tried with gatsby clean to clear the cache. It seems to be some kind of backslash issue where the path comes with a \ .js at the end instead of sample-page.js:
no such file or directory, open 'C:\Users\Tobias\Desktop\Gatsby\gatsby-starter-wordpress-advanced\.template-cache\sample-page\.js'
The issue have been resolved. The problem was related to update in WPGraphQL WordPress plugin. Had to update the paths, because the page.uri is different in the newer versions of WPGraphQL. Before it was just: some-page now it is /some-page/.
Secondly in the page template creation process the theme was using the uri, therefore, this messed up the paths for the template files. This has been switched to page.slug instead now and some extra checks, to make sure the frontPage is not ending up producing a wrong path.
The master branch of the starter theme have been updated.
I'm really a newbie in front-end development. I'm currently involved in a project that does front-end development. I hope I can explain this clearly.
Whenever I call http://localhost:8080/test, it is loaded by page1.jsp.
Now I would like to load a TSX file instead of a JSP. I tried changing my <welcome-file> from page1.jsp to html/js/page2.tsx in web.xml but I don't know why it is not working.
What happened is that a download file window will pop up instead of loading http://localhost:8080/test.
I placed the TSX file in the html/js directory because that's where the package for Typescript and React is located. By the way, the TSX file I'm talking about is a React component that uses Typescript.
Is it possible to configure the web.xml to render the TSX file? If not, is there any other way for me to load it?
Is web.xml still important if I want to load a TSX file?
No, for several reasons:
A .jsp is a "Java server page". You are probably running an application server like Tomcat (I haven't done that in fifteen years or so, so bear with me). It is compiled into a Servlet, which then runs to produce your page as output. Your .tsx file doesn't fit in that process.
Your application server probably has a directory somewhere where you can put static files that don't need to be run on the server side; see if you have a "WebContent" directory or so. In it you can place pure HTML files, Javascript files, fixed images and so on.
But if you put your TSX file there, your browser still won't be able to use it: browsers don't understand Typescript. Typescript needs to be compiled into Javascript, and if you put the resulting .js file there, then a HTML file could use it (with a tag), and that would work.
But your file isn't only Typescript, it's a tsx -- it probably also contains JSX, which also needs to be translated to Javascript.
There are also dependencies, like React, that you'll also need to download in your HTML.
On the whole this is what a bundler like Webpack is for (if you used create-react-app, for instance, you'll get a working Webpack configuration from the start). It can create a "bundle.js" containing all the Javascript needed in one file, including all the dependencies and all your TSX code compiled to Javascript.
Place that in a WebContent or similar directory, call that from a tag in some HTML file -- and you'll hopefully get a nice error message in the console that'll lead you to the first thing I forgot to mention :-)
I am using react for my application. I have a div that I would like to have a background image. But I can't get it to show.
When I include it in the src folder as myapp/src/bgimage.png it works perfectly but I've heard that I should include it in a folder named images at the root level so it's myapp/images/bgimage.png, however this does not work for me and gives me:
You attempted to import ../images/bgimage.png which falls outside of the project src/ directory.'
Can anyone tell me the proper way to include image assets in reactJS?
public: anything that is not used by your app when it compiles
src: anything that is used when the app is compiled
So for example if you use an image inside a component, it should be in the src folder but if you have an image outside the app (i.e. favicon) it should be in public.
I would add that creating an "assets" folder inside the "src" folder is a good practice.
Use /src if you are using create-react-app
If you are using create-react-app, You need to use /src for the following benefits.
Scripts and stylesheets get minified and bundled together to avoid extra network requests.
Missing files cause compilation errors instead of 404 errors for your users.
Result filenames include content hashes so you don’t need to worry about browsers caching their old versions.
Also, if you are using webpack's asset bundling anyway, then your files in /src will be rebuilt.
You may create subdirectories inside src. For faster rebuilds, only files inside src are processed by webpack. You need to put any JS and CSS files inside src, otherwise webpack won’t see them.
See this link
No,
public folder is for static file like index.html and ...
I think you should make an "assets" folder in src folder
and access them in this way.
In this article, I mentioned that
Keep an assets folder that contains top-level CSS, images, and font files.
In react best practices we keep an assets folder inside the src which may contain top-level CSS, images, and font files.
According to the create-react-app documentation, regarding the use of the public folder:
Normally we recommend importing stylesheets, images, and fonts from JavaScript. The public folder is useful as a workaround for a number of less common cases:
You need a file with a specific name in the build output, such as manifest.webmanifest.
You have thousands of images and need to dynamically reference their paths.
You want to include a small script like pace.js outside of the bundled code.
Some libraries may be incompatible with webpack and you have no other option but to include it as a tag.
In continuation with the other answers I would further like to add that you should create an 'assets' folder under 'src' folder and then create 'images' folder under 'assets' folder. You can store your images in the 'images' folder and then access them from there.
As per my understanding I will go with easier way. If you use your assets from public folder, after build contents from public will be maintained as same. So, if you deploy your app, the contents from public folder will also be loaded while your app loads. Assume your build is 5 MB (4 MB assets and 1 MB src) the 4 MB will get downloaded first then follows the src contains. Even if you use lazy and suspense your app will be slow during deployment.
After build my solution (WPF application), the config file is created in project\bin\debug folder. Whenever a change is made to this config file, I have to re-compile/rebuild the project to pull the changes from the config file.
Is there a way to avoid re-compiling the project after making a change in config?
This somehow throws the whole purpose of config file.
If you talk about the App.config file (an XML file where you usually put appSettings, connectionStrings, etc): it is possible to modify this one without to recompile your project / solution. Just navigate to the project\bin\debug folder, there you'll find a file that is called {AssemblyName}.exe.config which you can edit (actually, this is a renamed version of the App.config file, this happens when the build process copies it to the output directory).
If you talk about XAML related files: these are by default not configurable because they get translated to BAML (Binary Application Markup Language) files that are embedded to the assembly in a default WPF project. If you change those you have to recompile.
You do not need to recompile your project. Your assumption is wrong.
if you edit OutputDir\{appname}.exe.config, then it will take effect immediatelly. However, if you rebuild your app, this config file is overwritten by app.config from your project folder