Could someone explain to me what is the difference between index.js file and _app.js? In the Next tutorial it says to change the index.js but what is rendered for me is _app.js.
_app.js will contain your whole app, meaning this will be rendered in any page of the project. Eg. if you add a <div>hello world</div> in this file, you will see the Hello World on each and every page of your website. More reading here.
index.js will only be rendered if you access / path of your website. You will use index files whenever you create a new page, for example you want an about page, you will have an about folder containing an index.js, all of this contained in the pages folder. More reading here .
Related
I've got a (small) React app (vanilla create-react-app), that I would like to appear in a modal (bootstrap or similar) on another site. Is there a library that will simplify this process?
Specifically, the entire use case is that if my Javascript file is loaded (and just one javascript file), it will insert a "Click Me" type call to action, and when clicked my App component will be loaded into a new modal. It will need the CSS (for the app) to be included in some form as well.
I think all of this (excluding the call-to-action which is fairly simple) could be done during Babel/Webpack transpilation but I can't find anything off-the-shelf that seems to do this.
This functionality is built into ReactDOM.render. Simply add an id to your element.
For example:
<!-- index.html -->
<script src="url/to/react/build/asset" as="script" />
<div id="button-and-modal"></div>
Then to render your react app inside the div:
// index.js
import { render } from 'react-dom';
import App from './App'
function renderReact() {
const element = document.getElementById('button-and-modal');
render(<App/>, element)
}
document.addEventListener('DOMContentLoaded', renderReact);
Then your react app would look something like this:
const App = () => (
<div>
<Button/>
<Modal/>
</div>
)
You can also code the button and modal outside of the react app and only have the modal content rendered by react. If you want to do that, then follow the same directions but add the javascript for the button+modal inside the renderReact function.
You can use for example https://direflow.io/ to build your react app as a web component that you can render anywhere on any site.
Using your current project you can do
direflow create
cd <project-name>
npm install
and then
copy your whole app in folder into direflow-components so your project tree would look like:
/public
/src
/direflow-components
/<project-name>
// leave here only index.ts from example and copy all your project files here
index.ts
component-exports.ts
index.ts
react-app-env.d.ts
.eslintrc
...
If needed you can change
...
component: App,
configuration: {
tagname: 'example-component',
},
...
to your component that you want to render and tagname by which app will be accessible.
After all that you just do
npm run build
copy direflowBundle.js from build folder to your website
and render your app on some website like so:
<body>
<script src="./direflowBundle.js"></script>
<awesome-component></awesome-component>
</body>
I feel like I deal with this issue at every Front End job. It's definitely not easy, but I've found a number of ways to do it. I've tried the bundling idea you suggested but that one gave me the hardest time. The easiest way imo without a lot of hassle is to host your react app on a blank web page, then load it into an iframe where you need it.
At my last job, we wanted to migrate our shopify website to react, but with the way the shopify architecture was set up at the time, it made it difficult to us host a server-side rendered react app. So we built the web pages using Next.js and then deployed it to Vercel. We then inserted this as an iframe into the shopify website. It worked beautifully.
I have my react app directory structure like this.
I am using react-router to display some tabs in my app and in one of the tabs, I want to display static HTML /CSS and Javascript contents in one of my tab.
My src/main folder contains the following folders:
js folder with all react app-related JS components
resources/static folder with images folder and one random index.html file which is not used.
Approach 1:
I am wondering if I can put my static HTML /CSS and Javascript contents inside the resources/static folder or should I create a webapp folder and put it in there, and after putting it there, would I be able to access the contents inside my tab using Iframe?
Approach 2:
The other way which has worked for me is the following:
I put the static html,css and javascript in a folder(ProjectExternal) inside webapps folder of tomcat. And then access it like this from my react tab:
<Iframe
url="https://mycurrentserver/ProjectExternal/index.html"
width='100%'
//height='500%'
height='830px'
allowFullScreen
/>
If I can get it through Approach 1 then I won't have to go through the time-consuming process of Approach 2 of putting files and folders somewhere else and accessing it from there
This is how my pages folder looks like:
pages
index.js
[...slug].js
I know that the problem lies for sure in the fact that I am using catch all routes directly in the pages folder, because I tried with a "pages/page/[...slug].js structure and everything works fine.
When navigating using the Link component from the index.js page to a [...slug].js page (e.g. /careers or /blog), everything works fine.
BUT when navigating from a [...slug].js page (e.g. /contact) to another similar page (e.g. /blog) only the URL changes correctly, but the content of the page stays the same, so there is no rerendering.
Note: Navigating from a [...slug].js page back to the root file (href="/") works.
TLDR:
When returning the set of props from your getStaticProps or getServerSideProps function, return a "key" prop and assign it a unique value, so that react is able to differentiate between the two pages that are served from the same dynamic path.
I found the solution to the "problem" in github issue from last year: https://github.com/vercel/next.js/issues/9992
You can find a clear solution reading through the issue I linked.
Make each page its own file within your pages folder. For example, you could have:
pages/
index.js
contact.js
careers.js
blog.js
Each file should export a default function that returns JSX.
I've got the following structure:
pages/blog/[...slug].jsx
pages/blog/Create.jsx
The main problem is, I've got no idea how to make the "create" file unavailable for a browser navigation.
I need to open this "Create" page (Component) in my slug file. I know, I can create another directory and add files like that over there, but I don't find a such type of approach convenient.
Can I do something like this in the nextjs context?
Make a seperate folder other than pages ,like example components folder
-pages
->blog
->[slug].jsx
-components
->Create.jsx
Now u can import Create.jsx in your [slug].jsx file.
Based on the comments on another of my questions (gradle how to add files javascript fies to a directory in the war file) I'm trying to use angular-cli to help build and manage an angular project. However, I cannot seem to find any documentation on how to create a second webpage in the project, which to me seems like a very basic task. I tried creating a "component" with ng g component {component name}, but this didn't add anything to the build result.
I had missed the section of the angular docs on routing since I did not make the connection between the word "routing" and what I wanted to do. Routing as described here works perfectly when using Node as your server. However, other web servers such as Tomcat (which I am using for this project) will not since ng build only generates an index.html file. Node knows that it should re-route URLs under the angular base to that file, but Tomcat doesn't. A proxy server such as apache needs to be placed in front of the Tomcat server to redirect the urls to the base url for the application.
With that out of the way, here is the basics of routing:
create a component for each "page" (the component does not need to be responsible for the whole page displayed. see 2)
create a "shell" component that contains features that will be on all pages e.g. toolbar, side navigation.
add <router-outlet></router-outlet> to the point in the shell component component where components for sub-URLs will appear (note that they are inserted into the DOM after this tag, not within it.)
in the imports for your module, add RouterModule.forRoot(). This function takes an array of Route. Each route has a path and a component property. path is the url (relative to the base url) that will cause component to be inserted into the DOM. Note that path values should not begin with a slash.
add a tags with the routerLink property bound to the url of your new page. Note that here, there should be a leading slash.